웹 별칭 색상 토큰

웹 별칭 색상 토큰 (Web Alias Color Tokens)

색상 토큰은 디자인 시스템의 핵심 팔레트를 정의하고, 일관되게 쓰기 쉽도록 별칭(alias) 그룹으로 정리해 둔 값이에요. 이 페이지에는 중성(neutral), 브랜드(brand), 상태(status), 일반(generic) 카테고리로 나눈 토큰 표가 담겨 있어요. 중성 토큰은 표면과 텍스트의 바탕을, 브랜드 토큰은 정체성과 인지도를, 상태 토큰은 성공이나 오류 같은 의미를, 일반 토큰은 더 넓은 사용 사례를 지원해요. 원시 값 대신 이 별칭들로 작업하면 디자이너와 개발자가 색상을 체계적으로 적용하고, 테마에 유연하게 대응하며, 제품 전반에 안정적으로 확장할 수 있답니다.

출처: 문서

본문

중성 배경 (Neutral Background)

Alias token Global token light Global token dark
colorNeutralBackground1 white grey[16]
colorNeutralBackground1Hover grey[96] grey[24]
colorNeutralBackground1Pressed grey[88] grey[12]
colorNeutralBackground1Selected grey[92] grey[22]
colorNeutralBackground2 grey[98] grey[12]
colorNeutralBackground2Hover grey[94] grey[20]
colorNeutralBackground2Pressed grey[86] grey[8]
colorNeutralBackground2Selected grey[90] grey[18]
colorNeutralBackground3 grey[96] grey[8]
colorNeutralBackground3Hover grey[92] grey[16]
colorNeutralBackground3Pressed grey[84] grey[4]
colorNeutralBackground3Selected grey[88] grey[14]
colorNeutralBackground4 grey[94] grey[4]
colorNeutralBackground4Hover grey[98] grey[12]
colorNeutralBackground4Pressed grey[96] black
colorNeutralBackground4Selected white grey[10]
colorNeutralBackground5 grey[92] black
colorNeutralBackground5Hover grey[96] grey[8]
colorNeutralBackground5Pressed grey[94] grey[2]
colorNeutralBackground5Selected grey[98] grey[6]
colorNeutralBackground6 grey[90] grey[20]
colorNeutralBackgroundInverted grey[16] white
colorNeutralBackgroundInvertedDisabled whiteAlpha[10] whiteAlpha[10]
colorNeutralBackgroundStatic grey[20] grey[24]
colorNeutralBackgroundAlpha whiteAlpha[50] grey10Alpha[50]
colorNeutralBackgroundAlpha2 whiteAlpha[80] grey12Alpha[70]
colorSubtleBackground grey[96] grey[22]
colorSubtleBackgroundHover grey[96] grey[22]
colorSubtleBackgroundPressed grey[88] grey[18]
colorSubtleBackgroundSelected grey[92] grey[20]
colorSubtleBackgroundLightAlphaHover whiteAlpha[70] grey14Alpha[80]
colorSubtleBackgroundLightAlphaPressed whiteAlpha[50] grey14Alpha[50]
colorSubtleBackgroundLightAlphaSelected blackAlpha[10] blackAlpha[10]
colorSubtleBackgroundInverted blackAlpha[10] blackAlpha[10]
colorSubtleBackgroundInvertedHover blackAlpha[10] blackAlpha[10]
colorSubtleBackgroundInvertedPressed blackAlpha[30] blackAlpha[30]
colorSubtleBackgroundInvertedSelected blackAlpha[20] blackAlpha[20]
colorTransparentBackground grey[94] grey[8]
colorTransparentBackgroundHover grey[94] grey[8]
colorTransparentBackgroundPressed grey[94] grey[8]
colorTransparentBackgroundSelected grey[94] grey[8]
colorNeutralBackgroundDisabled grey[94] grey[8]
colorNeutralCardBackground grey[98] grey[20]
colorNeutralCardBackgroundHover white grey[24]
colorNeutralCardBackgroundPressed grey[96] grey[18]
colorNeutralCardBackgroundSelected grey[92] grey[22]
colorNeutralCardBackgroundDisabled grey[94] grey[8]

중성 전경 (Neutral Foreground)

