Skip to content
ENPT

Pôster das cores do Tailwind CSS

Este pôster imprime a paleta padrão completa do Tailwind CSS v4, 26 cores do red ao taupe em 11 tons do 50 ao 950, com cada amostra identificada pelo hex sRGB e pelo valor oklch() exato do theme.css do Tailwind, no tamanho A3 ou A2.

Papel

Cabe em uma página: A3, A2.

Cores do Tailwind CSS

Paleta padrão do Tailwind CSS v4: hex sRGB e o valor oklch() exato

26 cores × 11 tonsRevisado em 2026-09-27

Cores do Tailwind CSS
50100200300400500600700800900950
red#fef2f297.1% 0.013 17.38#ffe2e293.6% 0.032 17.717#ffc9c988.5% 0.062 18.334#ffa2a280.8% 0.114 19.571#ff646770.4% 0.191 22.216#fb2c3663.7% 0.237 25.331#e7000b57.7% 0.245 27.325#c1000750.5% 0.213 27.518#9f071244.4% 0.177 26.899#82181a39.6% 0.141 25.723#46080925.8% 0.092 26.042
orange#fff7ed98% 0.016 73.684#ffedd495.4% 0.038 75.164#ffd6a790.1% 0.076 70.697#ffb86a83.7% 0.128 66.29#ff890475% 0.183 55.934#ff690070.5% 0.213 47.604#f5490064.6% 0.222 41.116#ca350055.3% 0.195 38.402#9f2d0047% 0.157 37.304#7e2a0c40.8% 0.123 38.172#44130626.6% 0.079 36.259
amber#fffbeb98.7% 0.022 95.277#fef3c696.2% 0.059 95.617#fee68592.4% 0.12 95.746#ffd23087.9% 0.169 91.605#ffba0082.8% 0.189 84.429#fd9a0076.9% 0.188 70.08#e1710066.6% 0.179 58.318#bb4d0055.5% 0.163 48.998#973c0047.3% 0.137 46.201#7b330641.4% 0.112 45.904#46190127.9% 0.077 45.635
yellow#fefce898.7% 0.026 102.212#fef9c297.3% 0.071 103.193#fff08594.5% 0.129 101.54#ffdf2090.5% 0.182 98.111#fcc80085.2% 0.199 91.936#efb10079.5% 0.184 86.047#d0870068.1% 0.162 75.834#a65f0055.4% 0.135 66.442#894b0047.6% 0.114 61.907#733e0a42.1% 0.095 57.708#43200428.6% 0.066 53.813
lime#f7fee798.6% 0.031 120.757#ecfcca96.7% 0.067 122.328#d8f99993.8% 0.127 124.321#bbf45189.7% 0.196 126.665#9ae60084.1% 0.238 128.85#7ccf0076.8% 0.233 130.85#5ea50064.8% 0.2 131.684#497d0053.2% 0.157 131.589#3c630045.3% 0.124 130.933#35530e40.5% 0.101 131.063#192e0327.4% 0.072 132.109
green#f0fdf498.2% 0.018 155.826#dcfce796.2% 0.044 156.743#b9f8cf92.5% 0.084 155.995#7bf1a887.1% 0.15 154.449#05df7279.2% 0.209 151.711#00c95072.3% 0.219 149.579#00a63e62.7% 0.194 149.214#00823652.7% 0.154 150.069#01663044.8% 0.119 151.328#0d542b39.3% 0.095 152.535#032e1526.6% 0.065 152.934
emerald#ecfdf597.9% 0.021 166.113#d0fae595% 0.052 163.051#a4f4cf90.5% 0.093 164.15#5ee9b584.5% 0.143 164.978#00d49276.5% 0.177 163.223#00bc7d69.6% 0.17 162.48#00996659.6% 0.145 163.225#007a5550.8% 0.118 165.612#00604543.2% 0.095 166.913#004f3b37.8% 0.077 168.94#002c2226.2% 0.051 172.552
teal#f0fdfa98.4% 0.014 180.72#cbfbf195.3% 0.051 180.801#96f7e491% 0.096 180.426#46ecd585.5% 0.138 181.071#00d5be77.7% 0.152 181.912#00bba770.4% 0.14 182.503#00968960% 0.118 184.704#00786f51.1% 0.096 186.391#005f5a43.7% 0.078 188.216#0b4f4a38.6% 0.063 188.416#022f2e27.7% 0.046 192.524
cyan#ecfeff98.4% 0.019 200.873#cefafe95.6% 0.045 203.388#a2f4fd91.7% 0.08 205.041#53eafd86.5% 0.127 207.078#00d3f278.9% 0.154 211.53#00b8db71.5% 0.143 215.221#0092b860.9% 0.126 221.723#00759552% 0.105 223.128#005f7845% 0.085 224.283#104e6439.8% 0.07 227.392#05334530.2% 0.056 229.695
sky#f0f9ff97.7% 0.013 236.62#dff2fe95.1% 0.026 236.824#b8e6fe90.1% 0.058 230.902#74d4ff82.8% 0.111 230.318#00bcff74.6% 0.16 232.661#00a6f468.5% 0.169 237.323#0084d158.8% 0.158 241.966#0069a850% 0.134 242.749#00598a44.3% 0.11 240.79#024a7039.1% 0.09 240.876#052f4a29.3% 0.066 243.157
blue#eff6ff97% 0.014 254.604#dbeafe93.2% 0.032 255.585#bedbff88.2% 0.059 254.128#8ec5ff80.9% 0.105 251.813#51a2ff70.7% 0.165 254.624#2b7fff62.3% 0.214 259.815#155dfc54.6% 0.245 262.881#1447e648.8% 0.243 264.376#193cb842.4% 0.199 265.638#1c398e37.9% 0.146 265.522#16245628.2% 0.091 267.935
indigo#eef2ff96.2% 0.018 272.314#e0e7ff93% 0.034 272.788#c6d2ff87% 0.065 274.039#a3b3ff78.5% 0.115 274.713#7c86ff67.3% 0.182 276.935#615fff58.5% 0.233 277.117#4f39f651.1% 0.262 276.966#432dd745.7% 0.24 277.023#372aac39.8% 0.195 277.366#312c8535.9% 0.144 278.697#1e1a4d25.7% 0.09 281.288
violet#f5f3ff96.9% 0.016 293.756#ede9fe94.3% 0.029 294.588#ddd6ff89.4% 0.057 293.283#c4b4ff81.1% 0.111 293.571#a684ff70.2% 0.183 293.541#8e51ff60.6% 0.25 292.717#7f22fe54.1% 0.281 293.009#7008e749.1% 0.27 292.581#5d0ec043.2% 0.232 292.759#4d179a38% 0.189 293.745#2f0d6828.3% 0.141 291.089
purple#faf5ff97.7% 0.014 308.299#f3e8ff94.6% 0.033 307.174#e9d4ff90.2% 0.063 306.703#dab2ff82.7% 0.119 306.383#c27aff71.4% 0.203 305.504#ad46ff62.7% 0.265 303.9#9810fa55.8% 0.288 302.321#8200db49.6% 0.265 301.924#6e11b043.8% 0.218 303.724#59168b38.1% 0.176 304.987#3c036629.1% 0.149 302.717
fuchsia#fdf4ff97.7% 0.017 320.058#fae8ff95.2% 0.037 318.852#f6cfff90.3% 0.076 319.62#f4a8ff83.3% 0.145 321.434#ed6aff74% 0.238 322.16#e12afb66.7% 0.295 322.15#c800de59.1% 0.293 322.896#a800b751.8% 0.253 323.949#8a019445.2% 0.211 324.591#72137840.1% 0.17 325.612#4b004f29.3% 0.136 325.661
pink#fdf2f897.1% 0.014 343.198#fce7f394.8% 0.028 342.258#fccee889.9% 0.061 343.231#fda5d582.3% 0.12 346.018#fb64b671.8% 0.202 349.761#f6339a65.6% 0.241 354.308#e6007659.2% 0.249 0.584#c6005c52.5% 0.223 3.958#a3004c45.9% 0.187 3.815#86104340.8% 0.153 2.432#51042428.4% 0.109 3.907
rose#fff1f296.9% 0.015 12.422#ffe4e694.1% 0.03 12.58#ffccd389.2% 0.058 10.001#ffa1ad81% 0.117 11.638#ff637e71.2% 0.194 13.428#ff205664.5% 0.246 16.439#ec003f58.6% 0.253 17.585#c7003651.4% 0.222 16.935#a5003645.5% 0.188 13.697#8b083641% 0.159 10.272#4d021827.1% 0.105 12.094
slate#f8fafc98.4% 0.003 247.858#f1f5f996.8% 0.007 247.896#e2e8f092.9% 0.013 255.508#cad5e286.9% 0.022 252.894#90a1b970.4% 0.04 256.788#62748e55.4% 0.046 257.417#45556c44.6% 0.043 257.281#31415837.2% 0.044 257.287#1d293d27.9% 0.041 260.031#0f172b20.8% 0.042 265.755#02061812.9% 0.042 264.695
gray#f9fafb98.5% 0.002 247.839#f3f4f696.7% 0.003 264.542#e5e7eb92.8% 0.006 264.531#d1d5dc87.2% 0.01 258.338#99a1af70.7% 0.022 261.325#6a728255.1% 0.027 264.364#4a556544.6% 0.03 256.802#36415337.3% 0.034 259.733#1e293927.8% 0.033 256.848#10182821% 0.034 264.665#03071213% 0.028 261.692
zinc#fafafa98.5% 0 none#f4f4f596.7% 0.001 286.375#e4e4e792% 0.004 286.32#d4d4d887.1% 0.006 286.286#9f9fa970.5% 0.015 286.067#71717b55.2% 0.016 285.938#52525c44.2% 0.017 285.786#3f3f4637% 0.013 285.805#27272a27.4% 0.006 286.033#18181b21% 0.006 285.885#09090b14.1% 0.005 285.823
neutral#fafafa98.5% 0 none#f5f5f597% 0 none#e5e5e592.2% 0 none#d4d4d487% 0 none#a1a1a170.8% 0 none#73737355.6% 0 none#52525243.9% 0 none#40404037.1% 0 none#26262626.9% 0 none#17171720.5% 0 none#0a0a0a14.5% 0 none
stone#fafaf998.5% 0.001 106.423#f5f5f497% 0.001 106.424#e7e5e492.3% 0.003 48.717#d6d3d186.9% 0.005 56.366#a6a09b70.9% 0.01 56.259#79716b55.3% 0.013 58.071#57534d44.4% 0.011 73.639#44403b37.4% 0.01 67.558#29252426.8% 0.007 34.298#1c191721.6% 0.006 56.043#0c0a0914.7% 0.004 49.25
mauve#fafafa98.5% 0 none#f3f1f396% 0.003 325.6#e7e4e792.2% 0.005 325.62#d7d0d786.5% 0.012 325.68#a89ea971.1% 0.019 323.02#79697b54.2% 0.034 322.5#594c5b43.5% 0.029 321.78#46394736.4% 0.029 323.89#2a212c26.3% 0.024 320.12#1d161e21.2% 0.019 322.12#0c090c14.5% 0.008 326
olive#fbfbf998.8% 0.003 106.5#f4f4f096.6% 0.005 106.5#e8e8e393% 0.007 106.5#d8d8d088% 0.011 106.6#abab9c73.7% 0.021 106.9#7c7c6758% 0.031 107.3#5b5b4b46.6% 0.025 107.3#47473939.4% 0.023 107.4#2b2b2228.6% 0.016 107.4#1d1d1622.8% 0.013 107.4#0c0c0915.3% 0.006 107.1
mist#f9fbfb98.7% 0.002 197.1#f1f3f396.3% 0.002 197.1#e3e7e892.5% 0.005 214.3#d0d6d887.2% 0.007 219.6#9ca8ab72.3% 0.014 214.4#67787c56% 0.021 213.5#4b585b45% 0.017 213.2#39444737.8% 0.015 216#22292b27.5% 0.011 216.9#161b1d21.8% 0.008 223.9#090b0c14.8% 0.004 228.8
taupe#fbfaf998.6% 0.002 67.8#f3f1f196% 0.002 17.2#e8e4e392.2% 0.005 34.3#d8d2d086.8% 0.007 39.5#aba09c71.4% 0.014 41.2#7c6d6754.7% 0.021 43.1#5b4f4b43.8% 0.017 39.3#473c3936.7% 0.016 35.7#2b242226.8% 0.011 36.5#1d181621.4% 0.009 43.1#0c0a0914.7% 0.004 49.3
oklch() é o valor do tema. O hex é o equivalente sRGB, ajustado à gama (CSS Color 4) quando preciso.www.arielton.com/pt/cheatsheets/tailwind-colors

