Paleta padrão do Tailwind CSS v4
Tailwind fuchsia-300: cor #F4A8FF
No Tailwind CSS v4, fuchsia-300 é definido como --color-fuchsia-300: oklch(83.3% 0.145 321.434), que equivale a #F4A8FF em hex e rgb(244, 168, 255): um roxo moderadamente saturado e muito claro. No Tailwind v3, fuchsia-300 era #F0ABFC.
Em OKLCH, fuchsia-300 tem luminosidade de 83,3%, croma 0,145 e matiz 321,4°.
Esse valor OKLCH fica fora do sRGB. O hex #F4A8FF é 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.9114 0.6701 0.9862).
Na v3, fuchsia-300 era #F0ABFC. A diferença para a v4 é ΔE OK 1,3, abaixo do limite em que a maioria das pessoas percebe diferença; o valor da v4 é mais saturado.
O fuchsia do Tailwind é um magenta vivo; vários tons médios ficam bem fora do sRGB e precisam de mapeamento de gama em telas comuns.
Códigos da cor fuchsia-300
| Token do Tailwind v4 | --color-fuchsia-300 |
|---|---|
| OKLCH (valor de origem) | oklch(83.3% 0.145 321.434) |
| HEX | #F4A8FF |
| RGB | rgb(244, 168, 255) |
| HSL | hsl(292, 100%, 83%) |
| HWB | hwb(292 66% 0%) |
| CMYK (simples, sem perfil ICC) | cmyk(4%, 34%, 0%, 0%) |
| Decimal | 16.034.047 |
| Display P3 | color(display-p3 0.9114 0.6701 0.9862) |
| Hex no Tailwind v3 | #F0ABFC |
| Classes utilitárias | bg-fuchsia-300, text-fuchsia-300, border-fuchsia-300 |
Escala fuchsia (fúcsia) do Tailwind
Contraste e acessibilidade
Sobre fuchsia-300, texto preto tem contraste de 11,89:1 e passa no AAA para qualquer tamanho de texto; texto branco fica em 1,76: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 fuchsia-300 | 11,89:1 | Passa | Passa | Passa | Passa | 71,6 |
| Texto branco sobre fuchsia-300 | 1,76:1 | Falha | Falha | Falha | Falha | −36,2 |
| Texto fuchsia-300 sobre branco | 1,76:1 | Falha | Falha | Falha | Falha | 32,2 |
| Texto fuchsia-300 sobre preto | 11,89:1 | Passa | Passa | Passa | Passa | −70,4 |
Tons claros e escuros
Cada passo mistura var(--color-fuchsia-300) com branco (tons claros) ou preto (tons escuros) em sRGB com correção gama, o mesmo resultado de color-mix(in srgb, var(--color-fuchsia-300), white 25%) no CSS.
Tons claros (misturados com branco)
- 5%
#f5acff - 15%
#f6b5ff - 25%
#f7beff - 35%
#f8c6ff - 45%
#f9cfff - 55%
#fad8ff - 65%
#fbe1ff - 75%
#fce9ff - 85%
#fdf2ff - 95%
#fefbff
Tons escuros (misturados com preto)
- 5%
#e8a0f2 - 15%
#cf8fd9 - 25%
#b77ebf - 35%
#9f6da6 - 45%
#865c8c - 55%
#6e4c73 - 65%
#553b59 - 75%
#3d2a40 - 85%
#251926 - 95%
#0c080d
Harmonias de cor
Girando o matiz em OKLCH e mantendo luminosidade e croma, a complementar de fuchsia-300 é #90E086 (perto de lightgreen), as análogas são #C9BBFF e #FFA2D2 e a tríade se completa com #F8BE49 e #00E3EF. Para texto por cima, preto dá mais contraste.
| Harmonia | Rotação | Cor |
|---|---|---|
| Complementar | +180° | #90e086 |
| Análogas | −30°, +30° | #c9bbff#ffa2d2 |
| Tríade | +120°, +240° | #f8be49#00e3ef |
| Complementar dividida | +150°, +210° | #ccd156#45e6bc |
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 fuchsia-300 é uma cor fria: o matiz fica em 292° 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
Cores do Tailwind v4 mais próximas
| Cor | HEX | ΔE OK |
|---|---|---|
| purple-300 | #dab2ff | 4,4 |
| pink-300 | #fda5d5 | 6,2 |
| violet-300 | #c4b4ff | 7,3 |
Código
<div class="bg-fuchsia-300 text-black">...</div>
<p class="text-fuchsia-300 border-fuchsia-300">...</p>.element {
color: var(--color-fuchsia-300);
background-color: oklch(83.3% 0.145 321.434);
border-color: #f4a8ff;
outline-color: rgb(244 168 255);
}import SwiftUI
extension Color {
static let fuchsia300 = Color(red: 0.957, green: 0.659, blue: 1.000)
}import androidx.compose.ui.graphics.Color
val Fuchsia300 = Color(0xFFF4A8FF)import 'package:flutter/material.dart';
const fuchsia300 = Color(0xFFF4A8FF);<!-- res/values/colors.xml -->
<color name="fuchsia_300">#F4A8FF</color>Perguntas frequentes
- Qual é o código hex de fuchsia-300 no Tailwind?
- No Tailwind CSS v4, fuchsia-300 é oklch(83.3% 0.145 321.434), que convertido para sRGB dá #F4A8FF (rgb(244, 168, 255)) depois do mapeamento de gama, porque o valor OKLCH fica fora do sRGB. No Tailwind v3, o mesmo nome era #F0ABFC.
- Qual a diferença entre fuchsia-300 na v3 e na v4?
- A v3 usava o hex #F0ABFC; a v4 redefiniu a paleta em OKLCH como oklch(83.3% 0.145 321.434). Na v3, fuchsia-300 era #F0ABFC. A diferença para a v4 é ΔE OK 1,3, abaixo do limite em que a maioria das pessoas percebe diferença; o valor da v4 é mais saturado.
- Como usar fuchsia-300 em CSS puro?
- O Tailwind v4 define cada cor da paleta como variável de tema, então em CSS você escreve var(--color-fuchsia-300). Por padrão o Tailwind só gera as variáveis que o projeto usa; @theme static gera todas.
- Dá para usar texto branco sobre fuchsia-300?
- Texto branco sobre fuchsia-300 tem contraste de 1,76:1 e não passa no AA nem para texto grande do WCAG 2.2. Texto preto chega a 11,89:1 e passa no AA e no AAA. No APCA, o valor é Lc −36,2 para branco e Lc 71,6 para preto.
- Qual cor nomeada do CSS é mais próxima de fuchsia-300?
- A mais próxima é plum (#DDA0DD), a ΔE OK 6,3, seguida de violet e thistle.
Revisado em por Arielton Oberek.