Alias token Global token light Global token dark
colorNeutralForeground1 grey[14] white
colorNeutralForeground1Hover grey[14] white
colorNeutralForeground1Pressed grey[14] white
colorNeutralForeground1Selected grey[14] white
colorNeutralForeground2 grey[26] grey[84]
colorNeutralForeground2Hover grey[14] white
colorNeutralForeground2Pressed grey[14] white
colorNeutralForeground2Selected grey[14] white
colorNeutralForeground2BrandHover brand[80] brand[100]
colorNeutralForeground2BrandPressed brand[70] brand[90]
colorNeutralForeground2BrandSelected brand[80] brand[100]
colorNeutralForeground3 grey[38] grey[68]
colorNeutralForeground3Hover grey[26] grey[84]
colorNeutralForeground3Pressed grey[26] grey[84]
colorNeutralForeground3Selected grey[26] grey[84]
colorNeutralForeground3BrandHover brand[80] brand[100]
colorNeutralForeground3BrandPressed brand[70] brand[90]
colorNeutralForeground3BrandSelected brand[80] brand[100]
colorNeutralForeground4 grey[44] grey[60]
colorNeutralForegroundDisabled grey[74] grey[36]
colorNeutralForegroundInvertedDisabled whiteAlpha[40] whiteAlpha[40]
colorNeutralForegroundInverted white grey[14]
colorNeutralForegroundInvertedHover white grey[14]
colorNeutralForegroundInvertedPressed white grey[14]
colorNeutralForegroundInvertedSelected white grey[14]
colorNeutralForeground2Link grey[26] grey[84]
colorNeutralForeground2LinkHover grey[14] white
colorNeutralForeground2LinkPressed grey[14] white
colorNeutralForeground2LinkSelected grey[14] white
colorNeutralForeground1Static grey[14] grey[14]
colorNeutralForegroundStaticInverted white white
colorNeutralForegroundInverted2 white grey[14]
colorNeutralForegroundOnBrand white white
colorNeutralForegroundInvertedLink white white
colorNeutralForegroundInvertedLinkHover white white
colorNeutralForegroundInvertedLinkPressed white white
colorNeutralForegroundInvertedLinkSelected white white
colorNeutralStencil1 grey[90] grey[34]
colorNeutralStencil2 grey[98] grey[20]
colorNeutralStencil1Alpha blackAlpha[10] whiteAlpha[10]
colorNeutralStencil2Alpha blackAlpha[5] whiteAlpha[5]

중성 스트로크 (Neutral Stroke)

Alias token Global token light Global token dark
colorNeutralStrokeAccessible grey[38] grey[68]
colorNeutralStrokeAccessibleHover grey[34] grey[74]
colorNeutralStrokeAccessiblePressed grey[30] grey[70]
colorNeutralStrokeAccessibleSelected brand[80] brand[100]
colorNeutralStroke1 grey[82] grey[40]
colorNeutralStroke1Hover grey[78] grey[46]
colorNeutralStroke1Pressed grey[70] grey[42]
colorNeutralStroke1Selected grey[74] grey[44]
colorNeutralStroke2 grey[88] grey[32]
colorNeutralStroke3 grey[94] grey[24]
colorNeutralStrokeSubtle grey[88] grey[4]
colorNeutralStrokeOnBrand white grey[16]
colorNeutralStrokeOnBrand2 white white
colorNeutralStrokeOnBrand2Hover white white
colorNeutralStrokeOnBrand2Pressed white white
colorNeutralStrokeOnBrand2Selected white white
colorNeutralStrokeDisabled grey[88] grey[26]
colorNeutralStrokeInvertedDisabled whiteAlpha[40] whiteAlpha[40]
colorTransparentStroke blackAlpha[5] whiteAlpha[10]
colorTransparentStrokeDisabled blackAlpha[5] whiteAlpha[10]
colorTransparentStrokeInteractive blackAlpha[5] whiteAlpha[10]
colorNeutralStrokeAlpha blackAlpha[5] whiteAlpha[10]
colorNeutralStrokeAlpha2 whiteAlpha[20] whiteAlpha[20]

중성 그림자 (Neutral Shadow)

Alias token Global token light Global token dark
colorNeutralShadowAmbient ‘rgba(0,0,0,0.12)’ ‘rgba(0,0,0,0.24)‘
colorNeutralShadowKey ‘rgba(0,0,0,0.14)’ ‘rgba(0,0,0,0.28)‘
colorNeutralShadowAmbientLighter ‘rgba(0,0,0,0.06)’ ‘rgba(0,0,0,0.12)‘
colorNeutralShadowKeyLighter ‘rgba(0,0,0,0.07)’ ‘rgba(0,0,0,0.14)‘
colorNeutralShadowAmbientDarker ‘rgba(0,0,0,0.20)’ ‘rgba(0,0,0,0.40)‘
colorNeutralShadowKeyDarker ‘rgba(0,0,0,0.24)’ ‘rgba(0,0,0,0.48)‘

