Color System

This page lists all colors in the Miuix color scheme with their default light and dark values. Values are shown in ARGB hex.

Accessing Colors

Use MiuixTheme.colorScheme.<name> in composables.
The colors shown below apply to non-Monet mode.

Colors

Name	Role	Light	Dark
`primary`	Primary color	`#FF3482FF`	`#FF277AF7`
`onPrimary`	Text on primary	`#FFFFFFFF`	`#FFFFFFFF`
`primaryVariant`	Primary variant	`#FF3482FF`	`#FF0073DD`
`onPrimaryVariant`	Text on primary variant	`#FFAECDFF`	`#FF99C7F1`
`error`	Error color	`#FFE94634`	`#FFF12522`
`onError`	Text on error	`#FFFFFFFF`	`#FF690005`
`errorContainer`	Error container	`#FFFDF6F4`	`#FF2E0603`
`onErrorContainer`	Text on error container	`#FF410002`	`#FFFFDAD6`
`disabledPrimary`	Disabled primary (switch/btn/slider)	`#FFC2D9FF`	`#FF253E64`
`disabledOnPrimary`	Text on disabled primary	`#FFF3F8FF`	`#FF677993`
`disabledPrimaryButton`	Disabled primary for button	`#FFC2D9FF`	`#FF253E64`
`disabledOnPrimaryButton`	Text on disabled primary button	`#FFFFFFFF`	`#FF677893`
`disabledPrimarySlider`	Disabled primary for slider	`#FFB8CFF5`	`#FF44587C`
`primaryContainer`	Primary container	`#FF5D9BFF`	`#FF338FE4`
`onPrimaryContainer`	Text on primary container	`#FFFFFFFF`	`#FFFFFFFF`
`secondary`	Secondary color	`#FFE6E6E6`	`#FF505050`
`onSecondary`	Text on secondary	`#FFFFFFFF`	`#FFFFFFFF`
`secondaryVariant`	Secondary variant	`#FFF0F0F0`	`#FF434343`
`onSecondaryVariant`	Text on secondary variant	`#FF303030`	`#FFD9D9D9`
`disabledSecondary`	Disabled secondary	`#FFF0F0F0`	`#FF3F3F3F`
`disabledOnSecondary`	Text on disabled secondary	`#FFFCFCFC`	`#FF797979`
`disabledSecondaryVariant`	Disabled secondary variant	`#FFF2F2F2`	`#FF404040`
`disabledOnSecondaryVariant`	Text on disabled secondary variant	`#FFB2B2B2`	`#FF707170`
`secondaryContainer`	Secondary container	`#FFF0F0F0`	`#FF434343`
`onSecondaryContainer`	Text on secondary container	`#FFA9A9A9`	`#FF7C7C7C`
`secondaryContainerVariant`	Secondary container variant	`#FFF0F0F0`	`#FF4F4F4F`
`onSecondaryContainerVariant`	Text on secondary container variant	`#FFA8A8A8`	`#FF959595`
`tertiaryContainer`	Tertiary container	`#FFEAF2FF`	`#FF2B3B54`
`onTertiaryContainer`	Text on tertiary container	`#FF3482FF`	`#FF4788FF`
`tertiaryContainerVariant`	Tertiary container variant	`#FFEAF2FF`	`#FF505050`
`background`	App background	`#FFFFFFFF`	`#FF242424`
`onBackground`	Text on background	`#FF000000`	`#E6FFFFFF`
`onBackgroundVariant`	Variant text on background	`#FF8C93B0`	`#FF787E96`
`surface`	Surface	`#FFF7F7F7`	`#FF000000`
`onSurface`	Text on surface	`#FF000000`	`#FFF2F2F2`
`surfaceVariant`	Surface variant	`#FFFFFFFF`	`#FF242424`
`onSurfaceSecondary`	Secondary text on surface	`#CC000000`	`#CCFFFFFF`
`onSurfaceVariantSummary`	Summary text on surface variant	`#99000000`	`#80FFFFFF`
`onSurfaceVariantActions`	Action text on surface variant	`#66000000`	`#66FFFFFF`
`disabledOnSurface`	Text on disabled surface	`#FFB2B2B2`	`#FF666666`
`surfaceContainer`	Surface container	`#FFFFFFFF`	`#FF242424`
`onSurfaceContainer`	Text on surface container	`#FF000000`	`#E6FFFFFF`
`onSurfaceContainerVariant`	Variant text on surface container	`#FF959595`	`#FF737373`
`surfaceContainerHigh`	High surface container	`#FFE8E8E8`	`#FF242424`
`onSurfaceContainerHigh`	Text on high surface container	`#FFA2A2A2`	`#FF666666`
`surfaceContainerHighest`	Highest surface container	`#FFE8E8E8`	`#FF2D2D2D`
`onSurfaceContainerHighest`	Text on highest surface container	`#FF000000`	`#FFE9E9E9`
`outline`	Outlines/borders	`#FFD9D9D9`	`#FF404040`
`dividerLine`	Dividers	`#FFE0E0E0`	`#FF393939`
`windowDimming`	Window dimming (dialogs/dropdowns)	`#4D000000`	`#99000000`
`sliderKeyPoint`	Slider key point	`#4DA3B3CD`	`#4D7A8AA6`
`sliderKeyPointForeground`	Slider key point foreground	`#FF6EB5FF`	`#FF5DAAFF`

Changelog

Last edited 5 days ago

View full history

Color System ​

Accessing Colors ​

Colors ​

Changelog

Color System

Accessing Colors

Colors