Skip to content
ENPT

Nomes de cores CSS e paleta do Tailwind

O CSS define 148 cores nomeadas (CSS Color Module Level 4), de aliceblue a yellowgreen, que representam 139 valores sRGB diferentes. Cada uma pode ser escrita como palavra-chave, código hex ou rgb(). Esta página lista todas por matiz, junto com os 286 tons da paleta padrão do Tailwind CSS v4.

Todas as cores nomeadas do CSS por matiz

Agrupadas por família de matiz e ordenadas da mais clara para a mais escura. Cada nome leva à página da cor, com todos os formatos, contraste, tons e código.

Paleta padrão do Tailwind CSS v4

Os 26 matizes e 11 tons do Tailwind CSS v4.3, definidos em OKLCH. As amostras mostram a versão em sRGB; abra uma para ver hex, token OKLCH, valor da v3 e contraste.

Paleta padrão do Tailwind CSS v4
Matiz50100200300400500600700800900950
red (vermelho)red-50, #fef2f2red-100, #ffe2e2red-200, #ffc9c9red-300, #ffa2a2red-400, #ff6467red-500, #fb2c36red-600, #e7000bred-700, #c10007red-800, #9f0712red-900, #82181ared-950, #460809
orange (laranja)orange-50, #fff7edorange-100, #ffedd4orange-200, #ffd6a7orange-300, #ffb86aorange-400, #ff8904orange-500, #ff6900orange-600, #f54900orange-700, #ca3500orange-800, #9f2d00orange-900, #7e2a0corange-950, #441306
amber (âmbar)amber-50, #fffbebamber-100, #fef3c6amber-200, #fee685amber-300, #ffd230amber-400, #ffba00amber-500, #fd9a00amber-600, #e17100amber-700, #bb4d00amber-800, #973c00amber-900, #7b3306amber-950, #461901
yellow (amarelo)yellow-50, #fefce8yellow-100, #fef9c2yellow-200, #fff085yellow-300, #ffdf20yellow-400, #fcc800yellow-500, #efb100yellow-600, #d08700yellow-700, #a65f00yellow-800, #894b00yellow-900, #733e0ayellow-950, #432004
lime (lima)lime-50, #f7fee7lime-100, #ecfccalime-200, #d8f999lime-300, #bbf451lime-400, #9ae600lime-500, #7ccf00lime-600, #5ea500lime-700, #497d00lime-800, #3c6300lime-900, #35530elime-950, #192e03
green (verde)green-50, #f0fdf4green-100, #dcfce7green-200, #b9f8cfgreen-300, #7bf1a8green-400, #05df72green-500, #00c950green-600, #00a63egreen-700, #008236green-800, #016630green-900, #0d542bgreen-950, #032e15
emerald (esmeralda)emerald-50, #ecfdf5emerald-100, #d0fae5emerald-200, #a4f4cfemerald-300, #5ee9b5emerald-400, #00d492emerald-500, #00bc7demerald-600, #009966emerald-700, #007a55emerald-800, #006045emerald-900, #004f3bemerald-950, #002c22
teal (verde-azulado)teal-50, #f0fdfateal-100, #cbfbf1teal-200, #96f7e4teal-300, #46ecd5teal-400, #00d5beteal-500, #00bba7teal-600, #009689teal-700, #00786fteal-800, #005f5ateal-900, #0b4f4ateal-950, #022f2e
cyan (ciano)cyan-50, #ecfeffcyan-100, #cefafecyan-200, #a2f4fdcyan-300, #53eafdcyan-400, #00d3f2cyan-500, #00b8dbcyan-600, #0092b8cyan-700, #007595cyan-800, #005f78cyan-900, #104e64cyan-950, #053345
sky (azul-céu)sky-50, #f0f9ffsky-100, #dff2fesky-200, #b8e6fesky-300, #74d4ffsky-400, #00bcffsky-500, #00a6f4sky-600, #0084d1sky-700, #0069a8sky-800, #00598asky-900, #024a70sky-950, #052f4a
blue (azul)blue-50, #eff6ffblue-100, #dbeafeblue-200, #bedbffblue-300, #8ec5ffblue-400, #51a2ffblue-500, #2b7fffblue-600, #155dfcblue-700, #1447e6blue-800, #193cb8blue-900, #1c398eblue-950, #162456
indigo (índigo)indigo-50, #eef2ffindigo-100, #e0e7ffindigo-200, #c6d2ffindigo-300, #a3b3ffindigo-400, #7c86ffindigo-500, #615fffindigo-600, #4f39f6indigo-700, #432dd7indigo-800, #372aacindigo-900, #312c85indigo-950, #1e1a4d
violet (violeta)violet-50, #f5f3ffviolet-100, #ede9feviolet-200, #ddd6ffviolet-300, #c4b4ffviolet-400, #a684ffviolet-500, #8e51ffviolet-600, #7f22feviolet-700, #7008e7violet-800, #5d0ec0violet-900, #4d179aviolet-950, #2f0d68
purple (roxo)purple-50, #faf5ffpurple-100, #f3e8ffpurple-200, #e9d4ffpurple-300, #dab2ffpurple-400, #c27affpurple-500, #ad46ffpurple-600, #9810fapurple-700, #8200dbpurple-800, #6e11b0purple-900, #59168bpurple-950, #3c0366
fuchsia (fúcsia)fuchsia-50, #fdf4fffuchsia-100, #fae8fffuchsia-200, #f6cffffuchsia-300, #f4a8fffuchsia-400, #ed6afffuchsia-500, #e12afbfuchsia-600, #c800defuchsia-700, #a800b7fuchsia-800, #8a0194fuchsia-900, #721378fuchsia-950, #4b004f
pink (rosa)pink-50, #fdf2f8pink-100, #fce7f3pink-200, #fccee8pink-300, #fda5d5pink-400, #fb64b6pink-500, #f6339apink-600, #e60076pink-700, #c6005cpink-800, #a3004cpink-900, #861043pink-950, #510424
rose (rosé)rose-50, #fff1f2rose-100, #ffe4e6rose-200, #ffccd3rose-300, #ffa1adrose-400, #ff637erose-500, #ff2056rose-600, #ec003frose-700, #c70036rose-800, #a50036rose-900, #8b0836rose-950, #4d0218
slate (ardósia)slate-50, #f8fafcslate-100, #f1f5f9slate-200, #e2e8f0slate-300, #cad5e2slate-400, #90a1b9slate-500, #62748eslate-600, #45556cslate-700, #314158slate-800, #1d293dslate-900, #0f172bslate-950, #020618
gray (cinza)gray-50, #f9fafbgray-100, #f3f4f6gray-200, #e5e7ebgray-300, #d1d5dcgray-400, #99a1afgray-500, #6a7282gray-600, #4a5565gray-700, #364153gray-800, #1e2939gray-900, #101828gray-950, #030712
zinc (zinco)zinc-50, #fafafazinc-100, #f4f4f5zinc-200, #e4e4e7zinc-300, #d4d4d8zinc-400, #9f9fa9zinc-500, #71717bzinc-600, #52525czinc-700, #3f3f46zinc-800, #27272azinc-900, #18181bzinc-950, #09090b
neutral (neutro)neutral-50, #fafafaneutral-100, #f5f5f5neutral-200, #e5e5e5neutral-300, #d4d4d4neutral-400, #a1a1a1neutral-500, #737373neutral-600, #525252neutral-700, #404040neutral-800, #262626neutral-900, #171717neutral-950, #0a0a0a
stone (pedra)stone-50, #fafaf9stone-100, #f5f5f4stone-200, #e7e5e4stone-300, #d6d3d1stone-400, #a6a09bstone-500, #79716bstone-600, #57534dstone-700, #44403bstone-800, #292524stone-900, #1c1917stone-950, #0c0a09
mauve (malva)mauve-50, #fafafamauve-100, #f3f1f3mauve-200, #e7e4e7mauve-300, #d7d0d7mauve-400, #a89ea9mauve-500, #79697bmauve-600, #594c5bmauve-700, #463947mauve-800, #2a212cmauve-900, #1d161emauve-950, #0c090c
olive (oliva)olive-50, #fbfbf9olive-100, #f4f4f0olive-200, #e8e8e3olive-300, #d8d8d0olive-400, #abab9colive-500, #7c7c67olive-600, #5b5b4bolive-700, #474739olive-800, #2b2b22olive-900, #1d1d16olive-950, #0c0c09
mist (névoa)mist-50, #f9fbfbmist-100, #f1f3f3mist-200, #e3e7e8mist-300, #d0d6d8mist-400, #9ca8abmist-500, #67787cmist-600, #4b585bmist-700, #394447mist-800, #22292bmist-900, #161b1dmist-950, #090b0c
taupetaupe-50, #fbfaf9taupe-100, #f3f1f1taupe-200, #e8e4e3taupe-300, #d8d2d0taupe-400, #aba09ctaupe-500, #7c6d67taupe-600, #5b4f4btaupe-700, #473c39taupe-800, #2b2422taupe-900, #1d1816taupe-950, #0c0a09

