웹 별칭 색상 토큰 2

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

웹 별칭 색상 토큰의 계속 페이지예요. 이어지는 표에서는 토큰 이름별로 라이트 모드와 다크 모드의 전역 토큰 값을 확인할 수 있어요. 각 값은 그대로 사용해 색상을 체계적이고 일관되게 적용할 수 있답니다.

출처: 문서

본문

Token Light Mode Dark Mode
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]
colorBrandForegroundLink brand[70] brand[100]
colorBrandForegroundLinkHover brand[60] brand[110]
colorBrandForegroundLinkPressed brand[40] brand[90]
colorBrandForegroundLinkSelected brand[70] brand[100]
colorNeutralForeground2Link grey[26] grey[84]
colorNeutralForeground2LinkHover grey[14] white
colorNeutralForeground2LinkPressed grey[14] white
colorNeutralForeground2LinkSelected grey[14] white
colorCompoundBrandForeground1 brand[80] brand[100]
colorCompoundBrandForeground1Hover brand[70] brand[110]
colorCompoundBrandForeground1Pressed brand[60] brand[90]
colorBrandForeground1 brand[80] brand[100]
colorBrandForeground2 brand[70] brand[110]
colorBrandForeground2Hover brand[60] brand[130]
colorBrandForeground2Pressed brand[30] brand[160]
colorNeutralForeground1Static grey[14] grey[14]
colorNeutralForegroundStaticInverted white white
colorNeutralForegroundInverted white grey[14]
colorNeutralForegroundInvertedHover white grey[14]
colorNeutralForegroundInvertedPressed white grey[14]
colorNeutralForegroundInvertedSelected white grey[14]
colorNeutralForegroundInverted2 white grey[14]
colorNeutralForegroundOnBrand white white
colorNeutralForegroundInvertedLink white white
colorNeutralForegroundInvertedLinkHover white white
colorNeutralForegroundInvertedLinkPressed white white
colorNeutralForegroundInvertedLinkSelected white white
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]
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
colorNeutralBackgroundStatic grey[20] grey[24]
colorNeutralBackgroundAlpha whiteAlpha[50] grey10Alpha[50]
colorNeutralBackgroundAlpha2 whiteAlpha[80] grey12Alpha[70]
colorSubtleBackground 'transparent' 'transparent'
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 'transparent' 'transparent'
colorSubtleBackgroundInverted 'transparent' 'transparent'
colorSubtleBackgroundInvertedHover blackAlpha[10] blackAlpha[10]
colorSubtleBackgroundInvertedPressed blackAlpha[30] blackAlpha[30]
colorSubtleBackgroundInvertedSelected blackAlpha[20] blackAlpha[20]
colorTransparentBackground 'transparent' 'transparent'
colorTransparentBackgroundHover 'transparent' 'transparent'
colorTransparentBackgroundPressed 'transparent' 'transparent'
colorTransparentBackgroundSelected 'transparent' 'transparent'
colorNeutralBackgroundDisabled grey[94] grey[8]
colorNeutralBackgroundInvertedDisabled whiteAlpha[10] whiteAlpha[10]
colorNeutralStencil1 grey[90] grey[34]
colorNeutralStencil2 grey[98] grey[20]
colorNeutralStencil1Alpha blackAlpha[10] whiteAlpha[10]
colorNeutralStencil2Alpha blackAlpha[5] whiteAlpha[5]
colorBackgroundOverlay blackAlpha[40] blackAlpha[50]
colorScrollbarOverlay blackAlpha[50] whiteAlpha[60]
colorBrandBackground brand[80] brand[70]
colorBrandBackgroundHover brand[70] brand[80]
colorBrandBackgroundPressed brand[40] brand[40]
colorBrandBackgroundSelected brand[60] brand[60]
colorCompoundBrandBackground brand[80] brand[100]
colorCompoundBrandBackgroundHover brand[70] brand[110]
colorCompoundBrandBackgroundPressed brand[60] brand[90]
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]
colorNeutralCardBackground grey[98] grey[20]
colorNeutralCardBackgroundHover white grey[24]
colorNeutralCardBackgroundPressed grey[96] grey[18]
colorNeutralCardBackgroundSelected grey[92] grey[22]
colorNeutralCardBackgroundDisabled grey[94] grey[8]
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
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]
colorCompoundBrandStroke brand[80] brand[100]
colorCompoundBrandStrokeHover brand[70] brand[110]
colorCompoundBrandStrokePressed brand[60] brand[90]
colorNeutralStrokeDisabled grey[88] grey[26]
colorNeutralStrokeInvertedDisabled whiteAlpha[40] whiteAlpha[40]
colorTransparentStroke 'transparent' 'transparent'
colorTransparentStrokeInteractive 'transparent' 'transparent'
colorTransparentStrokeDisabled 'transparent' 'transparent'
colorNeutralStrokeAlpha blackAlpha[5] whiteAlpha[10]
colorNeutralStrokeAlpha2 whiteAlpha[20] whiteAlpha[20]
colorStrokeFocus1 white black
colorStrokeFocus2 black white
colorNeutralShadowAmbient 'rgba(0 'rgba(0
colorNeutralShadowKey 'rgba(0 'rgba(0
colorNeutralShadowAmbientLighter 'rgba(0 'rgba(0
colorNeutralShadowKeyLighter 'rgba(0 'rgba(0
colorNeutralShadowAmbientDarker 'rgba(0 'rgba(0
colorNeutralShadowKeyDarker 'rgba(0 'rgba(0
colorBrandShadowAmbient 'rgba(0 'rgba(0
colorBrandShadowKey 'rgba(0 'rgba(0
colorPaletteRedBackground1 red[tint60] red[shade40]
colorPaletteRedBackground2 red[tint40] red[shade30]
colorPaletteRedBackground3 red[primary] red[primary]
colorPaletteRedForeground1 red[shade10] red[tint30]
colorPaletteRedForeground2 red[shade30] red[tint40]
colorPaletteRedForeground3 red[primary] red[tint30]
colorPaletteRedBorderActive red[primary] red[tint30]
colorPaletteRedBorder1 red[tint40] red[primary]
colorPaletteRedBorder2 red[primary] red[tint30]
colorPaletteGreenBackground1 green[tint60] green[shade40]
colorPaletteGreenBackground2 green[tint40] green[shade30]
colorPaletteGreenBackground3 green[primary] green[primary]
colorPaletteGreenForeground1 green[shade10] green[tint30]
colorPaletteGreenForeground2 green[shade30] green[tint40]
colorPaletteGreenForeground3 green[primary] green[tint40]
colorPaletteGreenBorderActive green[primary] green[tint30]
colorPaletteGreenBorder1 green[tint40] green[primary]
colorPaletteGreenBorder2 green[primary] green[tint40]
colorPaletteDarkOrangeBackground1 darkOrange[tint60] darkOrange[shade40]
colorPaletteDarkOrangeBackground2 darkOrange[tint40] darkOrange[shade30]
colorPaletteDarkOrangeBackground3 darkOrange[primary] darkOrange[primary]
colorPaletteDarkOrangeForeground1 darkOrange[shade10] darkOrange[tint30]
colorPaletteDarkOrangeForeground2 darkOrange[shade30] darkOrange[tint40]
colorPaletteDarkOrangeForeground3 darkOrange[primary] darkOrange[tint30]
colorPaletteDarkOrangeBorderActive darkOrange[primary] darkOrange[tint30]
colorPaletteDarkOrangeBorder1 darkOrange[tint40] darkOrange[primary]
colorPaletteDarkOrangeBorder2 darkOrange[primary] darkOrange[tint30]
colorPaletteYellowBackground1 yellow[tint60] yellow[shade40]
colorPaletteYellowBackground2 yellow[tint40] yellow[shade30]
colorPaletteYellowBackground3 yellow[primary] yellow[primary]
colorPaletteYellowForeground1 yellow[shade30] yellow[tint30]
colorPaletteYellowForeground2 yellow[shade30] yellow[tint40]
colorPaletteYellowForeground3 yellow[primary] yellow[tint20]
colorPaletteYellowBorderActive yellow[primary] yellow[tint30]
colorPaletteYellowBorder1 yellow[tint40] yellow[primary]
colorPaletteYellowBorder2 yellow[primary] yellow[tint20]
colorPaletteBerryBackground1 berry[tint60] berry[shade40]
colorPaletteBerryBackground2 berry[tint40] berry[shade30]
colorPaletteBerryBackground3 berry[primary] berry[primary]
colorPaletteBerryForeground1 berry[shade10] berry[tint30]
colorPaletteBerryForeground2 berry[shade30] berry[tint40]
colorPaletteBerryForeground3 berry[primary] berry[tint20]
colorPaletteBerryBorderActive berry[primary] berry[tint30]
colorPaletteBerryBorder1 berry[tint40] berry[primary]
colorPaletteBerryBorder2 berry[primary] berry[tint20]
colorPaletteLightGreenBackground1 lightGreen[tint60] lightGreen[shade40]
colorPaletteLightGreenBackground2 lightGreen[tint40] lightGreen[shade30]
colorPaletteLightGreenBackground3 lightGreen[primary] lightGreen[primary]
colorPaletteLightGreenForeground1 lightGreen[shade10] lightGreen[tint30]
colorPaletteLightGreenForeground2 lightGreen[shade30] lightGreen[tint40]
colorPaletteLightGreenForeground3 lightGreen[primary] lightGreen[tint20]
colorPaletteLightGreenBorderActive lightGreen[primary] lightGreen[tint30]
colorPaletteLightGreenBorder1 lightGreen[tint40] lightGreen[primary]
colorPaletteLightGreenBorder2 lightGreen[primary] lightGreen[tint20]
colorPaletteMarigoldBackground1 marigold[tint60] marigold[shade40]
colorPaletteMarigoldBackground2 marigold[tint40] marigold[shade30]
colorPaletteMarigoldBackground3 marigold[primary] marigold[primary]
colorPaletteMarigoldForeground1 marigold[shade10] marigold[tint30]
colorPaletteMarigoldForeground2 marigold[shade30] marigold[tint40]
colorPaletteMarigoldForeground3 marigold[primary] marigold[tint20]
colorPaletteMarigoldBorderActive marigold[primary] marigold[tint30]
colorPaletteMarigoldBorder1 marigold[tint40] marigold[primary]
colorPaletteMarigoldBorder2 marigold[primary] marigold[tint20]
colorPaletteRedForegroundInverted red[tint20] red[primary]
colorPaletteGreenForegroundInverted green[tint20] green[primary]
colorPaletteYellowForegroundInverted yellow[tint40] yellow[shade30]
colorPaletteDarkRedBackground2 darkRed[tint40] darkRed[shade20]
colorPaletteDarkRedForeground2 darkRed[shade30] darkRed[tint40]
colorPaletteDarkRedBorderActive darkRed[primary] darkRed[tint30]
colorPaletteCranberryBackground2 cranberry[tint40] cranberry[shade30]
colorPaletteCranberryForeground2 cranberry[shade30] cranberry[tint40]
colorPaletteCranberryBorderActive cranberry[primary] cranberry[tint30]
colorPalettePumpkinBackground2 pumpkin[tint40] pumpkin[shade30]
colorPalettePumpkinForeground2 pumpkin[shade30] pumpkin[tint40]
colorPalettePumpkinBorderActive pumpkin[primary] pumpkin[tint30]
colorPalettePeachBackground2 peach[tint40] peach[shade30]
colorPalettePeachForeground2 peach[shade30] peach[tint40]
colorPalettePeachBorderActive peach[primary] peach[tint30]
colorPaletteGoldBackground2 gold[tint40] gold[shade30]
colorPaletteGoldForeground2 gold[shade30] gold[tint40]
colorPaletteGoldBorderActive gold[primary] gold[tint30]
colorPaletteBrassBackground2 brass[tint40] brass[shade30]
colorPaletteBrassForeground2 brass[shade30] brass[tint40]
colorPaletteBrassBorderActive brass[primary] brass[tint30]
colorPaletteBrownBackground2 brown[tint40] brown[shade30]
colorPaletteBrownForeground2 brown[shade30] brown[tint40]
colorPaletteBrownBorderActive brown[primary] brown[tint30]
colorPaletteForestBackground2 forest[tint40] forest[shade30]
colorPaletteForestForeground2 forest[shade30] forest[tint40]
colorPaletteForestBorderActive forest[primary] forest[tint30]
colorPaletteSeafoamBackground2 seafoam[tint40] seafoam[shade30]
colorPaletteSeafoamForeground2 seafoam[shade30] seafoam[tint40]
colorPaletteSeafoamBorderActive seafoam[primary] seafoam[tint30]
colorPaletteDarkGreenBackground2 darkGreen[tint40] darkGreen[shade30]
colorPaletteDarkGreenForeground2 darkGreen[shade30] darkGreen[tint40]
colorPaletteDarkGreenBorderActive darkGreen[primary] darkGreen[tint30]
colorPaletteLightTealBackground2 lightTeal[tint40] lightTeal[shade30]
colorPaletteLightTealForeground2 lightTeal[shade30] lightTeal[tint40]
colorPaletteLightTealBorderActive lightTeal[primary] lightTeal[tint30]
colorPaletteTealBackground2 teal[tint40] teal[shade30]
colorPaletteTealForeground2 teal[shade30] teal[tint40]
colorPaletteTealBorderActive teal[primary] teal[tint30]
colorPaletteSteelBackground2 steel[tint40] steel[shade30]
colorPaletteSteelForeground2 steel[shade30] steel[tint40]
colorPaletteSteelBorderActive steel[primary] steel[tint30]
colorPaletteBlueBackground2 blue[tint40] blue[shade30]
colorPaletteBlueForeground2 blue[shade30] blue[tint40]
colorPaletteBlueBorderActive blue[primary] blue[tint30]
colorPaletteRoyalBlueBackground2 royalBlue[tint40] royalBlue[shade30]
colorPaletteRoyalBlueForeground2 royalBlue[shade30] royalBlue[tint40]
colorPaletteRoyalBlueBorderActive royalBlue[primary] royalBlue[tint30]
colorPaletteCornflowerBackground2 cornflower[tint40] cornflower[shade30]
colorPaletteCornflowerForeground2 cornflower[shade30] cornflower[tint40]
colorPaletteCornflowerBorderActive cornflower[primary] cornflower[tint30]
colorPaletteNavyBackground2 navy[tint40] navy[shade30]
colorPaletteNavyForeground2 navy[shade30] navy[tint40]
colorPaletteNavyBorderActive navy[primary] navy[tint30]
colorPaletteLavenderBackground2 lavender[tint40] lavender[shade30]
colorPaletteLavenderForeground2 lavender[shade30] lavender[tint40]
colorPaletteLavenderBorderActive lavender[primary] lavender[tint30]
colorPalettePurpleBackground2 purple[tint40] purple[shade30]
colorPalettePurpleForeground2 purple[shade30] purple[tint40]
colorPalettePurpleBorderActive purple[primary] purple[tint30]
colorPaletteGrapeBackground2 grape[tint40] grape[shade30]
colorPaletteGrapeForeground2 grape[shade30] grape[tint40]
colorPaletteGrapeBorderActive grape[primary] grape[tint30]
colorPaletteLilacBackground2 lilac[tint40] lilac[shade30]
colorPaletteLilacForeground2 lilac[shade30] lilac[tint40]
colorPaletteLilacBorderActive lilac[primary] lilac[tint30]
colorPalettePinkBackground2 pink[tint40] pink[shade30]
colorPalettePinkForeground2 pink[shade30] pink[tint40]
colorPalettePinkBorderActive pink[primary] pink[tint30]
colorPaletteMagentaBackground2 magenta[tint40] magenta[shade30]
colorPaletteMagentaForeground2 magenta[shade30] magenta[tint40]
colorPaletteMagentaBorderActive magenta[primary] magenta[tint30]
colorPalettePlumBackground2 plum[tint40] plum[shade20]
colorPalettePlumForeground2 plum[shade30] plum[tint40]
colorPalettePlumBorderActive plum[primary] plum[tint30]
colorPaletteBeigeBackground2 beige[tint40] beige[shade30]
colorPaletteBeigeForeground2 beige[shade30] beige[tint40]
colorPaletteBeigeBorderActive beige[primary] beige[tint30]
colorPaletteMinkBackground2 mink[tint40] mink[shade30]
colorPaletteMinkForeground2 mink[shade30] mink[tint40]
colorPaletteMinkBorderActive mink[primary] mink[tint30]
colorPalettePlatinumBackground2 platinum[tint40] platinum[shade30]
colorPalettePlatinumForeground2 platinum[shade30] platinum[tint40]
colorPalettePlatinumBorderActive platinum[primary] platinum[tint30]
colorPaletteAnchorBackground2 anchor[tint40] anchor[shade30]
colorPaletteAnchorForeground2 anchor[shade30] anchor[tint40]
colorPaletteAnchorBorderActive anchor[primary] anchor[tint30]
colorStatusDangerBackground1 cranberry[tint60] cranberry[shade40]
colorStatusDangerBackground2 cranberry[tint40] cranberry[shade30]
colorStatusDangerBackground3 cranberry[primary] cranberry[primary]
colorStatusDangerForeground1 cranberry[shade10] cranberry[tint30]
colorStatusDangerForeground2 cranberry[shade30] cranberry[tint40]
colorStatusDangerForeground3 cranberry[primary] cranberry[tint40]
colorStatusDangerBorderActive cranberry[primary] cranberry[tint30]
colorStatusDangerForegroundInverted cranberry[tint30] cranberry[shade10]
colorStatusDangerBorder1 cranberry[tint40] cranberry[primary]
colorStatusDangerBorder2 cranberry[primary] cranberry[tint30]
colorStatusSuccessBackground1 green[tint60] green[shade40]
colorStatusSuccessBackground2 green[tint40] green[shade30]
colorStatusSuccessBackground3 green[primary] green[primary]
colorStatusSuccessForeground1 green[shade10] green[tint30]
colorStatusSuccessForeground2 green[shade30] green[tint40]
colorStatusSuccessForeground3 green[primary] green[tint40]
colorStatusSuccessBorderActive green[primary] green[tint30]
colorStatusSuccessForegroundInverted green[tint30] green[shade10]
colorStatusSuccessBorder1 green[tint40] green[primary]
colorStatusSuccessBorder2 green[primary] green[tint40]
colorStatusWarningBackground1 orange[tint60] orange[shade40]
colorStatusWarningBackground2 orange[tint40] orange[shade30]
colorStatusWarningBackground3 orange[primary] orange[primary]
colorStatusWarningForeground1 orange[shade20] orange[tint30]
colorStatusWarningForeground2 orange[shade30] orange[tint40]
colorStatusWarningForeground3 orange[shade20] orange[tint20]
colorStatusWarningBorderActive orange[primary] orange[tint30]
colorStatusWarningForegroundInverted orange[tint30] orange[shade20]
colorStatusWarningBorder1 orange[tint40] orange[primary]
colorStatusWarningBorder2 orange[shade20] orange[tint20]
colorStatusDangerBackground3Hover cranberry[shade10] cranberry[shade10]
colorStatusDangerBackground3Pressed cranberry[shade20] cranberry[shade20]

더 알아보기 (Learn more)

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