Skip to main content
Gremorie
Platforms

Material 3

Como cada papel do ColorScheme do Compose é preenchido em cada tema do Gremorie, mapeado de um token semântico ou derivado do primary do tema.

O Jetpack Compose aplica o tema por um ColorScheme com 48 papéis. O Gremorie preenche todos, em cada tema e modo, de dois jeitos. A escolha de cada papel fica em packages/tokens/tokens/platform/m3/roles.json.

  • Papéis mapeados usam um token semântico direto, então as cores da marca saem exatas. São doze:

    PapelToken semântico
    primary, onPrimary--primary, --primary-foreground
    secondaryContainer, onSecondaryContainer--secondary, --secondary-foreground
    background, onBackground--background, --foreground
    surface, onSurface--background, --foreground
    surfaceVariant--muted
    surfaceTint--primary
    error, onError--destructive, --destructive-foreground

  • Papéis derivados, os outros 36, saem do Material Color Utilities: um SchemeContent semeado com o primary do tema, e por isso derivam da matiz e do croma dele. Os papéis de container e os acentos secondary e tertiary derivados ficam nos tons de referência do Material 3.

  • A escada de superfícies (surfaceDim, surfaceBright e surfaceContainerLowest a surfaceContainerHighest) deriva do background do tema, não do primary: uma paleta neutra com a matiz e o croma do background, lida no tom do background mais o espaçamento de referência do Material 3. No claro, o surfaceContainerLowest é mais claro que o surface e os outros containers descem em direção ao escuro; no escuro, o surfaceContainerLowest é mais escuro e os outros sobem em direção ao claro. O surface continua igual ao --background.

Alguns papéis derivados têm um token semântico de nome parecido que não quer dizer a mesma coisa:

  • O secondary do shadcn é um preenchimento tingido de baixa ênfase, o que o Material 3 chama de container. Ele vai para secondaryContainer, e o secondary do M3 é derivado.
  • O accent é uma superfície de hover e seleção sem par no Material 3, então a família tertiary inteira é derivada.
  • O outline é derivado porque o --border é decorativo e fica abaixo de 3:1; o onSurfaceVariant é derivado para combinar com os surface containers derivados sobre os quais ele fica.

Cada papel de conteúdo é conferido em 4,5:1 sobre o papel em que fica (onPrimary sobre primary, onSurface sobre cada surface container, e assim por diante), e outline e inversePrimary em 3:1. Os pares que herdam uma exceção conhecida da camada semântica estão listados em packages/tokens/contrast-deviations.json; o tema Purple não tem nenhum.

As tabelas abaixo são geradas a partir do @gremorie/tokens/tokens.json.

Purple