Hex, RGB, HSL e OKLCH explicados

Todos os formatos abaixo descrevem a mesma cor, coral. A diferença é o espaço de cor e o quanto cada número corresponde ao que o olho percebe.

Hex, RGB, HSL e OKLCH explicados
FormatoCoral escrito comoObservações
Hex#ff7f50Três canais sRGB de 8 bits em base 16. Compacto e universal; um quarto par define a transparência (#ff7f5080).
RGBrgb(255 127 80)Os mesmos canais sRGB em decimal, de 0 a 255. Fácil de ler e de animar canal a canal.
HSLhsl(16 100% 66%)Ângulo de matiz, saturação e luminosidade, derivados do sRGB. Prático para ajustes manuais, mas a mesma luminosidade HSL não parece igualmente clara em matizes diferentes.
HWBhwb(16 31% 0%)Matiz mais quanto branco e preto são misturados. Intuitivo para tons claros e escuros; continua preso ao sRGB.
OKLCHoklch(73.5% 0.168 40.2)Luminosidade, croma e matiz perceptuais do modelo OKLab. Mesma L parece igualmente clara, e alcança Display P3 e gamas maiores. O Tailwind v4 define a paleta assim.

As cores nomeadas são sempre sRGB. Já a paleta do Tailwind v4 é definida em OKLCH, e 95 dos 286 tons ficam fora do sRGB: em telas comuns o navegador precisa trazê-los para dentro do sRGB. O hex de cada página de tom é o valor mapeado pelo algoritmo de mapeamento de gama do CSS Color 4.