브랜드 배경 (Brand Background)

Alias token Global token light Global token dark
colorBrandBackground brand[80] brand[70]
colorBrandBackgroundHover brand[70] brand[80]
colorBrandBackgroundPressed brand[40] brand[40]
colorBrandBackgroundSelected brand[60] brand[60]
colorBrandBackgroundStatic brand[80] brand[80]
colorBrandBackground2 brand[160] brand[20]
colorBrandBackground2Hover brand[150] brand[40]
colorBrandBackground2Pressed brand[130] brand[10]
colorBrandBackground3Static brand[60] brand[60]
colorBrandBackground4Static brand[40] brand[40]
colorBrandBackgroundInverted white white
colorBrandBackgroundInvertedHover brand[160] brand[160]
colorBrandBackgroundInvertedPressed brand[140] brand[140]
colorBrandBackgroundInvertedSelected brand[150] brand[150]

브랜드 전경 (Brand Foreground)

Alias token Global token light Global token dark
colorBrandForegroundLink brand[70] brand[100]
colorBrandForegroundLinkHover brand[60] brand[110]
colorBrandForegroundLinkPressed brand[40] brand[90]
colorBrandForegroundLinkSelected brand[70] brand[100]
colorBrandForeground1 brand[80] brand[100]
colorBrandForeground2 brand[70] brand[110]
colorBrandForeground2Hover brand[60] brand[130]
colorBrandForeground2Pressed brand[30] brand[160]
colorBrandForegroundInverted brand[100] brand[80]
colorBrandForegroundInvertedHover brand[110] brand[70]
colorBrandForegroundInvertedPressed brand[100] brand[60]
colorBrandForegroundOnLight brand[80] brand[80]
colorBrandForegroundOnLightHover brand[70] brand[70]
colorBrandForegroundOnLightPressed brand[50] brand[50]
colorBrandForegroundOnLightSelected brand[60] brand[60]

브랜드 스트로크 (Brand Stroke)

Alias token Global token light Global token dark
colorBrandStroke1 brand[80] brand[100]
colorBrandStroke2 brand[140] brand[50]
colorBrandStroke2Hover brand[120] brand[50]
colorBrandStroke2Pressed brand[80] brand[30]
colorBrandStroke2Contrast brand[140] brand[50]

브랜드 그림자 (Brand Shadow)

Alias token Global token light Global token dark
colorBrandShadowAmbient ‘rgba(0,0,0,0.30)’ ‘rgba(0,0,0,0.30)‘
colorBrandShadowKey ‘rgba(0,0,0,0.25)’ ‘rgba(0,0,0,0.25)‘

상태 배경 (Status Background)

Alias token Global token light Global token dark
colorStatusDangerBackground1 cranberry[tint60] cranberry[shade40]
colorStatusDangerBackground2 cranberry[tint40] cranberry[shade30]
colorStatusDangerBackground3 cranberry[primary] cranberry[primary]
colorStatusDangerBackground3Hover cranberry[shade10] cranberry[shade10]
colorStatusDangerBackground3Pressed cranberry[shade20] cranberry[shade20]
colorStatusSuccessBackground1 green[tint60] green[shade40]
colorStatusSuccessBackground2 green[tint40] green[shade30]
colorStatusSuccessBackground3 green[primary] green[primary]
colorStatusWarningBackground1 orange[tint60] orange[shade40]
colorStatusWarningBackground2 orange[tint40] orange[shade30]
colorStatusWarningBackground3 orange[primary] orange[primary]

상태 전경 (Status Foreground)

Alias token Global token light Global token dark
colorStatusDangerForeground1 cranberry[shade10] cranberry[tint30]
colorStatusDangerForeground2 cranberry[shade30] cranberry[tint40]
colorStatusDangerForeground3 cranberry[primary] cranberry[tint40]
colorStatusDangerForegroundInverted cranberry[tint30] cranberry[shade10]
colorStatusSuccessForeground1 green[shade10] green[tint30]
colorStatusSuccessForeground2 green[shade30] green[tint40]
colorStatusSuccessForeground3 green[primary] green[tint40]
colorStatusSuccessForegroundInverted green[tint30] green[shade10]
colorStatusWarningForeground1 orange[shade20] orange[tint30]
colorStatusWarningForeground2 orange[shade30] orange[tint40]
colorStatusWarningForeground3 orange[shade20] orange[tint20]
colorStatusWarningForegroundInverted orange[tint30] orange[shade20]