ClaroEscuroPapelOrigemOKLCH (Claro)Hex (Claro)Hex (Escuro)
primary--primaryoklch(0.5379 0.2912 295.26)#850aff#dbb8ff
onPrimary--primary-foregroundoklch(0.9764 0.0145 308.3)#faf5ff#0b0618
primaryContainerderivadooklch(0.918817 0.050266 307.252697)#eddcff#563976
onPrimaryContainerderivadooklch(0.242037 0.13291 295.007634)#280056#efdbff
inversePrimaryderivadooklch(0.837154 0.099317 303.547955)#d7baff#6f5190
secondaryderivadooklch(0.501249 0.166516 299.347405)#7346b3#d1c0df
onSecondaryderivadooklch(1 0 0)#ffffff#372b44
secondaryContainer--secondaryoklch(0.8983 0.0444 307.91)#e5d6f5#33273f
onSecondaryContainer--secondary-foregroundoklch(0.1783 0.0597 291.44)#120a29#ded6f5
tertiaryderivadooklch(0.512808 0.223899 338.908069)#b00090#ffb0ca
onTertiaryderivadooklch(1 0 0)#ffffff#531e33
tertiaryContainerderivadooklch(0.920997 0.051008 344.51526)#ffd8ed#6e344a
onTertiaryContainerderivadooklch(0.238163 0.103674 339.566844)#3b002e#ffd9e3
background--backgroundoklch(0.9491 0.0278 298.05)#f0ebff#0e0c12
onBackground--foregroundoklch(0.3035 0.1296 288.37)#301b6a#ded6f5
surface--backgroundoklch(0.9491 0.0278 298.05)#f0ebff#0e0c12
onSurface--foregroundoklch(0.3035 0.1296 288.37)#301b6a#ded6f5
surfaceVariant--mutedoklch(0.9357 0.0251 298.1)#ebe7f9#17141f
onSurfaceVariantderivadooklch(0.399364 0.03344 306.392056)#4c4356#cdc3d0
surfaceTint--primaryoklch(0.5379 0.2912 295.26)#850aff#dbb8ff
inverseSurfacederivadooklch(0.312931 0.024261 305.940122)#342e3b#e7e0e7
inverseOnSurfacederivadooklch(0.959636 0.025333 313.963348)#f8edfe#322f34
error--destructiveoklch(0.577 0.245 27.325)#e7000b#ff6467
onError--destructive-foregroundoklch(0.985 0 0)#fafafa#0a0a0a
errorContainerderivadooklch(0.918251 0.041771 25.225864)#ffdad6#93000a
onErrorContainerderivadooklch(0.236025 0.096241 27.190957)#410002#ffdad6
outlinederivadooklch(0.571847 0.033867 306.795209)#7d7388#968e9a
outlineVariantderivadooklch(0.830928 0.034212 308.902779)#cec2d9#4a454f
scrimderivadooklch(0 0 0)#000000#000000
surfaceBrightderivadooklch(0.9491 0.0278 298.05)#f0ebff#36333a
surfaceContainerderivadooklch(0.915478 0.025943 295.533682)#e4e0f3#1c1a20
surfaceContainerHighderivadooklch(0.898297 0.027577 297.278399)#dfdaee#26242a
surfaceContainerHighestderivadooklch(0.879931 0.027721 297.263997)#d9d4e8#312e35
surfaceContainerLowderivadooklch(0.931729 0.027323 297.302967)#eae5f9#18161c
surfaceContainerLowestderivadooklch(0.966048 0.019282 302.21124)#f6f1ff#07050a
surfaceDimderivadooklch(0.854974 0.026572 297.86449)#d1ccdf#0e0c12
primaryFixedderivadooklch(0.918817 0.050266 307.252697)#eddcff#efdbff
primaryFixedDimderivadooklch(0.837154 0.099317 303.547955)#d7baff#dbb8ff
onPrimaryFixedderivadooklch(0.242037 0.13291 295.007634)#280056#290948
onPrimaryFixedVariantderivadooklch(0.429082 0.235137 295.362617)#6100be#563976
secondaryFixedderivadooklch(0.918817 0.050266 307.252697)#eddcff#eedcfc
secondaryFixedDimderivadooklch(0.837154 0.099317 303.547955)#d7baff#d1c0df
onSecondaryFixedderivadooklch(0.242037 0.13291 295.007634)#280056#22172e
onSecondaryFixedVariantderivadooklch(0.416835 0.167464 298.009927)#5a2c99#4e425b
tertiaryFixedderivadooklch(0.920997 0.051008 344.51526)#ffd8ed#ffd9e3
tertiaryFixedDimderivadooklch(0.841485 0.114689 342.009055)#ffade0#ffb0ca
onTertiaryFixedderivadooklch(0.238163 0.103674 339.566844)#3b002e#38081e
onTertiaryFixedVariantderivadooklch(0.421699 0.183772 339.322797)#87006d#6e344a

Default

