Platforms
Material 3
How each role of the Compose ColorScheme is filled for every Gremorie theme, mapped from a semantic token or derived from the theme's primary.
Jetpack Compose themes an app through a ColorScheme with 48 roles.
Gremorie fills all of them for every theme and mode, in two ways. The choice
for each role lives in packages/tokens/tokens/platform/m3/roles.json.
-
Mapped roles take a semantic token directly, so the brand colors are exact. Twelve roles work this way:
Role Semantic token primary,onPrimary--primary,--primary-foregroundsecondaryContainer,onSecondaryContainer--secondary,--secondary-foregroundbackground,onBackground--background,--foregroundsurface,onSurface--background,--foregroundsurfaceVariant--mutedsurfaceTint--primaryerror,onError--destructive,--destructive-foreground -
Derived roles, the other 36, come from Material Color Utilities: a
SchemeContentseeded with the theme's primary, so they are derived from its hue and chroma. The container roles and the derived secondary and tertiary accents sit at the Material 3 baseline tones. -
The surface ladder (
surfaceDim,surfaceBrightandsurfaceContainerLowesttosurfaceContainerHighest) is derived from the theme background instead of the primary: a neutral palette with the background's hue and chroma, read at the background tone plus the Material 3 baseline spacing. In light,surfaceContainerLowestis lighter thansurfaceand the other containers step darker; in dark,surfaceContainerLowestis darker and the others step lighter.surfaceitself stays equal to--background.
A few derived roles have a semantic token with a similar name that does not mean the same thing:
- The shadcn
secondaryis a low-emphasis tinted fill, which is what Material 3 calls a container. It maps tosecondaryContainer, and the M3secondaryis derived. accentis a hover and selection surface with no Material 3 peer, so the whole tertiary family is derived.outlineis derived because--borderis decorative and stays under 3:1;onSurfaceVariantis derived to match the derived surface containers it sits on.
Every content role is checked at 4.5:1 on the role it sits on (onPrimary on
primary, onSurface on each surface container, and so on), and outline and
inversePrimary at 3:1. The pairs that inherit a known exception from the
semantic layer are listed in packages/tokens/contrast-deviations.json; the
Purple theme has none.
The tables below are generated from @gremorie/tokens/tokens.json.
Purple
| Light | Dark | Role | Source | OKLCH (Light) | Hex (Light) | Hex (Dark) |
|---|---|---|---|---|---|---|
| primary | --primary | oklch(0.5379 0.2912 295.26) | #850aff | #dbb8ff | ||
| onPrimary | --primary-foreground | oklch(0.9764 0.0145 308.3) | #faf5ff | #0b0618 | ||
| primaryContainer | derived | oklch(0.918817 0.050266 307.252697) | #eddcff | #563976 | ||
| onPrimaryContainer | derived | oklch(0.242037 0.13291 295.007634) | #280056 | #efdbff | ||
| inversePrimary | derived | oklch(0.837154 0.099317 303.547955) | #d7baff | #6f5190 | ||
| secondary | derived | oklch(0.501249 0.166516 299.347405) | #7346b3 | #d1c0df | ||
| onSecondary | derived | oklch(1 0 0) | #ffffff | #372b44 | ||
| secondaryContainer | --secondary | oklch(0.8983 0.0444 307.91) | #e5d6f5 | #33273f | ||
| onSecondaryContainer | --secondary-foreground | oklch(0.1783 0.0597 291.44) | #120a29 | #ded6f5 | ||
| tertiary | derived | oklch(0.512808 0.223899 338.908069) | #b00090 | #ffb0ca | ||
| onTertiary | derived | oklch(1 0 0) | #ffffff | #531e33 | ||
| tertiaryContainer | derived | oklch(0.920997 0.051008 344.51526) | #ffd8ed | #6e344a | ||
| onTertiaryContainer | derived | oklch(0.238163 0.103674 339.566844) | #3b002e | #ffd9e3 | ||
| background | --background | oklch(0.9491 0.0278 298.05) | #f0ebff | #0e0c12 | ||
| onBackground | --foreground | oklch(0.3035 0.1296 288.37) | #301b6a | #ded6f5 | ||
| surface | --background | oklch(0.9491 0.0278 298.05) | #f0ebff | #0e0c12 | ||
| onSurface | --foreground | oklch(0.3035 0.1296 288.37) | #301b6a | #ded6f5 | ||
| surfaceVariant | --muted | oklch(0.9357 0.0251 298.1) | #ebe7f9 | #17141f | ||
| onSurfaceVariant | derived | oklch(0.399364 0.03344 306.392056) | #4c4356 | #cdc3d0 | ||
| surfaceTint | --primary | oklch(0.5379 0.2912 295.26) | #850aff | #dbb8ff | ||
| inverseSurface | derived | oklch(0.312931 0.024261 305.940122) | #342e3b | #e7e0e7 | ||
| inverseOnSurface | derived | oklch(0.959636 0.025333 313.963348) | #f8edfe | #322f34 | ||
| error | --destructive | oklch(0.577 0.245 27.325) | #e7000b | #ff6467 | ||
| onError | --destructive-foreground | oklch(0.985 0 0) | #fafafa | #0a0a0a | ||
| errorContainer | derived | oklch(0.918251 0.041771 25.225864) | #ffdad6 | #93000a | ||
| onErrorContainer | derived | oklch(0.236025 0.096241 27.190957) | #410002 | #ffdad6 | ||
| outline | derived | oklch(0.571847 0.033867 306.795209) | #7d7388 | #968e9a | ||
| outlineVariant | derived | oklch(0.830928 0.034212 308.902779) | #cec2d9 | #4a454f | ||
| scrim | derived | oklch(0 0 0) | #000000 | #000000 | ||
| surfaceBright | derived | oklch(0.9491 0.0278 298.05) | #f0ebff | #36333a | ||
| surfaceContainer | derived | oklch(0.915478 0.025943 295.533682) | #e4e0f3 | #1c1a20 | ||
| surfaceContainerHigh | derived | oklch(0.898297 0.027577 297.278399) | #dfdaee | #26242a | ||
| surfaceContainerHighest | derived | oklch(0.879931 0.027721 297.263997) | #d9d4e8 | #312e35 | ||
| surfaceContainerLow | derived | oklch(0.931729 0.027323 297.302967) | #eae5f9 | #18161c | ||
| surfaceContainerLowest | derived | oklch(0.966048 0.019282 302.21124) | #f6f1ff | #07050a | ||
| surfaceDim | derived | oklch(0.854974 0.026572 297.86449) | #d1ccdf | #0e0c12 | ||
| primaryFixed | derived | oklch(0.918817 0.050266 307.252697) | #eddcff | #efdbff | ||
| primaryFixedDim | derived | oklch(0.837154 0.099317 303.547955) | #d7baff | #dbb8ff | ||
| onPrimaryFixed | derived | oklch(0.242037 0.13291 295.007634) | #280056 | #290948 | ||
| onPrimaryFixedVariant | derived | oklch(0.429082 0.235137 295.362617) | #6100be | #563976 | ||
| secondaryFixed | derived | oklch(0.918817 0.050266 307.252697) | #eddcff | #eedcfc | ||
| secondaryFixedDim | derived | oklch(0.837154 0.099317 303.547955) | #d7baff | #d1c0df | ||
| onSecondaryFixed | derived | oklch(0.242037 0.13291 295.007634) | #280056 | #22172e | ||
| onSecondaryFixedVariant | derived | oklch(0.416835 0.167464 298.009927) | #5a2c99 | #4e425b | ||
| tertiaryFixed | derived | oklch(0.920997 0.051008 344.51526) | #ffd8ed | #ffd9e3 | ||
| tertiaryFixedDim | derived | oklch(0.841485 0.114689 342.009055) | #ffade0 | #ffb0ca | ||
| onTertiaryFixed | derived | oklch(0.238163 0.103674 339.566844) | #3b002e | #38081e | ||
| onTertiaryFixedVariant | derived | oklch(0.421699 0.183772 339.322797) | #87006d | #6e344a |
Default
| Light | Dark | Role | Source | OKLCH (Light) | Hex (Light) | Hex (Dark) |
|---|---|---|---|---|---|---|
| primary | --primary | oklch(0.205 0 0) | #171717 | #f5f5f5 | ||
| onPrimary | --primary-foreground | oklch(0.985 0 0) | #fafafa | #171717 | ||
| primaryContainer | derived | oklch(0.914845 0.003543 39.482183) | #e5e2e1 | #454747 | ||
| onPrimaryContainer | derived | oklch(0.223244 0.00155 17.272778) | #1c1b1b | #e2e2e2 | ||
| inversePrimary | derived | oklch(0.827867 0.002634 48.711561) | #c8c6c5 | #5d5f5f | ||
| secondary | derived | oklch(0.482844 0.001274 17.201666) | #5f5e5e | #c8c6c6 | ||
| onSecondary | derived | oklch(1 0 0) | #ffffff | #303030 | ||
| secondaryContainer | --secondary | oklch(0.97 0 0) | #f5f5f5 | #262626 | ||
| onSecondaryContainer | --secondary-foreground | oklch(0.205 0 0) | #171717 | #fafafa | ||
| tertiary | derived | oklch(0.483765 0.002552 17.245145) | #605e5e | #c9c5c8 | ||
| onTertiary | derived | oklch(1 0 0) | #ffffff | #313032 | ||
| tertiaryContainer | derived | oklch(0.913661 0.005446 17.25647) | #e6e1e1 | #484649 | ||
| onTertiaryContainer | derived | oklch(0.223244 0.00155 17.272778) | #1c1b1b | #e6e1e4 | ||
| background | --background | oklch(0.985 0 0) | #fafafa | #0a0a0a | ||
| onBackground | --foreground | oklch(0.145 0 0) | #0a0a0a | #fafafa | ||
| surface | --background | oklch(0.985 0 0) | #fafafa | #0a0a0a | ||
| onSurface | --foreground | oklch(0.145 0 0) | #0a0a0a | #fafafa | ||
| surfaceVariant | --muted | oklch(0.97 0 0) | #f5f5f5 | #262626 | ||
| onSurfaceVariant | derived | oklch(0.395473 0.004326 219.590283) | #444748 | #c4c7c8 | ||
| surfaceTint | --primary | oklch(0.205 0 0) | #171717 | #f5f5f5 | ||
| inverseSurface | derived | oklch(0.310209 0.001425 17.233892) | #313030 | #e5e2e1 | ||
| inverseOnSurface | derived | oklch(0.957947 0.004518 34.309063) | #f4f0ef | #313030 | ||
| error | --destructive | oklch(0.577 0.245 27.325) | #e7000b | #ff6467 | ||
| onError | --destructive-foreground | oklch(0.985 0 0) | #fafafa | #fafafa | ||
| errorContainer | derived | oklch(0.918251 0.041771 25.225864) | #ffdad6 | #93000a | ||
| onErrorContainer | derived | oklch(0.236025 0.096241 27.190957) | #410002 | #ffdad6 | ||
| outline | derived | oklch(0.569252 0.004845 197.020365) | #747878 | #8e9192 | ||
| outlineVariant | derived | oklch(0.827316 0.003323 197.092973) | #c4c7c7 | #444748 | ||
| scrim | derived | oklch(0 0 0) | #000000 | #000000 | ||
| surfaceBright | derived | oklch(0.985 0 0) | #fafafa | #323232 | ||
| surfaceContainer | derived | oklch(0.951366 0.001072 197.139983) | #eeefef | #191919 | ||
| surfaceContainerHigh | derived | oklch(0.934025 0 0) | #e9e9e9 | #232323 | ||
| surfaceContainerHighest | derived | oklch(0.915831 0 0) | #e3e3e3 | #2e2d2d | ||
| surfaceContainerLow | derived | oklch(0.967153 0 0) | #f4f4f4 | #151515 | ||
| surfaceContainerLowest | derived | oklch(1 0 0) | #ffffff | #030303 | ||
| surfaceDim | derived | oklch(0.890654 0.00109 197.138404) | #dadbdb | #0a0a0a | ||
| primaryFixed | derived | oklch(0.914845 0.003543 39.482183) | #e5e2e1 | #e2e2e2 | ||
| primaryFixedDim | derived | oklch(0.827867 0.002634 48.711561) | #c8c6c5 | #c6c6c7 | ||
| onPrimaryFixed | derived | oklch(0.223244 0.00155 17.272778) | #1c1b1b | #1a1c1c | ||
| onPrimaryFixedVariant | derived | oklch(0.397579 0.001653 106.474567) | #474746 | #454747 | ||
| secondaryFixed | derived | oklch(0.914845 0.003543 39.482183) | #e5e2e1 | #e4e2e2 | ||
| secondaryFixedDim | derived | oklch(0.828671 0.003633 39.478916) | #c9c6c5 | #c8c6c6 | ||
| onSecondaryFixed | derived | oklch(0.223244 0.00155 17.272778) | #1c1b1b | #1b1c1c | ||
| onSecondaryFixedVariant | derived | oklch(0.395139 0.00134 17.214064) | #474646 | #474747 | ||
| tertiaryFixed | derived | oklch(0.913661 0.005446 17.25647) | #e6e1e1 | #e6e1e4 | ||
| tertiaryFixedDim | derived | oklch(0.82746 0.005586 17.269561) | #cac5c5 | #c9c5c8 | ||
| onTertiaryFixed | derived | oklch(0.223244 0.00155 17.272778) | #1c1b1b | #1c1b1d | ||
| onTertiaryFixedVariant | derived | oklch(0.396111 0.002686 17.270073) | #484646 | #484649 |
Claude
| Light | Dark | Role | Source | OKLCH (Light) | Hex (Light) | Hex (Dark) |
|---|---|---|---|---|---|---|
| primary | --primary | oklch(0.672 0.131 38.76) | #d97757 | #ec9272 | ||
| onPrimary | --primary-foreground | oklch(0.985 0 0) | #fafafa | #0a0a0a | ||
| primaryContainer | derived | oklch(0.918583 0.042982 37.672707) | #ffdbd0 | #75331a | ||
| onPrimaryContainer | derived | oklch(0.231367 0.076054 37.810753) | #390b00 | #ffdbcf | ||
| inversePrimary | derived | oklch(0.837142 0.092554 37.986399) | #ffb59e | #924a2f | ||
| secondary | derived | oklch(0.488529 0.064655 38.025927) | #805345 | #eebbaa | ||
| onSecondary | derived | oklch(1 0 0) | #ffffff | #48281d | ||
| secondaryContainer | --secondary | oklch(0.95 0.012 80) | #f3eee6 | #2e2823 | ||
| onSecondaryContainer | --secondary-foreground | oklch(0.365 0.067 34) | #5d3026 | #fafafa | ||
| tertiary | derived | oklch(0.480325 0.101731 104.634163) | #676000 | #d2c969 | ||
| onTertiary | derived | oklch(1 0 0) | #ffffff | #353100 | ||
| tertiaryContainer | derived | oklch(0.910597 0.13976 103.954983) | #f1e670 | #4d4800 | ||
| onTertiaryContainer | derived | oklch(0.22281 0.04705 103.993146) | #1f1c00 | #efe682 | ||
| background | --background | oklch(0.965 0.011 92) | #f6f3eb | #1f1e1b | ||
| onBackground | --foreground | oklch(0.145 0 0) | #0a0a0a | #fafafa | ||
| surface | --background | oklch(0.965 0.011 92) | #f6f3eb | #1f1e1b | ||
| onSurface | --foreground | oklch(0.145 0 0) | #0a0a0a | #fafafa | ||
| surfaceVariant | --muted | oklch(0.95 0.012 80) | #f3eee6 | #2e2823 | ||
| onSurfaceVariant | derived | oklch(0.400076 0.026962 39.249696) | #55433d | #dac1ba | ||
| surfaceTint | --primary | oklch(0.672 0.131 38.76) | #d97757 | #ec9272 | ||
| inverseSurface | derived | oklch(0.311156 0.015642 37.341751) | #382e2b | #efdfdb | ||
| inverseOnSurface | derived | oklch(0.95903 0.020763 36.029273) | #ffede8 | #372e2c | ||
| error | --destructive | oklch(0.577 0.245 27.325) | #e7000b | #ff6467 | ||
| onError | --destructive-foreground | oklch(0.985 0 0) | #fafafa | #fafafa | ||
| errorContainer | derived | oklch(0.918251 0.041771 25.225864) | #ffdad6 | #93000a | ||
| onErrorContainer | derived | oklch(0.236025 0.096241 27.190957) | #410002 | #ffdad6 | ||
| outline | derived | oklch(0.571154 0.02929 35.716089) | #88726c | #a28c85 | ||
| outlineVariant | derived | oklch(0.830694 0.031728 37.81226) | #dbc1b9 | #54433d | ||
| scrim | derived | oklch(0 0 0) | #000000 | #000000 | ||
| surfaceBright | derived | oklch(0.965 0.011 92) | #f6f3eb | #474541 | ||
| surfaceContainer | derived | oklch(0.930335 0.010905 95.169565) | #eae8e0 | #2c2a27 | ||
| surfaceContainerHigh | derived | oklch(0.912911 0.011231 89.727688) | #e5e2da | #373532 | ||
| surfaceContainerHighest | derived | oklch(0.894886 0.010012 87.475663) | #dfdcd5 | #42403d | ||
| surfaceContainerLow | derived | oklch(0.946221 0.011133 89.7242) | #f0ede5 | #272623 | ||
| surfaceContainerLowest | derived | oklch(0.982229 0.011032 89.7207) | #fcf9f1 | #1b1a17 | ||
| surfaceDim | derived | oklch(0.869274 0.011087 95.181077) | #d6d4cc | #1f1e1b | ||
| primaryFixed | derived | oklch(0.918583 0.042982 37.672707) | #ffdbd0 | #ffdbcf | ||
| primaryFixedDim | derived | oklch(0.837142 0.092554 37.986399) | #ffb59e | #ffb59b | ||
| onPrimaryFixed | derived | oklch(0.231367 0.076054 37.810753) | #390b00 | #380d00 | ||
| onPrimaryFixedVariant | derived | oklch(0.408133 0.111465 38.647267) | #7a2f15 | #75331a | ||
| secondaryFixed | derived | oklch(0.918583 0.042982 37.672707) | #ffdbd0 | #ffdbcf | ||
| secondaryFixedDim | derived | oklch(0.834924 0.073261 37.644777) | #f4b9a7 | #eebbaa | ||
| onSecondaryFixed | derived | oklch(0.230084 0.055239 38.053054) | #321208 | #2f140a | ||
| onSecondaryFixedVariant | derived | oklch(0.402083 0.062105 38.350658) | #653c2f | #613e32 | ||
| tertiaryFixed | derived | oklch(0.910597 0.13976 103.954983) | #f1e670 | #efe682 | ||
| tertiaryFixedDim | derived | oklch(0.82297 0.135172 103.807005) | #d4c957 | #d2c969 | ||
| onTertiaryFixed | derived | oklch(0.22281 0.04705 103.993146) | #1f1c00 | #1f1c00 | ||
| onTertiaryFixedVariant | derived | oklch(0.39506 0.083475 104.128663) | #4e4800 | #4d4800 |
ChatGPT
| Light | Dark | Role | Source | OKLCH (Light) | Hex (Light) | Hex (Dark) |
|---|---|---|---|---|---|---|
| primary | --primary | oklch(0.508 0.118 165.612) | #007a55 | #00d492 | ||
| onPrimary | --primary-foreground | oklch(0.985 0 0) | #fafafa | #0a0a0a | ||
| primaryContainer | derived | oklch(0.900599 0.112874 162.44155) | #95f6c8 | #005236 | ||
| onPrimaryContainer | derived | oklch(0.219193 0.047239 163.197811) | #002114 | #55feb8 | ||
| inversePrimary | derived | oklch(0.813988 0.111822 162.695146) | #79d9ad | #006c49 | ||
| secondary | derived | oklch(0.477851 0.049966 161.31967) | #436654 | #99d3b3 | ||
| onSecondary | derived | oklch(1 0 0) | #ffffff | #003824 | ||
| secondaryContainer | --secondary | oklch(0.97 0 0) | #f5f5f5 | #262626 | ||
| onSecondaryContainer | --secondary-foreground | oklch(0.205 0 0) | #171717 | #fafafa | ||
| tertiary | derived | oklch(0.491704 0.117544 282.380174) | #5856a1 | #aec6ff | ||
| onTertiary | derived | oklch(1 0 0) | #ffffff | #002e6a | ||
| tertiaryContainer | derived | oklch(0.915848 0.043414 289.815335) | #e2dfff | #234582 | ||
| onTertiaryContainer | derived | oklch(0.238731 0.131379 274.384717) | #130b5b | #d8e2ff | ||
| background | --background | oklch(0.985 0 0) | #fafafa | #212121 | ||
| onBackground | --foreground | oklch(0.145 0 0) | #0a0a0a | #fafafa | ||
| surface | --background | oklch(0.985 0 0) | #fafafa | #212121 | ||
| onSurface | --foreground | oklch(0.145 0 0) | #0a0a0a | #fafafa | ||
| surfaceVariant | --muted | oklch(0.97 0 0) | #f5f5f5 | #262626 | ||
| onSurfaceVariant | derived | oklch(0.393516 0.017395 161.695479) | #3e4943 | #bacabf | ||
| surfaceTint | --primary | oklch(0.508 0.118 165.612) | #007a55 | #00d492 | ||
| inverseSurface | derived | oklch(0.309886 0.0109 156.530197) | #2c322e | #dce5dd | ||
| inverseOnSurface | derived | oklch(0.955692 0.009547 140.516045) | #edf2ec | #2a322d | ||
| error | --destructive | oklch(0.577 0.245 27.325) | #e7000b | #ff6467 | ||
| onError | --destructive-foreground | oklch(0.985 0 0) | #fafafa | #fafafa | ||
| errorContainer | derived | oklch(0.918251 0.041771 25.225864) | #ffdad6 | #93000a | ||
| onErrorContainer | derived | oklch(0.236025 0.096241 27.190957) | #410002 | #ffdad6 | ||
| outline | derived | oklch(0.567009 0.018754 156.575407) | #6e7a72 | #85948a | ||
| outlineVariant | derived | oklch(0.824341 0.017132 156.836586) | #bdc9c1 | #3c4a41 | ||
| scrim | derived | oklch(0 0 0) | #000000 | #000000 | ||
| surfaceBright | derived | oklch(0.985 0 0) | #fafafa | #494848 | ||
| surfaceContainer | derived | oklch(0.951366 0.001072 197.139983) | #eeefef | #2e2e2e | ||
| surfaceContainerHigh | derived | oklch(0.934025 0 0) | #e9e9e9 | #393838 | ||
| surfaceContainerHighest | derived | oklch(0.915831 0 0) | #e3e3e3 | #444444 | ||
| surfaceContainerLow | derived | oklch(0.967153 0 0) | #f4f4f4 | #292929 | ||
| surfaceContainerLowest | derived | oklch(1 0 0) | #ffffff | #1d1d1d | ||
| surfaceDim | derived | oklch(0.890654 0.00109 197.138404) | #dadbdb | #212121 | ||
| primaryFixed | derived | oklch(0.900599 0.112874 162.44155) | #95f6c8 | #55feb8 | ||
| primaryFixedDim | derived | oklch(0.813988 0.111822 162.695146) | #79d9ad | #2ae19e | ||
| onPrimaryFixed | derived | oklch(0.219193 0.047239 163.197811) | #002114 | #002113 | ||
| onPrimaryFixedVariant | derived | oklch(0.384873 0.082671 163.431815) | #005137 | #005236 | ||
| secondaryFixed | derived | oklch(0.906863 0.049594 159.854948) | #c5ebd5 | #b4f0ce | ||
| secondaryFixedDim | derived | oklch(0.821079 0.049862 160.89841) | #a9cfba | #99d3b3 | ||
| onSecondaryFixed | derived | oklch(0.219193 0.047239 163.197811) | #002114 | #002113 | ||
| onSecondaryFixedVariant | derived | oklch(0.3895 0.047838 162.032652) | #2c4d3d | #155038 | ||
| tertiaryFixed | derived | oklch(0.915848 0.043414 289.815335) | #e2dfff | #d8e2ff | ||
| tertiaryFixedDim | derived | oklch(0.832098 0.087745 286.504928) | #c3c0ff | #aec6ff | ||
| onTertiaryFixed | derived | oklch(0.238731 0.131379 274.384717) | #130b5b | #001a42 | ||
| onTertiaryFixedVariant | derived | oklch(0.406437 0.118572 280.96387) | #403e87 | #234582 |
Gemini
| Light | Dark | Role | Source | OKLCH (Light) | Hex (Light) | Hex (Dark) |
|---|---|---|---|---|---|---|
| primary | --primary | oklch(0.55 0.19 258) | #156cdd | #82b0f3 | ||
| onPrimary | --primary-foreground | oklch(0.985 0 0) | #fafafa | #0a0a0a | ||
| primaryContainer | derived | oklch(0.914215 0.041072 270.464128) | #d8e2ff | #074784 | ||
| onPrimaryContainer | derived | oklch(0.226395 0.081607 257.375401) | #001a41 | #d4e3ff | ||
| inversePrimary | derived | oklch(0.8281 0.08509 266.166119) | #adc6ff | #2d5f9d | ||
| secondary | derived | oklch(0.484324 0.075783 264.25105) | #495e8a | #b7c7e5 | ||
| onSecondary | derived | oklch(1 0 0) | #ffffff | #213148 | ||
| secondaryContainer | --secondary | oklch(0.97 0 0) | #f5f5f5 | #262626 | ||
| onSecondaryContainer | --secondary-foreground | oklch(0.205 0 0) | #171717 | #fafafa | ||
| tertiary | derived | oklch(0.505184 0.180034 316.036763) | #8b39a8 | #f0b1f9 | ||
| onTertiary | derived | oklch(1 0 0) | #ffffff | #4c1a58 | ||
| tertiaryContainer | derived | oklch(0.920438 0.065158 322.066096) | #fad7ff | #653270 | ||
| onTertiaryContainer | derived | oklch(0.240935 0.119017 314.466264) | #330045 | #fdd6ff | ||
| background | --background | oklch(0.985 0 0) | #fafafa | #1e1f20 | ||
| onBackground | --foreground | oklch(0.145 0 0) | #0a0a0a | #fafafa | ||
| surface | --background | oklch(0.985 0 0) | #fafafa | #1e1f20 | ||
| onSurface | --foreground | oklch(0.145 0 0) | #0a0a0a | #fafafa | ||
| surfaceVariant | --muted | oklch(0.97 0 0) | #f5f5f5 | #262626 | ||
| onSurfaceVariant | derived | oklch(0.39797 0.021299 267.491413) | #424753 | #c2c6d1 | ||
| surfaceTint | --primary | oklch(0.55 0.19 258) | #156cdd | #82b0f3 | ||
| inverseSurface | derived | oklch(0.31045 0.014582 274.408863) | #2e3038 | #e2e2e8 | ||
| inverseOnSurface | derived | oklch(0.957262 0.0134 281.563495) | #eff0fa | #2e3035 | ||
| error | --destructive | oklch(0.577 0.245 27.325) | #e7000b | #ff6467 | ||
| onError | --destructive-foreground | oklch(0.985 0 0) | #fafafa | #fafafa | ||
| errorContainer | derived | oklch(0.918251 0.041771 25.225864) | #ffdad6 | #93000a | ||
| onErrorContainer | derived | oklch(0.236025 0.096241 27.190957) | #410002 | #ffdad6 | ||
| outline | derived | oklch(0.569829 0.02235 270.022363) | #727785 | #8c919b | ||
| outlineVariant | derived | oklch(0.828337 0.022725 274.683261) | #c2c6d6 | #424750 | ||
| scrim | derived | oklch(0 0 0) | #000000 | #000000 | ||
| surfaceBright | derived | oklch(0.985 0 0) | #fafafa | #454647 | ||
| surfaceContainer | derived | oklch(0.951366 0.001072 197.139983) | #eeefef | #2b2b2c | ||
| surfaceContainerHigh | derived | oklch(0.934025 0 0) | #e9e9e9 | #353637 | ||
| surfaceContainerHighest | derived | oklch(0.915831 0 0) | #e3e3e3 | #414142 | ||
| surfaceContainerLow | derived | oklch(0.967153 0 0) | #f4f4f4 | #262728 | ||
| surfaceContainerLowest | derived | oklch(1 0 0) | #ffffff | #1a1b1c | ||
| surfaceDim | derived | oklch(0.890654 0.00109 197.138404) | #dadbdb | #1e1f20 | ||
| primaryFixed | derived | oklch(0.914215 0.041072 270.464128) | #d8e2ff | #d4e3ff | ||
| primaryFixedDim | derived | oklch(0.8281 0.08509 266.166119) | #adc6ff | #a5c8ff | ||
| onPrimaryFixed | derived | oklch(0.226395 0.081607 257.375401) | #001a41 | #001c3a | ||
| onPrimaryFixedVariant | derived | oklch(0.401166 0.143623 257.210486) | #004493 | #074784 | ||
| secondaryFixed | derived | oklch(0.914215 0.041072 270.464128) | #d8e2ff | #d4e3ff | ||
| secondaryFixedDim | derived | oklch(0.828031 0.074255 266.999431) | #b1c6f8 | #b7c7e5 | ||
| onSecondaryFixed | derived | oklch(0.226395 0.081607 257.375401) | #001a41 | #0a1c32 | ||
| onSecondaryFixedVariant | derived | oklch(0.396887 0.076622 262.430897) | #304670 | #374760 | ||
| tertiaryFixed | derived | oklch(0.920438 0.065158 322.066096) | #fad7ff | #fdd6ff | ||
| tertiaryFixedDim | derived | oklch(0.84063 0.125697 318.867503) | #eeb0ff | #f0b1f9 | ||
| onTertiaryFixed | derived | oklch(0.240935 0.119017 314.466264) | #330045 | #340141 | ||
| onTertiaryFixedVariant | derived | oklch(0.419158 0.180981 315.102389) | #701b8e | #653270 |
Perplexity
| Light | Dark | Role | Source | OKLCH (Light) | Hex (Light) | Hex (Dark) |
|---|---|---|---|---|---|---|
| primary | --primary | oklch(0.553 0.086 208.5) | #21808d | #36b8c5 | ||
| onPrimary | --primary-foreground | oklch(1 0 0) | #ffffff | #0a0a0a | ||
| primaryContainer | derived | oklch(0.906286 0.083468 209.080122) | #9cf0fe | #004f56 | ||
| onPrimaryContainer | derived | oklch(0.219209 0.037888 209.814721) | #001f24 | #88f3ff | ||
| inversePrimary | derived | oklch(0.818426 0.083892 209.236876) | #7fd3e1 | #006971 | ||
| secondary | derived | oklch(0.47883 0.034961 209.312685) | #466368 | #a4ced3 | ||
| onSecondary | derived | oklch(1 0 0) | #ffffff | #06363b | ||
| secondaryContainer | --secondary | oklch(0.97 0 0) | #f5f5f5 | #262626 | ||
| onSecondaryContainer | --secondary-foreground | oklch(0.205 0 0) | #171717 | #fafafa | ||
| tertiary | derived | oklch(0.493089 0.094432 310.380997) | #725189 | #e3b5ff | ||
| onTertiary | derived | oklch(1 0 0) | #ffffff | #461b63 | ||
| tertiaryContainer | derived | oklch(0.920013 0.056153 314.877834) | #f3daff | #5e347b | ||
| onTertiaryContainer | derived | oklch(0.236898 0.097312 307.473776) | #2b0b41 | #f3daff | ||
| background | --background | oklch(0.985 0 0) | #fafafa | #091717 | ||
| onBackground | --foreground | oklch(0.145 0 0) | #0a0a0a | #fafafa | ||
| surface | --background | oklch(0.985 0 0) | #fafafa | #091717 | ||
| onSurface | --foreground | oklch(0.145 0 0) | #0a0a0a | #fafafa | ||
| surfaceVariant | --muted | oklch(0.97 0 0) | #f5f5f5 | #262626 | ||
| onSurfaceVariant | derived | oklch(0.395977 0.014303 203.291696) | #3e494a | #bcc9ca | ||
| surfaceTint | --primary | oklch(0.553 0.086 208.5) | #21808d | #36b8c5 | ||
| inverseSurface | derived | oklch(0.309628 0.005883 214.380314) | #2d3132 | #dee3e4 | ||
| inverseOnSurface | derived | oklch(0.956147 0.003487 219.533711) | #eef1f2 | #2c3132 | ||
| error | --destructive | oklch(0.577 0.245 27.325) | #e7000b | #ff6467 | ||
| onError | --destructive-foreground | oklch(0.985 0 0) | #fafafa | #fafafa | ||
| errorContainer | derived | oklch(0.918251 0.041771 25.225864) | #ffdad6 | #93000a | ||
| onErrorContainer | derived | oklch(0.236025 0.096241 27.190957) | #410002 | #ffdad6 | ||
| outline | derived | oklch(0.567583 0.013524 209.799392) | #6e797b | #869395 | ||
| outlineVariant | derived | oklch(0.825644 0.011361 211.038117) | #bec8ca | #3d494a | ||
| scrim | derived | oklch(0 0 0) | #000000 | #000000 | ||
| surfaceBright | derived | oklch(0.985 0 0) | #fafafa | #2f3d3d | ||
| surfaceContainer | derived | oklch(0.951366 0.001072 197.139983) | #eeefef | #152323 | ||
| surfaceContainerHigh | derived | oklch(0.934025 0 0) | #e9e9e9 | #202e2e | ||
| surfaceContainerHighest | derived | oklch(0.915831 0 0) | #e3e3e3 | #2b3939 | ||
| surfaceContainerLow | derived | oklch(0.967153 0 0) | #f4f4f4 | #111f1f | ||
| surfaceContainerLowest | derived | oklch(1 0 0) | #ffffff | #051212 | ||
| surfaceDim | derived | oklch(0.890654 0.00109 197.138404) | #dadbdb | #091717 | ||
| primaryFixed | derived | oklch(0.906286 0.083468 209.080122) | #9cf0fe | #88f3ff | ||
| primaryFixedDim | derived | oklch(0.818426 0.083892 209.236876) | #7fd3e1 | #5ed7e4 | ||
| onPrimaryFixed | derived | oklch(0.219209 0.037888 209.814721) | #001f24 | #001f23 | ||
| onPrimaryFixedVariant | derived | oklch(0.3911 0.067219 207.940173) | #004f58 | #004f56 | ||
| secondaryFixed | derived | oklch(0.909723 0.034527 210.214633) | #c8e8ee | #bfeaf0 | ||
| secondaryFixedDim | derived | oklch(0.824327 0.034218 210.649573) | #adccd2 | #a4ced3 | ||
| onSecondaryFixed | derived | oklch(0.219209 0.037888 209.814721) | #001f24 | #001f23 | ||
| onSecondaryFixedVariant | derived | oklch(0.392024 0.035679 209.505132) | #2e4b50 | #234d51 | ||
| tertiaryFixed | derived | oklch(0.920013 0.056153 314.877834) | #f3daff | #f3daff | ||
| tertiaryFixedDim | derived | oklch(0.838726 0.097152 312.541738) | #e0b8f8 | #e3b5ff | ||
| onTertiaryFixed | derived | oklch(0.236898 0.097312 307.473776) | #2b0b41 | #2f004c | ||
| onTertiaryFixedVariant | derived | oklch(0.406712 0.095746 309.59226) | #593970 | #5e347b |
Mistral
| Light | Dark | Role | Source | OKLCH (Light) | Hex (Light) | Hex (Dark) |
|---|---|---|---|---|---|---|
| primary | --primary | oklch(0.646 0.222 41.116) | #f54900 | #ff8904 | ||
| onPrimary | --primary-foreground | oklch(0.145 0 0) | #0a0a0a | #0a0a0a | ||
| primaryContainer | derived | oklch(0.918583 0.042982 37.672707) | #ffdbd0 | #6f3800 | ||
| onPrimaryContainer | derived | oklch(0.23222 0.078227 36.717896) | #3a0a00 | #ffdcc4 | ||
| inversePrimary | derived | oklch(0.837357 0.092119 37.241152) | #ffb59f | #924c00 | ||
| secondary | derived | oklch(0.498868 0.141611 38.050192) | #a33e1c | #feb781 | ||
| onSecondary | derived | oklch(1 0 0) | #ffffff | #4e2600 | ||
| secondaryContainer | --secondary | oklch(0.97 0 0) | #f5f5f5 | #262626 | ||
| onSecondaryContainer | --secondary-foreground | oklch(0.205 0 0) | #171717 | #fafafa | ||
| tertiary | derived | oklch(0.482838 0.098672 90.041628) | #745b00 | #c7ce30 | ||
| onTertiary | derived | oklch(1 0 0) | #ffffff | #303300 | ||
| tertiaryContainer | derived | oklch(0.914206 0.110883 90.280866) | #ffe08a | #474a00 | ||
| onTertiaryContainer | derived | oklch(0.223835 0.04574 89.071755) | #241a00 | #e3eb4c | ||
| background | --background | oklch(0.985 0 0) | #fafafa | #0a0a0a | ||
| onBackground | --foreground | oklch(0.145 0 0) | #0a0a0a | #fafafa | ||
| surface | --background | oklch(0.985 0 0) | #fafafa | #0a0a0a | ||
| onSurface | --foreground | oklch(0.145 0 0) | #0a0a0a | #fafafa | ||
| surfaceVariant | --muted | oklch(0.97 0 0) | #f5f5f5 | #262626 | ||
| onSurfaceVariant | derived | oklch(0.400537 0.041694 36.580814) | #5c4038 | #ddc1ae | ||
| surfaceTint | --primary | oklch(0.646 0.222 41.116) | #f54900 | #ff8904 | ||
| inverseSurface | derived | oklch(0.313603 0.030326 38.250642) | #3f2c26 | #f3dfd2 | ||
| inverseOnSurface | derived | oklch(0.95903 0.020763 36.029273) | #ffede8 | #3a2e25 | ||
| error | --destructive | oklch(0.577 0.245 27.325) | #e7000b | #ff6467 | ||
| onError | --destructive-foreground | oklch(0.985 0 0) | #fafafa | #fafafa | ||
| errorContainer | derived | oklch(0.918251 0.041771 25.225864) | #ffdad6 | #93000a | ||
| onErrorContainer | derived | oklch(0.236025 0.096241 27.190957) | #410002 | #ffdad6 | ||
| outline | derived | oklch(0.574847 0.04481 37.520193) | #917066 | #a58c7b | ||
| outlineVariant | derived | oklch(0.832268 0.047992 37.788439) | #e5beb2 | #564335 | ||
| scrim | derived | oklch(0 0 0) | #000000 | #000000 | ||
| surfaceBright | derived | oklch(0.985 0 0) | #fafafa | #323232 | ||
| surfaceContainer | derived | oklch(0.951366 0.001072 197.139983) | #eeefef | #191919 | ||
| surfaceContainerHigh | derived | oklch(0.934025 0 0) | #e9e9e9 | #232323 | ||
| surfaceContainerHighest | derived | oklch(0.915831 0 0) | #e3e3e3 | #2e2d2d | ||
| surfaceContainerLow | derived | oklch(0.967153 0 0) | #f4f4f4 | #151515 | ||
| surfaceContainerLowest | derived | oklch(1 0 0) | #ffffff | #030303 | ||
| surfaceDim | derived | oklch(0.890654 0.00109 197.138404) | #dadbdb | #0a0a0a | ||
| primaryFixed | derived | oklch(0.918583 0.042982 37.672707) | #ffdbd0 | #ffdcc4 | ||
| primaryFixedDim | derived | oklch(0.837357 0.092119 37.241152) | #ffb59f | #ffb780 | ||
| onPrimaryFixed | derived | oklch(0.23222 0.078227 36.717896) | #3a0a00 | #2f1400 | ||
| onPrimaryFixedVariant | derived | oklch(0.412062 0.137627 37.094978) | #852400 | #6f3800 | ||
| secondaryFixed | derived | oklch(0.918583 0.042982 37.672707) | #ffdbd0 | #ffdcc4 | ||
| secondaryFixedDim | derived | oklch(0.837357 0.092119 37.241152) | #ffb59f | #feb781 | ||
| onSecondaryFixed | derived | oklch(0.23222 0.078227 36.717896) | #3a0a00 | #2f1400 | ||
| onSecondaryFixedVariant | derived | oklch(0.412138 0.132135 37.471842) | #832705 | #6b3b0f | ||
| tertiaryFixed | derived | oklch(0.914206 0.110883 90.280866) | #ffe08a | #e3eb4c | ||
| tertiaryFixedDim | derived | oklch(0.827789 0.141924 90.237985) | #eac24a | #c7ce30 | ||
| onTertiaryFixed | derived | oklch(0.223835 0.04574 89.071755) | #241a00 | #1c1d00 | ||
| onTertiaryFixedVariant | derived | oklch(0.396788 0.081082 89.56521) | #584400 | #474a00 |