O que tem no guia

A linha OKLCH é o valor que o Tailwind v4 de fato publica, ou seja, o que o bg-sky-500 mostra numa tela de gama ampla. A linha hex é o equivalente sRGB mais próximo: 95 das 286 amostras ficam fora do sRGB e foram ajustadas com o algoritmo do CSS Color 4, então o hex é o que um PNG, um arquivo de impressão ou uma ferramenta de design só sRGB vão usar.

As linhas seguem a ordem do próprio Tailwind, com as cores cromáticas em volta do círculo primeiro e os neutros (slate, gray, zinc, neutral, stone, mauve, olive, mist, taupe) no fim. Na tela, cada amostra leva à sua página, com RGB, HSL, contraste e o hex antigo da v3.4 para comparar.

Como imprimir em uma página

Escolha o papel acima do pôster e clique em Imprimir / Salvar PDF. O pôster acompanha o tamanho do papel, então os rótulos ficam com pelo menos 7pt no menor tamanho e crescem nos maiores; a navegação, os anúncios e os botões do site somem na impressão.

Ative Gráficos em segundo plano (Chrome, Edge) ou Imprimir fundos (Firefox, Safari), senão as amostras saem em branco. Para uma gráfica, o botão Baixar PNG desenha o pôster num canvas em resolução de impressão para o papel escolhido.