ClaroEscuroPapelOrigemOKLCH (Claro)Hex (Claro)Hex (Escuro)
primary--primaryoklch(0.205 0 0)#171717#f5f5f5
onPrimary--primary-foregroundoklch(0.985 0 0)#fafafa#171717
primaryContainerderivadooklch(0.914845 0.003543 39.482183)#e5e2e1#454747
onPrimaryContainerderivadooklch(0.223244 0.00155 17.272778)#1c1b1b#e2e2e2
inversePrimaryderivadooklch(0.827867 0.002634 48.711561)#c8c6c5#5d5f5f
secondaryderivadooklch(0.482844 0.001274 17.201666)#5f5e5e#c8c6c6
onSecondaryderivadooklch(1 0 0)#ffffff#303030
secondaryContainer--secondaryoklch(0.97 0 0)#f5f5f5#262626
onSecondaryContainer--secondary-foregroundoklch(0.205 0 0)#171717#fafafa
tertiaryderivadooklch(0.483765 0.002552 17.245145)#605e5e#c9c5c8
onTertiaryderivadooklch(1 0 0)#ffffff#313032
tertiaryContainerderivadooklch(0.913661 0.005446 17.25647)#e6e1e1#484649
onTertiaryContainerderivadooklch(0.223244 0.00155 17.272778)#1c1b1b#e6e1e4
background--backgroundoklch(0.985 0 0)#fafafa#0a0a0a
onBackground--foregroundoklch(0.145 0 0)#0a0a0a#fafafa
surface--backgroundoklch(0.985 0 0)#fafafa#0a0a0a
onSurface--foregroundoklch(0.145 0 0)#0a0a0a#fafafa
surfaceVariant--mutedoklch(0.97 0 0)#f5f5f5#262626
onSurfaceVariantderivadooklch(0.395473 0.004326 219.590283)#444748#c4c7c8
surfaceTint--primaryoklch(0.205 0 0)#171717#f5f5f5
inverseSurfacederivadooklch(0.310209 0.001425 17.233892)#313030#e5e2e1
inverseOnSurfacederivadooklch(0.957947 0.004518 34.309063)#f4f0ef#313030
error--destructiveoklch(0.577 0.245 27.325)#e7000b#ff6467
onError--destructive-foregroundoklch(0.985 0 0)#fafafa#fafafa
errorContainerderivadooklch(0.918251 0.041771 25.225864)#ffdad6#93000a
onErrorContainerderivadooklch(0.236025 0.096241 27.190957)#410002#ffdad6
outlinederivadooklch(0.569252 0.004845 197.020365)#747878#8e9192
outlineVariantderivadooklch(0.827316 0.003323 197.092973)#c4c7c7#444748
scrimderivadooklch(0 0 0)#000000#000000
surfaceBrightderivadooklch(0.985 0 0)#fafafa#323232
surfaceContainerderivadooklch(0.951366 0.001072 197.139983)#eeefef#191919
surfaceContainerHighderivadooklch(0.934025 0 0)#e9e9e9#232323
surfaceContainerHighestderivadooklch(0.915831 0 0)#e3e3e3#2e2d2d
surfaceContainerLowderivadooklch(0.967153 0 0)#f4f4f4#151515
surfaceContainerLowestderivadooklch(1 0 0)#ffffff#030303
surfaceDimderivadooklch(0.890654 0.00109 197.138404)#dadbdb#0a0a0a
primaryFixedderivadooklch(0.914845 0.003543 39.482183)#e5e2e1#e2e2e2
primaryFixedDimderivadooklch(0.827867 0.002634 48.711561)#c8c6c5#c6c6c7
onPrimaryFixedderivadooklch(0.223244 0.00155 17.272778)#1c1b1b#1a1c1c
onPrimaryFixedVariantderivadooklch(0.397579 0.001653 106.474567)#474746#454747
secondaryFixedderivadooklch(0.914845 0.003543 39.482183)#e5e2e1#e4e2e2
secondaryFixedDimderivadooklch(0.828671 0.003633 39.478916)#c9c6c5#c8c6c6
onSecondaryFixedderivadooklch(0.223244 0.00155 17.272778)#1c1b1b#1b1c1c
onSecondaryFixedVariantderivadooklch(0.395139 0.00134 17.214064)#474646#474747
tertiaryFixedderivadooklch(0.913661 0.005446 17.25647)#e6e1e1#e6e1e4
tertiaryFixedDimderivadooklch(0.82746 0.005586 17.269561)#cac5c5#c9c5c8
onTertiaryFixedderivadooklch(0.223244 0.00155 17.272778)#1c1b1b#1c1b1d
onTertiaryFixedVariantderivadooklch(0.396111 0.002686 17.270073)#484646#484649

Claude

