Paleta padrão do Tailwind CSS v4
Tailwind green-600: cor #00A63E
No Tailwind CSS v4, green-600 é definido como --color-green-600: oklch(62.7% 0.194 149.214), que equivale a #00A63E em hex e rgb(0, 166, 62): um verde vivo e médio. No Tailwind v3, green-600 era #16A34A.
Em OKLCH, green-600 tem luminosidade de 62,7%, croma 0,194 e matiz 149,2°.
Esse valor OKLCH fica fora do sRGB. O hex #00A63E é a versão mapeada para sRGB pelo algoritmo do CSS Color 4; em telas Display P3 o navegador mostra uma cor mais saturada, próxima de color(display-p3 0.2439 0.6408 0.2948).
Na v3, green-600 era #16A34A. A diferença para a v4 é ΔE OK 2,4; o valor da v4 é mais saturado.
O green do Tailwind é a cor padrão de sucesso; na v4, os tons médios passaram a um verde OKLCH mais saturado que os hex da v3.
Códigos da cor green-600
| Token do Tailwind v4 | --color-green-600 |
|---|---|
| OKLCH (valor de origem) | oklch(62.7% 0.194 149.214) |
| HEX | #00A63E |
| RGB | rgb(0, 166, 62) |
| HSL | hsl(142, 100%, 33%) |
| HWB | hwb(142 0% 35%) |
| CMYK (simples, sem perfil ICC) | cmyk(100%, 0%, 63%, 35%) |
| Decimal | 42.558 |
| Display P3 | color(display-p3 0.2439 0.6408 0.2948) |
| Hex no Tailwind v3 | #16A34A |
| Classes utilitárias | bg-green-600, text-green-600, border-green-600 |
Escala green (verde) do Tailwind
Contraste e acessibilidade
Sobre green-600, texto preto tem contraste de 6,52:1 e passa no AA para texto normal; texto branco fica em 3,21:1.
Razões de contraste do WCAG 2.2 (critérios 1.4.3 e 1.4.6: AA exige 4,5:1 para texto normal e 3:1 para texto grande; AAA exige 7:1 e 4,5:1). APCA Lc é o contraste de luminosidade do modelo APCA-W3 0.0.98G proposto para o WCAG 3; quanto maior o valor absoluto, mais legível, e Lc 75 é o mínimo sugerido para texto corrido.
| Combinação | Razão | AA | AA grande | AAA | AAA grande | APCA Lc |
|---|---|---|---|---|---|---|
| Texto preto sobre green-600 | 6,52:1 | Passa | Passa | Falha | Passa | 45,4 |
| Texto branco sobre green-600 | 3,21:1 | Falha | Passa | Falha | Falha | −64,1 |
| Texto green-600 sobre branco | 3,21:1 | Falha | Passa | Falha | Falha | 58,7 |
| Texto green-600 sobre preto | 6,52:1 | Passa | Passa | Falha | Passa | −43,1 |
Tons claros e escuros
Cada passo mistura var(--color-green-600) com branco (tons claros) ou preto (tons escuros) em sRGB com correção gama, o mesmo resultado de color-mix(in srgb, var(--color-green-600), white 25%) no CSS.
Tons claros (misturados com branco)
- 5%
#0daa48 - 15%
#26b35b - 25%
#40bc6e - 35%
#59c582 - 45%
#73ce95 - 55%
#8cd7a8 - 65%
#a6e0bb - 75%
#bfe9cf - 85%
#d9f2e2 - 95%
#f2fbf5
Tons escuros (misturados com preto)
- 5%
#009e3b - 15%
#008d35 - 25%
#007d2f - 35%
#006c28 - 45%
#005b22 - 55%
#004b1c - 65%
#003a16 - 75%
#002a10 - 85%
#001909 - 95%
#000803
Harmonias de cor
Girando o matiz em OKLCH e mantendo luminosidade e croma, a complementar de green-600 é #C553C0 (perto de mediumorchid), as análogas são #7E9500 e #00A28A e a tríade se completa com #5A7BFC e #E64B3C. Para texto por cima, preto dá mais contraste.
| Harmonia | Rotação | Cor |
|---|---|---|
| Complementar | +180° | #c553c0 |
| Análogas | −30°, +30° | #7e9500#00a28a |
| Tríade | +120°, +240° | #5a7bfc#e64b3c |
| Complementar dividida | +150°, +210° | #9b65eb#de4785 |
Calculadas em OKLCH: o matiz gira 180° (complementar), ±30° (análogas), ±120° (tríade) e 180° ±30° (complementar dividida), com luminosidade e croma mantidos. Quando o resultado sai do sRGB, ele é trazido de volta com o algoritmo de mapeamento de gama do CSS Color 4. Por usar OKLCH, os valores diferem das ferramentas que giram o matiz em HSL, mas as cores ficam com a mesma luminosidade percebida.
Quente ou fria?
Tailwind green-600 é uma cor fria: o matiz fica em 142° no círculo HSL, na faixa dos verdes, azuis e violetas que por convenção se chama de fria.
Cores nomeadas e do Tailwind mais próximas
A distância é o ΔE OK, a distância euclidiana no OKLab multiplicada por 100. Valores abaixo de cerca de 2 são difíceis de distinguir lado a lado.
Cores nomeadas do CSS mais próximas
| Cor | HEX | ΔE OK |
|---|---|---|
| forestgreen | #228b22 | 7,6 |
| mediumseagreen | #3cb371 | 7,8 |
| olivedrab | #6b8e23 | 9,0 |
Cores do Tailwind v4 mais próximas
| Cor | HEX | ΔE OK |
|---|---|---|
| lime-600 | #5ea500 | 6,4 |
| emerald-600 | #009966 | 7,1 |
| emerald-500 | #00bc7d | 8,4 |
Código
<div class="bg-green-600 text-black">...</div>
<p class="text-green-600 border-green-600">...</p>.element {
color: var(--color-green-600);
background-color: oklch(62.7% 0.194 149.214);
border-color: #00a63e;
outline-color: rgb(0 166 62);
}import SwiftUI
extension Color {
static let green600 = Color(red: 0.000, green: 0.651, blue: 0.243)
}import androidx.compose.ui.graphics.Color
val Green600 = Color(0xFF00A63E)import 'package:flutter/material.dart';
const green600 = Color(0xFF00A63E);<!-- res/values/colors.xml -->
<color name="green_600">#00A63E</color>Perguntas frequentes
- Qual é o código hex de green-600 no Tailwind?
- No Tailwind CSS v4, green-600 é oklch(62.7% 0.194 149.214), que convertido para sRGB dá #00A63E (rgb(0, 166, 62)) depois do mapeamento de gama, porque o valor OKLCH fica fora do sRGB. No Tailwind v3, o mesmo nome era #16A34A.
- Qual a diferença entre green-600 na v3 e na v4?
- A v3 usava o hex #16A34A; a v4 redefiniu a paleta em OKLCH como oklch(62.7% 0.194 149.214). Na v3, green-600 era #16A34A. A diferença para a v4 é ΔE OK 2,4; o valor da v4 é mais saturado.
- Como usar green-600 em CSS puro?
- O Tailwind v4 define cada cor da paleta como variável de tema, então em CSS você escreve var(--color-green-600). Por padrão o Tailwind só gera as variáveis que o projeto usa; @theme static gera todas.
- Dá para usar texto branco sobre green-600?
- Texto branco sobre green-600 tem contraste de 3,21:1 e passa no AA só para texto grande (a partir de 24 px, ou 18,66 px em negrito) do WCAG 2.2. Texto preto chega a 6,52:1 e passa no AA para texto normal, mas não no AAA. No APCA, o valor é Lc −64,1 para branco e Lc 45,4 para preto.
- Qual cor nomeada do CSS é mais próxima de green-600?
- A mais próxima é forestgreen (#228B22), a ΔE OK 7,6, seguida de mediumseagreen e olivedrab.
Revisado em por Arielton Oberek.