Perguntas frequentes

Quantas cores nomeadas existem no CSS?
148 palavras-chave, que correspondem a 139 cores diferentes: aqua e cyan, fuchsia e magenta, e as sete com grafia gray/grey são duplicatas. Além delas existem transparent e currentcolor, que não são cores fixas.
Os nomes de cores do CSS diferenciam maiúsculas e minúsculas?
Não. A especificação CSS Color 4 define os nomes como identificadores que não diferenciam maiúsculas de minúsculas em ASCII, então Coral, coral e CORAL são a mesma cor.
Por que darkgray é mais claro que gray?
Porque gray (#808080) veio da paleta do HTML, enquanto darkgray (#a9a9a9) veio da lista do X11, onde gray era #bebebe. A especificação cita esse caso e o de lightpink, que é mais escuro que pink.
Devo usar nomes de cores em produção?
Funcionam em todos os navegadores, mas a própria especificação diz que o uso não é incentivado: os nomes são inconsistentes e cobrem mal o espaço de cores. Em design systems, prefira variáveis CSS com valores hex ou OKLCH.
Qual a diferença entre hex, RGB, HSL e OKLCH?
Hex e RGB descrevem a mesma coisa (intensidade de vermelho, verde e azul). HSL reorganiza isso em matiz, saturação e luminosidade, mas a luminosidade HSL não corresponde à percebida. OKLCH usa luminosidade, croma e matiz perceptualmente uniformes e alcança cores fora do sRGB, como as da paleta do Tailwind v4.

Revisado em por Arielton Oberek.