ClaroEscuroPapelOrigemOKLCH (Claro)Hex (Claro)Hex (Escuro)
primary--primaryoklch(0.672 0.131 38.76)#d97757#ec9272
onPrimary--primary-foregroundoklch(0.985 0 0)#fafafa#0a0a0a
primaryContainerderivadooklch(0.918583 0.042982 37.672707)#ffdbd0#75331a
onPrimaryContainerderivadooklch(0.231367 0.076054 37.810753)#390b00#ffdbcf
inversePrimaryderivadooklch(0.837142 0.092554 37.986399)#ffb59e#924a2f
secondaryderivadooklch(0.488529 0.064655 38.025927)#805345#eebbaa
onSecondaryderivadooklch(1 0 0)#ffffff#48281d
secondaryContainer--secondaryoklch(0.95 0.012 80)#f3eee6#2e2823
onSecondaryContainer--secondary-foregroundoklch(0.365 0.067 34)#5d3026#fafafa
tertiaryderivadooklch(0.480325 0.101731 104.634163)#676000#d2c969
onTertiaryderivadooklch(1 0 0)#ffffff#353100
tertiaryContainerderivadooklch(0.910597 0.13976 103.954983)#f1e670#4d4800
onTertiaryContainerderivadooklch(0.22281 0.04705 103.993146)#1f1c00#efe682
background--backgroundoklch(0.965 0.011 92)#f6f3eb#1f1e1b
onBackground--foregroundoklch(0.145 0 0)#0a0a0a#fafafa
surface--backgroundoklch(0.965 0.011 92)#f6f3eb#1f1e1b
onSurface--foregroundoklch(0.145 0 0)#0a0a0a#fafafa
surfaceVariant--mutedoklch(0.95 0.012 80)#f3eee6#2e2823
onSurfaceVariantderivadooklch(0.400076 0.026962 39.249696)#55433d#dac1ba
surfaceTint--primaryoklch(0.672 0.131 38.76)#d97757#ec9272
inverseSurfacederivadooklch(0.311156 0.015642 37.341751)#382e2b#efdfdb
inverseOnSurfacederivadooklch(0.95903 0.020763 36.029273)#ffede8#372e2c
error--destructiveoklch(0.577 0.245 27.325)#e7000b#ff6467
onError--destructive-foregroundoklch(0.985 0 0)#fafafa#fafafa
errorContainerderivadooklch(0.918251 0.041771 25.225864)#ffdad6#93000a
onErrorContainerderivadooklch(0.236025 0.096241 27.190957)#410002#ffdad6
outlinederivadooklch(0.571154 0.02929 35.716089)#88726c#a28c85
outlineVariantderivadooklch(0.830694 0.031728 37.81226)#dbc1b9#54433d
scrimderivadooklch(0 0 0)#000000#000000
surfaceBrightderivadooklch(0.965 0.011 92)#f6f3eb#474541
surfaceContainerderivadooklch(0.930335 0.010905 95.169565)#eae8e0#2c2a27
surfaceContainerHighderivadooklch(0.912911 0.011231 89.727688)#e5e2da#373532
surfaceContainerHighestderivadooklch(0.894886 0.010012 87.475663)#dfdcd5#42403d
surfaceContainerLowderivadooklch(0.946221 0.011133 89.7242)#f0ede5#272623
surfaceContainerLowestderivadooklch(0.982229 0.011032 89.7207)#fcf9f1#1b1a17
surfaceDimderivadooklch(0.869274 0.011087 95.181077)#d6d4cc#1f1e1b
primaryFixedderivadooklch(0.918583 0.042982 37.672707)#ffdbd0#ffdbcf
primaryFixedDimderivadooklch(0.837142 0.092554 37.986399)#ffb59e#ffb59b
onPrimaryFixedderivadooklch(0.231367 0.076054 37.810753)#390b00#380d00
onPrimaryFixedVariantderivadooklch(0.408133 0.111465 38.647267)#7a2f15#75331a
secondaryFixedderivadooklch(0.918583 0.042982 37.672707)#ffdbd0#ffdbcf
secondaryFixedDimderivadooklch(0.834924 0.073261 37.644777)#f4b9a7#eebbaa
onSecondaryFixedderivadooklch(0.230084 0.055239 38.053054)#321208#2f140a
onSecondaryFixedVariantderivadooklch(0.402083 0.062105 38.350658)#653c2f#613e32
tertiaryFixedderivadooklch(0.910597 0.13976 103.954983)#f1e670#efe682
tertiaryFixedDimderivadooklch(0.82297 0.135172 103.807005)#d4c957#d2c969
onTertiaryFixedderivadooklch(0.22281 0.04705 103.993146)#1f1c00#1f1c00
onTertiaryFixedVariantderivadooklch(0.39506 0.083475 104.128663)#4e4800#4d4800

ChatGPT

