CSS Moderno · 12 min de leitura
Por décadas, o modelo RGB foi o único disponível para desenvolvedores web. rgb(255, 0, 0) é vermelho, #00FF00 é verde, e interpolações entre eles funcionavam razoavelmente bem — até você tentar fazer algo como um gradiente de amarelo para azul.
Tente este experimento: abra o DevTools, crie um gradiente linear-gradient(to right, yellow, blue) e observe o resultado. Você verá uma faixa cinza-esverdeada feia no meio. Isso não é um bug — é a matemática do espaço RGB funcionando exatamente como esperado. O problema é que "exatamente como esperado" não corresponde a como o olho humano percebe a mistura dessas cores.
O RGB foi criado para descrever sinais de hardware (intensidade de LEDs vermelho, verde e azul), não para modelar percepção humana de cor. O resultado é que operações que deveriam ser simples — como "tornar esta cor 20% mais clara" ou "misturar estas duas cores" — produzem resultados perceptualmente inconsistentes no RGB.
Mesmo gradiente amarelo → azul renderizado em três espaços de cor diferentes — veja a diferença diretamente no seu navegador:
OKLCH é um espaço de cor derivado do modelo Oklab (desenvolvido por Björn Ottosson em 2020), projetado especificamente para ser perceptualmente uniforme. Isso significa que uma mudança de 10 unidades em qualquer dimensão do espaço OKLCH produz uma mudança de contraste percebido equivalente — algo que o RGB simplesmente não garante.
O nome OKLCH descreve as três dimensões do espaço:
L=50%) é muito diferente do azul (L=50%), no OKLCH o mesmo valor de L produz luminosidade percebida equivalente entre cores diferentes.O impacto mais prático da uniformidade perceptual do OKLCH está em sistemas de design com múltiplos tons de uma cor. Tente gerar uma escala de azul de 100 a 900 no HSL: o resultado frequentemente tem saltos perceptuais irregulares — o azul-500 parece muito diferente do azul-600, mas o azul-700 e 800 parecem quase idênticos.
Com OKLCH, você pode variar L em incrementos iguais (por exemplo, de 0.2 a 0.9 em passos de 0.1) e obter uma escala onde cada degrau parece igualmente distante do anterior. Isso simplifica enormemente a criação de sistemas de tokens de design consistentes.
A função color-mix(), disponível em todos os navegadores modernos desde 2023, permite misturar duas cores diretamente no CSS — sem JavaScript, sem pré-processadores.
A parte mais importante da sintaxe é o in [espaço]. A mesma mistura produz resultados radicalmente diferentes dependendo do espaço escolhido:
Para a maioria dos casos de uso em sistemas de design, in oklch produz os resultados mais naturais. Para gradientes, in oklab tende a eliminar a faixa cinza-morta que aparece no centro de gradientes RGB.
Aplicações práticas imediatas do color-mix():
background: color-mix(in oklch, var(--btn-bg) 85%, black); — um hover que escurece qualquer cor de botão de forma consistente.box-shadow: 0 4px 16px color-mix(in srgb, var(--brand-color) 40%, transparent);background: color-mix(in oklch, var(--surface) 92%, white);Uma das razões pelo interesse crescente em OKLCH é sua capacidade de representar cores fora do gamut sRGB — o espaço de cor que limitou a web desde o início. O Display P3, suportado pela maioria dos iPhones e Macs desde 2016, consegue exibir aproximadamente 25% mais cores que o sRGB.
Com CSS moderno, você pode especificar cores P3 diretamente:
O suporte atual (maio 2026) para as tecnologias discutidas neste artigo:
A estratégia recomendada para produção é o progressive enhancement: declare o fallback RGB/HEX primeiro, depois o valor moderno. Navegadores que não reconhecem a segunda declaração simplesmente a ignoram:
Para encontrar o nome CSS mais próximo de qualquer hexadecimal (útil para prototipagem rápida), use a Ferramenta de Nome CSS. Para entender em detalhes como o color-mix() funciona e ver exemplos de espaços de cor, veja o Glossário: color-mix().