Artigo Build·Desenvolvimento·13 min de leitura de leitura

Cores na Web (2026): HEX, RGB, HSL, OKLCH e Quando Usar Cada Um

Escolher o sistema de cor certo em CSS impacta legibilidade do código, facilidade de criar paleta e até precisão visual em monitores modernos. Este guia cobre os quatro sistemas relevantes em 2026, mostra conversões e explica por que OKLCH está virando padrão.

Por Vitor Morais

Fundador do MochaLabz · publicado em 17 de abril de 2026

🎨

Converta cores em segundos

Cole HEX, RGB, HSL ou OKLCH e veja a cor em todos os formatos, com preview.

Usar conversor →

Cor na web começou em HEX no início dos anos 90, ganhou RGB, depois HSL, e em 2024 passou a usar OKLCH em design systems modernos. Cada sistema resolve um problema diferente — escolher o certo em cada situação evita retrabalho, produz código mais legível e, em alguns casos, aumenta precisão visual.

Este guia mostra os quatro sistemas relevantes em CSS moderno, como converter entre eles, quando usar cada um e por que o padrão da indústria está migrando para OKLCH em 2025–2026.

Por que existem tantos sistemas

Computadores “veem” cor como três canais — vermelho, verde e azul — ou como coordenadas em espaços perceptuais. Cada sistema CSS expressa essa realidade de forma diferente, otimizando um aspecto:

HEX: compacto, fácil de copiar e colar.
RGB: direto, matemático, fácil em código.
HSL: intuitivo pra designer (matiz, saturação, luminosidade).
OKLCH: perceptualmente uniforme, produz paletas harmoniosas.

HEX: o padrão histórico

HEX (ou hexadecimal) representa uma cor em base 16: três pares de dígitos para RGB, opcionalmente um quarto par para alpha.

#RRGGBB         — padrão
#RRGGBBAA       — com alpha
#RGB            — atalho (cada dígito é duplicado: #F00 = #FF0000)
#RGBA           — atalho com alpha

/* Exemplos */
#000000          — preto
#FFFFFF          — branco
#FF0000          — vermelho
#3B82F6          — azul Tailwind blue-500
#3B82F6AA        — mesmo azul com 67% opacidade

Quando usar HEX

Copiar direto do Figma, Sketch, Adobe para CSS.
Design estático sem variações programáticas.
Arquivos e documentação onde compactação importa.

Limitações

Não é legível — #3B82F6 não diz nada sobre a cor.
Variações exigem conversão manual ou mental (escurecer azul em 10%? Impossível de olho).
Não aceita variáveis CSS na notação compacta. Você não pode fazer #{corVar}.

RGB e RGBA: direto ao ponto

RGB usa valores decimais de 0 a 255 para cada canal. RGBA adiciona alpha de 0 a 1 para transparência.

/* Sintaxe tradicional */
rgb(59, 130, 246)            /* azul sólido */
rgba(59, 130, 246, 0.67)     /* com alpha */

/* Sintaxe moderna (CSS Color Module 4, 2024+) */
rgb(59 130 246)              /* sem vírgulas */
rgb(59 130 246 / 67%)        /* alpha com barra */
rgb(59 130 246 / 0.67)       /* alpha como número */

/* Com variáveis */
--primary-rgb: 59, 130, 246;
background: rgb(var(--primary-rgb));
background-hover: rgb(var(--primary-rgb), 0.8);

Quando usar RGB

Quando você precisa controlar alpha separadamente da cor base.
Com variáveis CSS em design systems (permite reutilizar cor base e aplicar transparência variada).
Em código que manipula canais individualmente (tratamento de imagem, canvas).

HSL e HSLA: o melhor amigo do designer

HSL representa cor por três eixos mais intuitivos:

H (Hue / Matiz): 0 a 360 graus na roda de cores. 0 = vermelho, 120 = verde, 240 = azul.
S (Saturation): 0% (cinza) a 100% (cor pura).
L (Lightness): 0% (preto) a 100% (branco). 50% é a cor pura.

hsl(0, 100%, 50%)        /* vermelho puro */
hsl(120, 100%, 50%)      /* verde puro */
hsl(220, 92%, 60%)       /* azul Tailwind blue-500 aproximado */

/* Variar uma cor só mexendo no L */
hsl(220, 92%, 95%)       /* azul muito claro */
hsl(220, 92%, 75%)       /* azul claro */
hsl(220, 92%, 50%)       /* azul base */
hsl(220, 92%, 30%)       /* azul escuro */
hsl(220, 92%, 15%)       /* azul quase preto */

/* Moderno com alpha */
hsl(220 92% 60% / 50%)

Quando usar HSL

Design systems que precisam gerar escala de cor (50–950 como Tailwind).
Hover states: escurecer L em 10–20% faz hover visualmente consistente.
Modo escuro: fixar H e S, inverter L para obter versão dark.
Qualquer situação onde um designer vai manipular paleta no código.

Dica

A Tailwind CSS até a v3 exportava todas as cores em HSL justamente para permitir que você escurecesse, clareasse e ajustasse saturação com CSS sem perder identidade de marca. Ideia transferível para qualquer design system.

OKLCH: o padrão emergente

OKLCH resolve um problema real do HSL: passos iguais de lightness não geram variação visual igual. Um HSL(60, 100%, 50%) (amarelo) parece muito mais claro que um HSL(240, 100%, 50%) (azul) — mesmo ambos sendo “50% de luminosidade”.

OKLCH é baseado no espaço de cor Oklab, que é perceptualmente uniforme. Significa: se você muda L de 50% para 60%, todas as cores parecem exatamente 10% mais claras.

oklch(L C H)
oklch(L C H / alpha)

/* Exemplos */
oklch(0.62 0.19 259)         /* azul Tailwind blue-500 */
oklch(0.70 0.17 259)         /* mesmo tom, 10% mais claro */
oklch(0.50 0.19 259)         /* mesmo tom, mais escuro */

/* L = 0 a 1 (lightness)
   C = chroma (saturação), 0 a ~0.4
   H = hue (0-360 como HSL) */

Quando usar OKLCH

Design systems novos (Tailwind v4, shadcn/ui modernos).
Gradientes — OKLCH gera interpolação mais uniforme.
Paletas claras e escuras que precisam ter “peso visual” consistente.
Projetos que querem usar color gamuts mais amplos (P3, Rec2020).

Contexto

OKLCH tem suporte em todos os navegadores modernos desde 2023. Para fallback em navegadores antigos, use @supports ou deixe o CSS clássico como regra base e OKLCH como regra mais específica.

Comparação lado a lado

Mesmo azul em cada sistema
Critério	Notação	Observações
HEX	#3B82F6	Compacto
RGB	rgb(59 130 246)	Direto
HSL	hsl(220 92% 60%)	Intuitivo
OKLCH	oklch(0.62 0.19 259)	Perceptualmente uniforme

Transparência: como funciona em cada sistema

Sintaxe de transparência em cada sistema
Critério	Exemplo	Quando preferir
HEX	#3B82F680 (50%)	Quando HEX é obrigatório
RGBA tradicional	rgba(59, 130, 246, 0.5)	Compatibilidade legado
RGB moderno	rgb(59 130 246 / 50%)	CSS novo
HSL moderno	hsl(220 92% 60% / 50%)	Com variação de luminosidade
OKLCH	oklch(0.62 0.19 259 / 50%)	Design system moderno

Convertendo entre sistemas

Três abordagens:

DevTools do navegador: clique no color picker dentro do painel de elementos e alterne formatos. Mais rápido em ajuste pontual.
Ferramentas online: conversor de cores do MochaLabz aceita qualquer formato e retorna todos os outros com preview.
Bibliotecas em código: culori é o padrão moderno para conversão e manipulação; suporta todos os espaços de cor.