ClaroEscuroPapelOrigemOKLCH (Claro)Hex (Claro)Hex (Escuro)
primary--primaryoklch(0.508 0.118 165.612)#007a55#00d492
onPrimary--primary-foregroundoklch(0.985 0 0)#fafafa#0a0a0a
primaryContainerderivadooklch(0.900599 0.112874 162.44155)#95f6c8#005236
onPrimaryContainerderivadooklch(0.219193 0.047239 163.197811)#002114#55feb8
inversePrimaryderivadooklch(0.813988 0.111822 162.695146)#79d9ad#006c49
secondaryderivadooklch(0.477851 0.049966 161.31967)#436654#99d3b3
onSecondaryderivadooklch(1 0 0)#ffffff#003824
secondaryContainer--secondaryoklch(0.97 0 0)#f5f5f5#262626
onSecondaryContainer--secondary-foregroundoklch(0.205 0 0)#171717#fafafa
tertiaryderivadooklch(0.491704 0.117544 282.380174)#5856a1#aec6ff
onTertiaryderivadooklch(1 0 0)#ffffff#002e6a
tertiaryContainerderivadooklch(0.915848 0.043414 289.815335)#e2dfff#234582
onTertiaryContainerderivadooklch(0.238731 0.131379 274.384717)#130b5b#d8e2ff
background--backgroundoklch(0.985 0 0)#fafafa#212121
onBackground--foregroundoklch(0.145 0 0)#0a0a0a#fafafa
surface--backgroundoklch(0.985 0 0)#fafafa#212121
onSurface--foregroundoklch(0.145 0 0)#0a0a0a#fafafa
surfaceVariant--mutedoklch(0.97 0 0)#f5f5f5#262626
onSurfaceVariantderivadooklch(0.393516 0.017395 161.695479)#3e4943#bacabf
surfaceTint--primaryoklch(0.508 0.118 165.612)#007a55#00d492
inverseSurfacederivadooklch(0.309886 0.0109 156.530197)#2c322e#dce5dd
inverseOnSurfacederivadooklch(0.955692 0.009547 140.516045)#edf2ec#2a322d
error--destructiveoklch(0.577 0.245 27.325)#e7000b#ff6467
onError--destructive-foregroundoklch(0.985 0 0)#fafafa#fafafa
errorContainerderivadooklch(0.918251 0.041771 25.225864)#ffdad6#93000a
onErrorContainerderivadooklch(0.236025 0.096241 27.190957)#410002#ffdad6
outlinederivadooklch(0.567009 0.018754 156.575407)#6e7a72#85948a
outlineVariantderivadooklch(0.824341 0.017132 156.836586)#bdc9c1#3c4a41
scrimderivadooklch(0 0 0)#000000#000000
surfaceBrightderivadooklch(0.985 0 0)#fafafa#494848
surfaceContainerderivadooklch(0.951366 0.001072 197.139983)#eeefef#2e2e2e
surfaceContainerHighderivadooklch(0.934025 0 0)#e9e9e9#393838
surfaceContainerHighestderivadooklch(0.915831 0 0)#e3e3e3#444444
surfaceContainerLowderivadooklch(0.967153 0 0)#f4f4f4#292929
surfaceContainerLowestderivadooklch(1 0 0)#ffffff#1d1d1d
surfaceDimderivadooklch(0.890654 0.00109 197.138404)#dadbdb#212121
primaryFixedderivadooklch(0.900599 0.112874 162.44155)#95f6c8#55feb8
primaryFixedDimderivadooklch(0.813988 0.111822 162.695146)#79d9ad#2ae19e
onPrimaryFixedderivadooklch(0.219193 0.047239 163.197811)#002114#002113
onPrimaryFixedVariantderivadooklch(0.384873 0.082671 163.431815)#005137#005236
secondaryFixedderivadooklch(0.906863 0.049594 159.854948)#c5ebd5#b4f0ce
secondaryFixedDimderivadooklch(0.821079 0.049862 160.89841)#a9cfba#99d3b3
onSecondaryFixedderivadooklch(0.219193 0.047239 163.197811)#002114#002113
onSecondaryFixedVariantderivadooklch(0.3895 0.047838 162.032652)#2c4d3d#155038
tertiaryFixedderivadooklch(0.915848 0.043414 289.815335)#e2dfff#d8e2ff
tertiaryFixedDimderivadooklch(0.832098 0.087745 286.504928)#c3c0ff#aec6ff
onTertiaryFixedderivadooklch(0.238731 0.131379 274.384717)#130b5b#001a42
onTertiaryFixedVariantderivadooklch(0.406437 0.118572 280.96387)#403e87#234582

Gemini

