Paleta padrão do Tailwind CSS v4
Tailwind slate-400: cor #90A1B9
No Tailwind CSS v4, slate-400 é definido como --color-slate-400: oklch(70.4% 0.04 256.788), que equivale a #90A1B9 em hex e rgb(144, 161, 185): um azul suave e claro. No Tailwind v3, slate-400 era #94A3B8.
Em OKLCH, slate-400 tem luminosidade de 70,4%, croma 0,040 e matiz 256,8°.
O valor cabe no sRGB, então o hex #90A1B9 representa a cor sem perda em qualquer tela.
Na v3, slate-400 era #94A3B8. A diferença para a v4 é ΔE OK 0,8, abaixo do limite em que a maioria das pessoas percebe diferença; o valor da v4 é mais escuro.
O slate do Tailwind é a escala de cinza mais azulada, um cinza frio que combina com destaques blue e indigo.
Códigos da cor slate-400
| Token do Tailwind v4 | --color-slate-400 |
|---|---|
| OKLCH (valor de origem) | oklch(70.4% 0.04 256.788) |
| HEX | #90A1B9 |
| RGB | rgb(144, 161, 185) |
| HSL | hsl(215, 23%, 65%) |
| HWB | hwb(215 56% 27%) |
| CMYK (simples, sem perfil ICC) | cmyk(22%, 13%, 0%, 27%) |
| Decimal | 9.478.585 |
| Hex no Tailwind v3 | #94A3B8 |
| Classes utilitárias | bg-slate-400, text-slate-400, border-slate-400 |
Escala slate (ardósia) do Tailwind
Contraste e acessibilidade
Sobre slate-400, texto preto tem contraste de 7,98:1 e passa no AAA para qualquer tamanho de texto; texto branco fica em 2,63: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 slate-400 | 7,98:1 | Passa | Passa | Passa | Passa | 52,7 |
| Texto branco sobre slate-400 | 2,63:1 | Falha | Falha | Falha | Falha | −56,4 |
| Texto slate-400 sobre branco | 2,63:1 | Falha | Falha | Falha | Falha | 51,3 |
| Texto slate-400 sobre preto | 7,98:1 | Passa | Passa | Passa | Passa | −50,6 |
Tons claros e escuros
Cada passo mistura var(--color-slate-400) com branco (tons claros) ou preto (tons escuros) em sRGB com correção gama, o mesmo resultado de color-mix(in srgb, var(--color-slate-400), white 25%) no CSS.
Tons claros (misturados com branco)
- 5%
#96a6bd - 15%
#a1afc4 - 25%
#acb9cb - 35%
#b7c2d2 - 45%
#c2cbd9 - 55%
#cdd5e0 - 65%
#d8dee7 - 75%
#e3e8ee - 85%
#eef1f5 - 95%
#f9fafc
Tons escuros (misturados com preto)
- 5%
#8999b0 - 15%
#7a899d - 25%
#6c798b - 35%
#5e6978 - 45%
#4f5966 - 55%
#414853 - 65%
#323841 - 75%
#24282e - 85%
#16181c - 95%
#070809
Harmonias de cor
Girando o matiz em OKLCH e mantendo luminosidade e croma, a complementar de slate-400 é #AE9D84 (perto de rosybrown), as análogas são #86A5B3 e #9D9CB8 e a tríade se completa com #B79697 e #94A68D. Para texto por cima, preto dá mais contraste.
| Harmonia | Rotação | Cor |
|---|---|---|
| Complementar | +180° | #ae9d84 |
| Análogas | −30°, +30° | #86a5b3#9d9cb8 |
| Tríade | +120°, +240° | #b79697#94a68d |
| Complementar dividida | +150°, +210° | #b6998b#a2a285 |
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 slate-400 é uma cor fria: o matiz fica em 215° 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.
Código
<div class="bg-slate-400 text-black">...</div>
<p class="text-slate-400 border-slate-400">...</p>.element {
color: var(--color-slate-400);
background-color: oklch(70.4% 0.04 256.788);
border-color: #90a1b9;
outline-color: rgb(144 161 185);
}import SwiftUI
extension Color {
static let slate400 = Color(red: 0.565, green: 0.631, blue: 0.725)
}import androidx.compose.ui.graphics.Color
val Slate400 = Color(0xFF90A1B9)import 'package:flutter/material.dart';
const slate400 = Color(0xFF90A1B9);<!-- res/values/colors.xml -->
<color name="slate_400">#90A1B9</color>Perguntas frequentes
- Qual é o código hex de slate-400 no Tailwind?
- No Tailwind CSS v4, slate-400 é oklch(70.4% 0.04 256.788), que convertido para sRGB dá #90A1B9 (rgb(144, 161, 185)). No Tailwind v3, o mesmo nome era #94A3B8.
- Qual a diferença entre slate-400 na v3 e na v4?
- A v3 usava o hex #94A3B8; a v4 redefiniu a paleta em OKLCH como oklch(70.4% 0.04 256.788). Na v3, slate-400 era #94A3B8. A diferença para a v4 é ΔE OK 0,8, abaixo do limite em que a maioria das pessoas percebe diferença; o valor da v4 é mais escuro.
- Como usar slate-400 em CSS puro?
- O Tailwind v4 define cada cor da paleta como variável de tema, então em CSS você escreve var(--color-slate-400). Por padrão o Tailwind só gera as variáveis que o projeto usa; @theme static gera todas.
- Dá para usar texto branco sobre slate-400?
- Texto branco sobre slate-400 tem contraste de 2,63:1 e não passa no AA nem para texto grande do WCAG 2.2. Texto preto chega a 7,98:1 e passa no AA e no AAA. No APCA, o valor é Lc −56,4 para branco e Lc 52,7 para preto.
- Qual cor nomeada do CSS é mais próxima de slate-400?
- A mais próxima é darkgray (#A9A9A9), a ΔE OK 5,0, seguida de cadetblue e rosybrown.
Revisado em por Arielton Oberek.