import { converter, formatHex, formatRgb } from "culori";

const oklch = "oklch(0.62 0.19 259)";
formatHex(oklch);   // "#3b82f6"
formatRgb(oklch);   // "rgb(59, 130, 246)"

// Clarear uma cor
import { okhsl } from "culori";
const base = okhsl({ mode: "oklch", l: 0.62, c: 0.19, h: 259 });
const lighter = { ...base, l: base.l + 0.1 };

Paleta completa a partir de uma cor base

Em design systems modernos, a escala 50–950 (Tailwind style) é gerada com 10 variações de lightness do mesmo hue. Em OKLCH:

/* Cor base em H=259, C=0.19 */
--blue-50:   oklch(0.97 0.02 259);
--blue-100:  oklch(0.93 0.05 259);
--blue-200:  oklch(0.87 0.09 259);
--blue-300:  oklch(0.79 0.14 259);
--blue-400:  oklch(0.72 0.17 259);
--blue-500:  oklch(0.62 0.19 259);  /* base */
--blue-600:  oklch(0.54 0.19 259);
--blue-700:  oklch(0.46 0.18 259);
--blue-800:  oklch(0.36 0.14 259);
--blue-900:  oklch(0.28 0.10 259);
--blue-950:  oklch(0.20 0.07 259);

Dark mode e inversão

HSL e OKLCH facilitam modo escuro porque você pode inverter só o L:

:root {
  --surface: oklch(0.98 0.005 0);   /* quase branco */
  --text:    oklch(0.20 0.005 0);   /* quase preto */
}

[data-theme="dark"] {
  --surface: oklch(0.15 0.005 0);
  --text:    oklch(0.95 0.005 0);
}

.card {
  background: var(--surface);
  color: var(--text);
}

Monitores wide-gamut (P3, Rec2020)

Monitores modernos (iPhone 12+, MacBook Pro M1+, iMac Retina) suportam P3, que tem ~25% mais gamut que sRGB — vermelhos e verdes mais saturados, impossíveis em sRGB puro. Para aproveitar:

.vibrant-red {
  color: color(display-p3 1 0 0);  /* vermelho P3 super saturado */
  color: #FF0000; /* fallback sRGB para monitores antigos */
}

Vai mais fundo

OKLCH suporta valores fora do gamut sRGB nativamente. Se você escreve oklch(0.65 0.30 30), navegadores em monitor P3 renderizam a cor mais vibrante possível; em sRGB, aproximam para o mais próximo. Uma notação, dois comportamentos automáticos.

Acessibilidade e contraste

Qualquer sistema serve para medir contraste WCAG, mas alguns facilitam: em HSL e OKLCH, manipular lightness rapidamente dá o par correto de text/background. Use o analisador de contraste para validar AA (4.5:1) ou AAA (7:1) antes de deploy.

Erros clássicos

Usar HEX em design system escalável: dificulta variações programáticas.
Misturar sistemas sem padrão: metade em HEX, metade em RGB complica manutenção.
Ignorar contraste em cores primárias: azul bonito sobre branco pode falhar em WCAG AA.
Esquecer dark mode desde o início: migrar depois é retrabalho.
Usar named colors sem padrão: lightblue em produção é sinal de código não maduro.

Qual sistema escolher em 2026

Recomendação por tipo de projeto
Critério	Recomendado	Motivo
Site estático simples	HEX	Compatibilidade e simplicidade
App com design system	OKLCH ou HSL	Paletas e escalas programáticas
Projeto legado IE11	HEX + RGBA	Falta de suporte OKLCH/HSL4
Dashboard com data viz	OKLCH	Uniformidade visual em gradientes
Projeto brand-heavy	OKLCH P3	Aproveita monitores modernos

Cores em uma frase