ClaroEscuroPapelOrigemOKLCH (Claro)Hex (Claro)Hex (Escuro)
primary--primaryoklch(0.55 0.19 258)#156cdd#82b0f3
onPrimary--primary-foregroundoklch(0.985 0 0)#fafafa#0a0a0a
primaryContainerderivadooklch(0.914215 0.041072 270.464128)#d8e2ff#074784
onPrimaryContainerderivadooklch(0.226395 0.081607 257.375401)#001a41#d4e3ff
inversePrimaryderivadooklch(0.8281 0.08509 266.166119)#adc6ff#2d5f9d
secondaryderivadooklch(0.484324 0.075783 264.25105)#495e8a#b7c7e5
onSecondaryderivadooklch(1 0 0)#ffffff#213148
secondaryContainer--secondaryoklch(0.97 0 0)#f5f5f5#262626
onSecondaryContainer--secondary-foregroundoklch(0.205 0 0)#171717#fafafa
tertiaryderivadooklch(0.505184 0.180034 316.036763)#8b39a8#f0b1f9
onTertiaryderivadooklch(1 0 0)#ffffff#4c1a58
tertiaryContainerderivadooklch(0.920438 0.065158 322.066096)#fad7ff#653270
onTertiaryContainerderivadooklch(0.240935 0.119017 314.466264)#330045#fdd6ff
background--backgroundoklch(0.985 0 0)#fafafa#1e1f20
onBackground--foregroundoklch(0.145 0 0)#0a0a0a#fafafa
surface--backgroundoklch(0.985 0 0)#fafafa#1e1f20
onSurface--foregroundoklch(0.145 0 0)#0a0a0a#fafafa
surfaceVariant--mutedoklch(0.97 0 0)#f5f5f5#262626
onSurfaceVariantderivadooklch(0.39797 0.021299 267.491413)#424753#c2c6d1
surfaceTint--primaryoklch(0.55 0.19 258)#156cdd#82b0f3
inverseSurfacederivadooklch(0.31045 0.014582 274.408863)#2e3038#e2e2e8
inverseOnSurfacederivadooklch(0.957262 0.0134 281.563495)#eff0fa#2e3035
error--destructiveoklch(0.577 0.245 27.325)#e7000b#ff6467
onError--destructive-foregroundoklch(0.985 0 0)#fafafa#fafafa
errorContainerderivadooklch(0.918251 0.041771 25.225864)#ffdad6#93000a
onErrorContainerderivadooklch(0.236025 0.096241 27.190957)#410002#ffdad6
outlinederivadooklch(0.569829 0.02235 270.022363)#727785#8c919b
outlineVariantderivadooklch(0.828337 0.022725 274.683261)#c2c6d6#424750
scrimderivadooklch(0 0 0)#000000#000000
surfaceBrightderivadooklch(0.985 0 0)#fafafa#454647
surfaceContainerderivadooklch(0.951366 0.001072 197.139983)#eeefef#2b2b2c
surfaceContainerHighderivadooklch(0.934025 0 0)#e9e9e9#353637
surfaceContainerHighestderivadooklch(0.915831 0 0)#e3e3e3#414142
surfaceContainerLowderivadooklch(0.967153 0 0)#f4f4f4#262728
surfaceContainerLowestderivadooklch(1 0 0)#ffffff#1a1b1c
surfaceDimderivadooklch(0.890654 0.00109 197.138404)#dadbdb#1e1f20
primaryFixedderivadooklch(0.914215 0.041072 270.464128)#d8e2ff#d4e3ff
primaryFixedDimderivadooklch(0.8281 0.08509 266.166119)#adc6ff#a5c8ff
onPrimaryFixedderivadooklch(0.226395 0.081607 257.375401)#001a41#001c3a
onPrimaryFixedVariantderivadooklch(0.401166 0.143623 257.210486)#004493#074784
secondaryFixedderivadooklch(0.914215 0.041072 270.464128)#d8e2ff#d4e3ff
secondaryFixedDimderivadooklch(0.828031 0.074255 266.999431)#b1c6f8#b7c7e5
onSecondaryFixedderivadooklch(0.226395 0.081607 257.375401)#001a41#0a1c32
onSecondaryFixedVariantderivadooklch(0.396887 0.076622 262.430897)#304670#374760
tertiaryFixedderivadooklch(0.920438 0.065158 322.066096)#fad7ff#fdd6ff
tertiaryFixedDimderivadooklch(0.84063 0.125697 318.867503)#eeb0ff#f0b1f9
onTertiaryFixedderivadooklch(0.240935 0.119017 314.466264)#330045#340141
onTertiaryFixedVariantderivadooklch(0.419158 0.180981 315.102389)#701b8e#653270

Perplexity