Incorpore ou crie um link para este guia

Um link para esta página na sua documentação, wiki ou README é o melhor jeito de compartilhar: quem clicar sempre vê a versão atual e o botão de imprimir. Copie um destes:

HTML
<a href="https://www.arielton.com/pt/cheatsheets/tailwind-colors">Pôster das cores do Tailwind CSS para imprimir</a> por <a href="https://www.arielton.com/pt">Arielton Oberek</a>
Markdown
[Pôster das cores do Tailwind CSS para imprimir](https://www.arielton.com/pt/cheatsheets/tailwind-colors) por [Arielton Oberek](https://www.arielton.com/pt)

Se a sua equipe quer o mesmo tratamento para uma API interna, uma CLI ou um guia de estilo, escreva para contact@arielton.com.

Perguntas frequentes

Por que o Tailwind v4 define as cores em OKLCH?
O OKLCH é perceptualmente uniforme, então tons com a mesma luminosidade parecem igualmente claros em qualquer matiz, e ele descreve cores além do sRGB para telas de gama ampla. O Tailwind v4 declara toda a paleta com oklch() no theme.css.
As cores do Tailwind v4 são as mesmas da v3?
Não. A v4 redefiniu a paleta em OKLCH e a maioria dos tons mudou um pouco, em geral para cores mais saturadas em telas de gama ampla. A página de cada amostra mostra o hex da v3.4 ao lado do valor da v4.
Como usar uma cor do pôster no código?
Como utilitário, por exemplo bg-sky-500 ou text-rose-700, ou no seu próprio CSS pela variável do tema, como var(--color-sky-500). O Tailwind v4 expõe cada cor da paleta como uma propriedade customizada --color-*.
Em que tamanho de papel imprimir o pôster do Tailwind?
O A3 é o menor tamanho em que todos os rótulos ficam com 7pt ou mais; o A2 dá amostras maiores e rótulos de 10pt. Ative os gráficos de fundo na janela de impressão, senão as amostras saem em branco.

Revisado em por Arielton Oberek.