상태 스트로크 (Status Stroke)

Alias token Global token light Global token dark
colorStatusDangerBorderActive cranberry[primary] cranberry[tint30]
colorStatusDangerBorder1 cranberry[tint40] cranberry[primary]
colorStatusDangerBorder2 cranberry[primary] cranberry[tint30]
colorStatusSuccessBorderActive green[primary] green[tint30]
colorStatusSuccessBorder1 green[tint40] green[primary]
colorStatusSuccessBorder2 green[primary] green[tint40]
colorStatusWarningBorderActive orange[primary] orange[tint30]
colorStatusWarningBorder1 orange[tint40] orange[primary]
colorStatusWarningBorder2 orange[shade20] orange[tint20]

일반 상태 배경 (Generic Status Background)

Alias token Global token light Global token dark
colorPaletteRedBackground1 red[tint60] red[shade40]
colorPaletteRedBackground2 red[tint40] red[shade30]
colorPaletteRedBackground3 red[primary] red[primary]
colorPaletteGreenBackground1 green[tint60] green[shade40]
colorPaletteGreenBackground2 green[tint40] green[shade30]
colorPaletteGreenBackground3 green[primary] green[primary]
colorPaletteDarkOrangeBackground1 darkOrange[tint60] darkOrange[shade40]
colorPaletteDarkOrangeBackground2 darkOrange[tint40] darkOrange[shade30]
colorPaletteDarkOrangeBackground3 darkOrange[primary] darkOrange[primary]
colorPaletteYellowBackground1 yellow[tint60] yellow[shade40]
colorPaletteYellowBackground2 yellow[tint40] yellow[shade30]
colorPaletteYellowBackground3 yellow[primary] yellow[primary]
colorPaletteBerryBackground1 berry[tint60] berry[shade40]
colorPaletteBerryBackground2 berry[tint40] berry[shade30]
colorPaletteBerryBackground3 berry[primary] berry[primary]
colorPaletteLightGreenBackground1 lightGreen[tint60] lightGreen[shade40]
colorPaletteLightGreenBackground2 lightGreen[tint40] lightGreen[shade30]
colorPaletteLightGreenBackground3 lightGreen[primary] lightGreen[primary]
colorPaletteMarigoldBackground1 marigold[tint60] marigold[shade40]
colorPaletteMarigoldBackground2 marigold[tint40] marigold[shade30]
colorPaletteMarigoldBackground3 marigold[primary] marigold[primary]
colorPaletteDarkRedBackground2 darkRed[tint40] darkRed[shade20]
colorPaletteCranberryBackground2 cranberry[tint40] cranberry[shade30]
colorPalettePumpkinBackground2 pumpkin[tint40] pumpkin[shade30]
colorPalettePeachBackground2 peach[tint40] peach[shade30]
colorPaletteGoldBackground2 gold[tint40] gold[shade30]
colorPaletteBrassBackground2 brass[tint40] brass[shade30]
colorPaletteBrownBackground2 brown[tint40] brown[shade30]
colorPaletteForestBackground2 forest[tint40] forest[shade30]
colorPaletteSeafoamBackground2 seafoam[tint40] seafoam[shade30]
colorPaletteDarkGreenBackground2 darkGreen[tint40] darkGreen[shade30]
colorPaletteLightTealBackground2 lightTeal[tint40] lightTeal[shade30]
colorPaletteTealBackground2 teal[tint40] teal[shade30]
colorPaletteSteelBackground2 steel[tint40] steel[shade30]
colorPaletteBlueBackground2 blue[tint40] blue[shade30]
colorPaletteRoyalBlueBackground2 royalBlue[tint40] royalBlue[shade30]
colorPaletteCornflowerBackground2 cornflower[tint40] cornflower[shade30]
colorPaletteNavyBackground2 navy[tint40] navy[shade30]
colorPaletteLavenderBackground2 lavender[tint40] lavender[shade30]
colorPalettePurpleBackground2 purple[tint40] purple[shade30]
colorPaletteGrapeBackground2 grape[tint40] grape[shade30]
colorPaletteLilacBackground2 lilac[tint40] lilac[shade30]
colorPalettePinkBackground2 pink[tint40] pink[shade30]
colorPaletteMagentaBackground2 magenta[tint40] magenta[shade30]
colorPalettePlumBackground2 plum[tint40] plum[shade20]
colorPaletteBeigeBackground2 beige[tint40] beige[shade30]
colorPaletteMinkBackground2 mink[tint40] mink[shade30]
colorPalettePlatinumBackground2 platinum[tint40] platinum[shade30]
colorPaletteAnchorBackground2 anchor[tint40] anchor[shade30]