ClaroEscuroPapelOrigemOKLCH (Claro)Hex (Claro)Hex (Escuro)
primary--primaryoklch(0.553 0.086 208.5)#21808d#36b8c5
onPrimary--primary-foregroundoklch(1 0 0)#ffffff#0a0a0a
primaryContainerderivadooklch(0.906286 0.083468 209.080122)#9cf0fe#004f56
onPrimaryContainerderivadooklch(0.219209 0.037888 209.814721)#001f24#88f3ff
inversePrimaryderivadooklch(0.818426 0.083892 209.236876)#7fd3e1#006971
secondaryderivadooklch(0.47883 0.034961 209.312685)#466368#a4ced3
onSecondaryderivadooklch(1 0 0)#ffffff#06363b
secondaryContainer--secondaryoklch(0.97 0 0)#f5f5f5#262626
onSecondaryContainer--secondary-foregroundoklch(0.205 0 0)#171717#fafafa
tertiaryderivadooklch(0.493089 0.094432 310.380997)#725189#e3b5ff
onTertiaryderivadooklch(1 0 0)#ffffff#461b63
tertiaryContainerderivadooklch(0.920013 0.056153 314.877834)#f3daff#5e347b
onTertiaryContainerderivadooklch(0.236898 0.097312 307.473776)#2b0b41#f3daff
background--backgroundoklch(0.985 0 0)#fafafa#091717
onBackground--foregroundoklch(0.145 0 0)#0a0a0a#fafafa
surface--backgroundoklch(0.985 0 0)#fafafa#091717
onSurface--foregroundoklch(0.145 0 0)#0a0a0a#fafafa
surfaceVariant--mutedoklch(0.97 0 0)#f5f5f5#262626
onSurfaceVariantderivadooklch(0.395977 0.014303 203.291696)#3e494a#bcc9ca
surfaceTint--primaryoklch(0.553 0.086 208.5)#21808d#36b8c5
inverseSurfacederivadooklch(0.309628 0.005883 214.380314)#2d3132#dee3e4
inverseOnSurfacederivadooklch(0.956147 0.003487 219.533711)#eef1f2#2c3132
error--destructiveoklch(0.577 0.245 27.325)#e7000b#ff6467
onError--destructive-foregroundoklch(0.985 0 0)#fafafa#fafafa
errorContainerderivadooklch(0.918251 0.041771 25.225864)#ffdad6#93000a
onErrorContainerderivadooklch(0.236025 0.096241 27.190957)#410002#ffdad6
outlinederivadooklch(0.567583 0.013524 209.799392)#6e797b#869395
outlineVariantderivadooklch(0.825644 0.011361 211.038117)#bec8ca#3d494a
scrimderivadooklch(0 0 0)#000000#000000
surfaceBrightderivadooklch(0.985 0 0)#fafafa#2f3d3d
surfaceContainerderivadooklch(0.951366 0.001072 197.139983)#eeefef#152323
surfaceContainerHighderivadooklch(0.934025 0 0)#e9e9e9#202e2e
surfaceContainerHighestderivadooklch(0.915831 0 0)#e3e3e3#2b3939
surfaceContainerLowderivadooklch(0.967153 0 0)#f4f4f4#111f1f
surfaceContainerLowestderivadooklch(1 0 0)#ffffff#051212
surfaceDimderivadooklch(0.890654 0.00109 197.138404)#dadbdb#091717
primaryFixedderivadooklch(0.906286 0.083468 209.080122)#9cf0fe#88f3ff
primaryFixedDimderivadooklch(0.818426 0.083892 209.236876)#7fd3e1#5ed7e4
onPrimaryFixedderivadooklch(0.219209 0.037888 209.814721)#001f24#001f23
onPrimaryFixedVariantderivadooklch(0.3911 0.067219 207.940173)#004f58#004f56
secondaryFixedderivadooklch(0.909723 0.034527 210.214633)#c8e8ee#bfeaf0
secondaryFixedDimderivadooklch(0.824327 0.034218 210.649573)#adccd2#a4ced3
onSecondaryFixedderivadooklch(0.219209 0.037888 209.814721)#001f24#001f23
onSecondaryFixedVariantderivadooklch(0.392024 0.035679 209.505132)#2e4b50#234d51
tertiaryFixedderivadooklch(0.920013 0.056153 314.877834)#f3daff#f3daff
tertiaryFixedDimderivadooklch(0.838726 0.097152 312.541738)#e0b8f8#e3b5ff
onTertiaryFixedderivadooklch(0.236898 0.097312 307.473776)#2b0b41#2f004c
onTertiaryFixedVariantderivadooklch(0.406712 0.095746 309.59226)#593970#5e347b

Mistral