Cada sistema de cor resolve um problema: HEX para simplicidade, RGB para controle, HSL para design, OKLCH para design moderno. Padronize seu projeto em um (ou dois complementares) e deixe o resto. Consistência vence sofisticação.

Perguntas frequentes

Qual sistema de cor usar em CSS: HEX, RGB ou HSL?+

Depende da situação. HEX (#3B82F6) é o mais compacto e ainda o padrão em designs estáticos. RGB/RGBA é prático quando você precisa manipular canais individuais ou controlar opacidade. HSL é o melhor para design system e variações programáticas (matiz, saturação, luminosidade são intuitivos). Em 2026, OKLCH desponta como padrão moderno por entregar distância visual perceptualmente uniforme.

Qual a diferença entre RGB e HEX?+

São o mesmo sistema em notações diferentes. HEX é uma representação compacta em base 16 dos valores RGB: #FF0000 é o mesmo que rgb(255, 0, 0). HEX é prático para copiar/colar de designs e compartilhar em bate-papo; RGB é melhor em CSS moderno com a função rgb() que aceita variáveis e facilita cálculos dinâmicos.

O que é OKLCH e por que está substituindo HSL?+

OKLCH é um sistema perceptualmente uniforme: passos iguais de lightness geram mudanças visuais iguais, diferente de HSL onde o mesmo 50% de luminosidade pode parecer muito mais claro em amarelo que em azul. OKLCH foi adotado em Tailwind v4, shadcn/ui e design systems modernos em 2024–2025. Produz gradientes e paletas mais harmoniosas com menos ajuste manual.

Como adicionar transparência em cada sistema?+

HEX: adicione 2 dígitos no fim (#FF0000AA — AA é opacidade em hex). RGBA: rgb(255, 0, 0, 0.8) — o último argumento é alpha de 0 a 1. HSLA: hsl(0, 100%, 50%, 0.8). Em CSS moderno (2024+), a função rgb() aceita alpha nativamente: rgb(255 0 0 / 80%). Sintaxe de barra é a preferida hoje.

Por que cores aparecem diferentes em monitores diferentes?+

Porque o espaço de cor (color space) varia entre dispositivos. sRGB é o padrão web antigo; monitores modernos suportam P3 (mais saturado, usado em iPhones e MacBooks recentes). Sem especificar, o navegador assume sRGB. Para aproveitar monitores wide-gamut, use color(display-p3 r g b) ou OKLCH, que permite valores fora de sRGB. A diferença é visível em vermelhos e verdes saturados.

Posso usar qualquer cor em HTML ou tem lista oficial?+

Qualquer cor pode ser definida por HEX, RGB, HSL ou OKLCH — são milhões de combinações. Também existem 147 “named colors” reconhecidas pelo CSS (red, blue, rebeccapurple, coral, etc.). Cores nomeadas são práticas em protótipos, mas use HEX ou variáveis CSS em produção — nomes são limitados e difíceis de variar programaticamente.

Como converter entre HEX, RGB e HSL?+

Ferramentas online (conversor de cores no MochaLabz), DevTools do Chrome (botão de color picker no painel de elementos permite alternar formatos), extensões de design (Figma, Adobe Color). Para automatizar em código, bibliotecas como color, tinycolor2 e culori oferecem funções de conversão e manipulação. DevTools é o mais rápido para ajuste pontual.

HSL é bom para design system?+

Sim — e por isso Tailwind usou HSL por anos antes de migrar pro OKLCH. A lógica de separar matiz (H), saturação (S) e luminosidade (L) permite gerar tons, sombras e hovers mudando só um canal. Para ter a paleta completa de um azul, você fixa H em 220 e varia L de 10% a 95%. Em OKLCH, o mesmo conceito, mas com resultado visualmente mais consistente.

#cores#css#hex#rgb#hsl#oklch#design system#transparência#dark mode#wide gamut