Paleta padrão do Tailwind CSS v4
Tailwind pink-500: cor #F6339A
No Tailwind CSS v4, pink-500 é definido como --color-pink-500: oklch(65.6% 0.241 354.308), que equivale a #F6339A em hex e rgb(246, 51, 154): um rosa vivo e médio. No Tailwind v3, pink-500 era #EC4899.
Em OKLCH, pink-500 tem luminosidade de 65,6%, croma 0,241 e matiz 354,3°.
O valor cabe no sRGB, então o hex #F6339A representa a cor sem perda em qualquer tela.
Na v3, pink-500 era #EC4899. A diferença para a v4 é ΔE OK 2,9; o valor da v4 é mais saturado.
O pink do Tailwind é um rosa frio e azulado, entre fuchsia e rose.
Códigos da cor pink-500
| Token do Tailwind v4 | --color-pink-500 |
|---|---|
| OKLCH (valor de origem) | oklch(65.6% 0.241 354.308) |
| HEX | #F6339A |
| RGB | rgb(246, 51, 154) |
| HSL | hsl(328, 92%, 58%) |
| HWB | hwb(328 20% 4%) |
| CMYK (simples, sem perfil ICC) | cmyk(0%, 79%, 37%, 4%) |
| Decimal | 16.135.066 |
| Hex no Tailwind v3 | #EC4899 |
| Classes utilitárias | bg-pink-500, text-pink-500, border-pink-500 |
Escala pink (rosa) do Tailwind
Contraste e acessibilidade
Sobre pink-500, texto preto tem contraste de 5,85:1 e passa no AA para texto normal; texto branco fica em 3,58: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 pink-500 | 5,85:1 | Passa | Passa | Falha | Passa | 42,3 |
| Texto branco sobre pink-500 | 3,58:1 | Falha | Passa | Falha | Falha | −67,2 |
| Texto pink-500 sobre branco | 3,58:1 | Falha | Passa | Falha | Falha | 61,8 |
| Texto pink-500 sobre preto | 5,85:1 | Passa | Passa | Falha | Passa | −39,9 |
Tons claros e escuros
Cada passo mistura var(--color-pink-500) com branco (tons claros) ou preto (tons escuros) em sRGB com correção gama, o mesmo resultado de color-mix(in srgb, var(--color-pink-500), white 25%) no CSS.
Tons claros (misturados com branco)
- 5%
#f63d9f - 15%
#f752a9 - 25%
#f866b3 - 35%
#f97abd - 45%
#fa8fc7 - 55%
#fba3d2 - 65%
#fcb8dc - 75%
#fdcce6 - 85%
#fee0f0 - 95%
#fff5fa
Tons escuros (misturados com preto)
- 5%
#ea3092 - 15%
#d12b83 - 25%
#b92674 - 35%
#a02164 - 45%
#871c55 - 55%
#6f1745 - 65%
#561236 - 75%
#3e0d27 - 85%
#250817 - 95%
#0c0308
Harmonias de cor
Girando o matiz em OKLCH e mantendo luminosidade e croma, a complementar de pink-500 é #00AD8B (perto de lightseagreen), as análogas são #D44AE1 e #FF313F e a tríade se completa com #909B00 e #009EE4. Para texto por cima, preto dá mais contraste.
| Harmonia | Rotação | Cor |
|---|---|---|
| Complementar | +180° | #00ad8b |
| Análogas | −30°, +30° | #d44ae1#ff313f |
| Tríade | +120°, +240° | #909b00#009ee4 |
| Complementar dividida | +150°, +210° | #00b300#00a7b6 |
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 pink-500 fica na fronteira: o matiz de 328° no círculo HSL é um magenta, que parece quente ao lado de azuis e frio ao lado de vermelhos e laranjas.
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-pink-500 text-black">...</div>
<p class="text-pink-500 border-pink-500">...</p>.element {
color: var(--color-pink-500);
background-color: oklch(65.6% 0.241 354.308);
border-color: #f6339a;
outline-color: rgb(246 51 154);
}import SwiftUI
extension Color {
static let pink500 = Color(red: 0.965, green: 0.200, blue: 0.604)
}import androidx.compose.ui.graphics.Color
val Pink500 = Color(0xFFF6339A)import 'package:flutter/material.dart';
const pink500 = Color(0xFFF6339A);<!-- res/values/colors.xml -->
<color name="pink_500">#F6339A</color>Perguntas frequentes
- Qual é o código hex de pink-500 no Tailwind?
- No Tailwind CSS v4, pink-500 é oklch(65.6% 0.241 354.308), que convertido para sRGB dá #F6339A (rgb(246, 51, 154)). No Tailwind v3, o mesmo nome era #EC4899.
- Qual a diferença entre pink-500 na v3 e na v4?
- A v3 usava o hex #EC4899; a v4 redefiniu a paleta em OKLCH como oklch(65.6% 0.241 354.308). Na v3, pink-500 era #EC4899. A diferença para a v4 é ΔE OK 2,9; o valor da v4 é mais saturado.
- Como usar pink-500 em CSS puro?
- O Tailwind v4 define cada cor da paleta como variável de tema, então em CSS você escreve var(--color-pink-500). Por padrão o Tailwind só gera as variáveis que o projeto usa; @theme static gera todas.
- Dá para usar texto branco sobre pink-500?
- Texto branco sobre pink-500 tem contraste de 3,58: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 5,85:1 e passa no AA para texto normal, mas não no AAA. No APCA, o valor é Lc −67,2 para branco e Lc 42,3 para preto.
- Qual cor nomeada do CSS é mais próxima de pink-500?
- A mais próxima é deeppink (#FF1493), a ΔE OK 2,3, seguida de hotpink e mediumvioletred.
Revisado em por Arielton Oberek.