Select Color

Hue

Saturation

Light Theme
Hint
Hint
1
Label
Label
Label
Dark Theme
Hint
Hint
1
Label
Label
Label

Semantic Color Tokens

Name
Light Mode
Dark Mode
Light Mode High Contrast
🎯 interactivePrimary
custom/custom50 #000000
custom/custom30 #000000
custom/custom60 #000000
🎯 interactiveLowContrast
custom/custom10 #000000
custom/custom70 #000000
custom/custom20 #000000
🎯 interactiveHighContrast
custom/custom70 #000000
custom/custom10 #000000
custom/custom80 #000000
🏠 backgroundPrimary
black & white/white
custom/custom90 #000000
black & white/white
🏠 backgroundSecondary
custom/custom05 #000000
black & white/black
custom/custom10 #000000
🏠 backgroundTertiary
custom/custom10 #000000
custom/custom70 #000000
custom/custom20 #000000
🏠 backgroundInvertedPrimary
custom/custom90 #000000
black & white/white
custom/custom80 #000000
🏠 backgroundInvertedSecondary
black & white/black
custom/custom05 #000000
black & white/black
🏠 backgroundInvertedTertiary
custom/custom70 #000000
custom/custom10 #000000
custom/custom70 #000000
📝 contentPrimary
custom/custom90 #000000
black & white/white
black & white/black
📝 contentSecondary
custom/custom55 #000000
custom/custom30 #000000
custom/custom80 #000000
📝 contentTertiary
custom/custom50 #000000
custom/custom40 #000000
custom/custom60 #000000
📝 contentInvertedPrimary
black & white/white
custom/custom90 #000000
black & white/white
📝 contentInvertedSecondary
custom/custom40 #000000
custom/custom60 #000000
custom/custom10 #000000
📝 contentInvertedTertiary
custom/custom60 #000000
custom/custom50 #000000
custom/custom25 #000000
🎨 accentCustomPrimary
custom/custom50 #000000
custom/custom40 #000000
custom/custom60 #000000
🎨 accentCustomLowContrast
custom/custom10 #000000
custom/custom70 #000000
custom/custom20 #000000
🎨 accentCustomHighContrast
custom/custom70 #000000
custom/custom10 #000000
custom/custom80 #000000
🎨 accentCustomSecondary
custom/custom40 #000000
custom/custom30 #000000
custom/custom50 #000000