ClaroEscuroPapelOrigemOKLCH (Claro)Hex (Claro)Hex (Escuro)
primary--primaryoklch(0.646 0.222 41.116)#f54900#ff8904
onPrimary--primary-foregroundoklch(0.145 0 0)#0a0a0a#0a0a0a
primaryContainerderivadooklch(0.918583 0.042982 37.672707)#ffdbd0#6f3800
onPrimaryContainerderivadooklch(0.23222 0.078227 36.717896)#3a0a00#ffdcc4
inversePrimaryderivadooklch(0.837357 0.092119 37.241152)#ffb59f#924c00
secondaryderivadooklch(0.498868 0.141611 38.050192)#a33e1c#feb781
onSecondaryderivadooklch(1 0 0)#ffffff#4e2600
secondaryContainer--secondaryoklch(0.97 0 0)#f5f5f5#262626
onSecondaryContainer--secondary-foregroundoklch(0.205 0 0)#171717#fafafa
tertiaryderivadooklch(0.482838 0.098672 90.041628)#745b00#c7ce30
onTertiaryderivadooklch(1 0 0)#ffffff#303300
tertiaryContainerderivadooklch(0.914206 0.110883 90.280866)#ffe08a#474a00
onTertiaryContainerderivadooklch(0.223835 0.04574 89.071755)#241a00#e3eb4c
background--backgroundoklch(0.985 0 0)#fafafa#0a0a0a
onBackground--foregroundoklch(0.145 0 0)#0a0a0a#fafafa
surface--backgroundoklch(0.985 0 0)#fafafa#0a0a0a
onSurface--foregroundoklch(0.145 0 0)#0a0a0a#fafafa
surfaceVariant--mutedoklch(0.97 0 0)#f5f5f5#262626
onSurfaceVariantderivadooklch(0.400537 0.041694 36.580814)#5c4038#ddc1ae
surfaceTint--primaryoklch(0.646 0.222 41.116)#f54900#ff8904
inverseSurfacederivadooklch(0.313603 0.030326 38.250642)#3f2c26#f3dfd2
inverseOnSurfacederivadooklch(0.95903 0.020763 36.029273)#ffede8#3a2e25
error--destructiveoklch(0.577 0.245 27.325)#e7000b#ff6467
onError--destructive-foregroundoklch(0.985 0 0)#fafafa#fafafa
errorContainerderivadooklch(0.918251 0.041771 25.225864)#ffdad6#93000a
onErrorContainerderivadooklch(0.236025 0.096241 27.190957)#410002#ffdad6
outlinederivadooklch(0.574847 0.04481 37.520193)#917066#a58c7b
outlineVariantderivadooklch(0.832268 0.047992 37.788439)#e5beb2#564335
scrimderivadooklch(0 0 0)#000000#000000
surfaceBrightderivadooklch(0.985 0 0)#fafafa#323232
surfaceContainerderivadooklch(0.951366 0.001072 197.139983)#eeefef#191919
surfaceContainerHighderivadooklch(0.934025 0 0)#e9e9e9#232323
surfaceContainerHighestderivadooklch(0.915831 0 0)#e3e3e3#2e2d2d
surfaceContainerLowderivadooklch(0.967153 0 0)#f4f4f4#151515
surfaceContainerLowestderivadooklch(1 0 0)#ffffff#030303
surfaceDimderivadooklch(0.890654 0.00109 197.138404)#dadbdb#0a0a0a
primaryFixedderivadooklch(0.918583 0.042982 37.672707)#ffdbd0#ffdcc4
primaryFixedDimderivadooklch(0.837357 0.092119 37.241152)#ffb59f#ffb780
onPrimaryFixedderivadooklch(0.23222 0.078227 36.717896)#3a0a00#2f1400
onPrimaryFixedVariantderivadooklch(0.412062 0.137627 37.094978)#852400#6f3800
secondaryFixedderivadooklch(0.918583 0.042982 37.672707)#ffdbd0#ffdcc4
secondaryFixedDimderivadooklch(0.837357 0.092119 37.241152)#ffb59f#feb781
onSecondaryFixedderivadooklch(0.23222 0.078227 36.717896)#3a0a00#2f1400
onSecondaryFixedVariantderivadooklch(0.412138 0.132135 37.471842)#832705#6b3b0f
tertiaryFixedderivadooklch(0.914206 0.110883 90.280866)#ffe08a#e3eb4c
tertiaryFixedDimderivadooklch(0.827789 0.141924 90.237985)#eac24a#c7ce30
onTertiaryFixedderivadooklch(0.223835 0.04574 89.071755)#241a00#1c1d00
onTertiaryFixedVariantderivadooklch(0.396788 0.081082 89.56521)#584400#474a00

Plataformas

Os mesmos tokens do Gremorie como JSON resolvido, TypeScript, Kotlin para Jetpack Compose e Swift para SwiftUI.

On this page

PurpleDefaultClaudeChatGPTGeminiPerplexityMistral