일반 상태 전경 (Generic Status Foreground)

Alias token Global token light Global token dark
colorPaletteRedForeground1 red[shade10] red[tint30]
colorPaletteRedForeground2 red[shade30] red[tint40]
colorPaletteRedForeground3 red[primary] red[tint30]
colorPaletteGreenForeground1 green[shade10] green[tint30]
colorPaletteGreenForeground2 green[shade30] green[tint40]
colorPaletteGreenForeground3 green[primary] green[tint40]
colorPaletteDarkOrangeForeground1 darkOrange[shade10] darkOrange[tint30]
colorPaletteDarkOrangeForeground2 darkOrange[shade30] darkOrange[tint40]
colorPaletteDarkOrangeForeground3 darkOrange[primary] darkOrange[tint30]
colorPaletteYellowForeground1 yellow[shade30] yellow[tint30]
colorPaletteYellowForeground2 yellow[shade30] yellow[tint40]
colorPaletteYellowForeground3 yellow[primary] yellow[tint20]
colorPaletteBerryForeground1 berry[shade10] berry[tint30]
colorPaletteBerryForeground2 berry[shade30] berry[tint40]
colorPaletteBerryForeground3 berry[primary] berry[tint20]
colorPaletteLightGreenForeground1 lightGreen[shade10] lightGreen[tint30]
colorPaletteLightGreenForeground2 lightGreen[shade30] lightGreen[tint40]
colorPaletteLightGreenForeground3 lightGreen[primary] lightGreen[tint20]
colorPaletteMarigoldForeground1 marigold[shade10] marigold[tint30]
colorPaletteMarigoldForeground2 marigold[shade30] marigold[tint40]
colorPaletteMarigoldForeground3 marigold[primary] marigold[tint20]
colorPaletteRedForegroundInverted red[tint20] red[primary]
colorPaletteGreenForegroundInverted green[tint20] green[primary]
colorPaletteYellowForegroundInverted yellow[tint40] yellow[shade30]
colorPaletteDarkRedForeground2 darkRed[shade30] darkRed[tint40]
colorPaletteCranberryForeground2 cranberry[shade30] cranberry[tint40]
colorPalettePumpkinForeground2 pumpkin[shade30] pumpkin[tint40]
colorPalettePeachForeground2 peach[shade30] peach[tint40]
colorPaletteGoldForeground2 gold[shade30] gold[tint40]
colorPaletteBrassForeground2 brass[shade30] brass[tint40]
colorPaletteBrownForeground2 brown[shade30] brown[tint40]
colorPaletteForestForeground2 forest[shade30] forest[tint40]
colorPaletteSeafoamForeground2 seafoam[shade30] seafoam[tint40]
colorPaletteDarkGreenForeground2 darkGreen[shade30] darkGreen[tint40]
colorPaletteLightTealForeground2 lightTeal[shade30] lightTeal[tint40]
colorPaletteTealForeground2 teal[shade30] teal[tint40]
colorPaletteSteelForeground2 steel[shade30] steel[tint40]
colorPaletteBlueForeground2 blue[shade30] blue[tint40]
colorPaletteRoyalBlueForeground2 royalBlue[shade30] royalBlue[tint40]
colorPaletteCornflowerForeground2 cornflower[shade30] cornflower[tint40]
colorPaletteNavyForeground2 navy[shade30] navy[tint40]
colorPaletteLavenderForeground2 lavender[shade30] lavender[tint40]
colorPalettePurpleForeground2 purple[shade30] purple[tint40]
colorPaletteGrapeForeground2 grape[shade30] grape[tint40]
colorPaletteLilacForeground2 lilac[shade30] lilac[tint40]
colorPalettePinkForeground2 pink[shade30] pink[tint40]
colorPaletteMagentaForeground2 magenta[shade30] magenta[tint40]
colorPalettePlumForeground2 plum[shade30] plum[tint40]
colorPaletteBeigeForeground2 beige[shade30] beige[tint40]
colorPaletteMinkForeground2 mink[shade30] mink[tint40]
colorPalettePlatinumForeground2 platinum[shade30] platinum[tint40]
colorPaletteAnchorForeground2 anchor[shade30] anchor[tint40]

일반 상태 스트로크 (Generic Status Stroke)

Alias token Global token light Global token dark
colorPaletteRedBorderActive red[primary] red[tint30]
colorPaletteRedBorder1 red[tint40] red[primary]
colorPaletteRedBorder2 red[primary] red[tint30]
colorPaletteGreenBorderActive green[primary] green[tint30]
colorPaletteGreenBorder1 green[tint40] green[primary]
colorPaletteGreenBorder2 green[primary] green[tint40]
colorPaletteDarkOrangeBorderActive darkOrange[primary] darkOrange[tint30]
colorPaletteDarkOrangeBorder1 darkOrange[tint40] darkOrange[primary]
colorPaletteDarkOrangeBorder2 darkOrange[primary] darkOrange[tint30]
colorPaletteYellowBorderActive yellow[primary] yellow[tint30]
colorPaletteYellowBorder1 yellow[tint40] yellow[primary]
colorPaletteYellowBorder2 yellow[primary] yellow[tint20]
colorPaletteBerryBorderActive berry[primary] berry[tint30]
colorPaletteBerryBorder1 berry[tint40] berry[primary]
colorPaletteBerryBorder2 berry[primary] berry[tint20]
colorPaletteLightGreenBorderActive lightGreen[primary] lightGreen[tint30]
colorPaletteLightGreenBorder1 lightGreen[tint40] lightGreen[primary]
colorPaletteLightGreenBorder2 lightGreen[primary] lightGreen[tint20]
colorPaletteMarigoldBorderActive marigold[primary] marigold[tint30]
colorPaletteMarigoldBorder1 marigold[tint40] marigold[primary]
colorPaletteMarigoldBorder2 marigold[primary] marigold[tint20]
colorPaletteDarkRedBorderActive darkRed[primary] darkRed[tint30]
colorPaletteCranberryBorderActive cranberry[primary] cranberry[tint30]
colorPalettePumpkinBorderActive pumpkin[primary] pumpkin[tint30]
colorPalettePeachBorderActive peach[primary] peach[tint30]
colorPaletteGoldBorderActive gold[primary] gold[tint30]
colorPaletteBrassBorderActive brass[primary] brass[tint30]
colorPaletteBrownBorderActive brown[primary] brown[tint30]
colorPaletteForestBorderActive forest[primary] forest[tint30]
colorPaletteSeafoamBorderActive seafoam[primary] seafoam[tint30]
colorPaletteDarkGreenBorderActive darkGreen[primary] darkGreen[tint30]
colorPaletteLightTealBorderActive lightTeal[primary] lightTeal[tint30]
colorPaletteTealBorderActive teal[primary] teal[tint30]
colorPaletteSteelBorderActive steel[primary] steel[tint30]
colorPaletteBlueBorderActive blue[primary] blue[tint30]
colorPaletteRoyalBlueBorderActive royalBlue[primary] royalBlue[tint30]
colorPaletteCornflowerBorderActive cornflower[primary] cornflower[tint30]
colorPaletteNavyBorderActive navy[primary] navy[tint30]
colorPaletteLavenderBorderActive lavender[primary] lavender[tint30]
colorPalettePurpleBorderActive purple[primary] purple[tint30]
colorPaletteGrapeBorderActive grape[primary] grape[tint30]
colorPaletteLilacBorderActive lilac[primary] lilac[tint30]
colorPalettePinkBorderActive pink[primary] pink[tint30]
colorPaletteMagentaBorderActive magenta[primary] magenta[tint30]
colorPalettePlumBorderActive plum[primary] plum[tint30]
colorPaletteBeigeBorderActive beige[primary] beige[tint30]
colorPaletteMinkBorderActive mink[primary] mink[tint30]
colorPalettePlatinumBorderActive platinum[primary] platinum[tint30]
colorPaletteAnchorBorderActive anchor[primary] anchor[tint30]

더 알아보기 (Learn more)

  • 웹 별칭 색상 토큰 2 (color-tokens2)