Gerador de paleta de cores
Palette Generator
Monta uma paleta harmoniosa a partir de uma cor base usando regras complementar, triádica e análoga.
Pega uma cor e gira o seu matiz por uma regra de harmonia, mantendo a luminosidade e o croma OKLCH para que uma tríade não volte com um membro visivelmente mais escuro que os outros. A mesma regra é desenhada em HSL embaixo, que é o jeito mais rápido de ver por que isso importa. Antes de exportar, ela verifica se duas amostras quaisquer colapsam uma na outra sob uma deficiência de visão de cores e se cada uma consegue carregar texto.
Cor base
Qualquer notação CSS. A harmonia mantém a luminosidade e o croma OKLCH desta cor e gira o matiz.
Harmonia
Vizinhos, 30° para cada lado. Lê-se como uma só família de cor; precisa de uma diferença de contraste para dar hierarquia, porque os matizes não dão.
OKLCH
#0094c3L 62,3 C 0,188 H 230
#3b82f6L 62,3 C 0,188 H 260
#886ceeL 62,3 C 0,188 H 290
A mesma regra em HSL, para comparar
#3be0f6L 83,3 C 0,132 H 209
#3b82f6L 62,3 C 0,188 H 260
#523bf6L 51,4 C 0,260 H 278
As duas faixas giram o matiz pelos mesmos ângulos. A linha OKLCH mantém constante a luminosidade percebida: a amplitude dela é 0,0000, enquanto a da linha HSL é 0,3191, porque a “luminosidade” do HSL não é perceptual. Amarelo puro e azul puro dizem os dois 50% e se separam por mais de 65 pontos de L*. Essa diferença não é artefato de renderização; é uma rampa de luminosidade que ninguém pediu, embutida em toda harmonia HSL.
Amplitude de luminosidade
0,0000
Fora do sRGB
1 de 3
1 amostra não conseguiu manter o croma base dentro do sRGB e abriu mão de 0,064 dele. Os valores hex são as versões mapeadas; os valores oklch() da exportação são o que uma tela de gama ampla vai mostrar de fato.
Vai aguentar?
O par mais próximo em cada tipo de visão simulada, em ΔE OKLab
- Protanopia0,026— estes dois se confundem
- Deuteranopia0,021— estes dois se confundem
- Tritanopia0,012— estes dois se confundem
- Acromatopsia0,013— estes dois se confundem
Contraste WCAG sobre branco e sobre preto
- sobre branco 3,49·sobre preto 6,02serve para texto sobre um dos dois
- sobre branco 3,68·sobre preto 5,71serve para texto sobre um dos dois
- sobre branco 3,87·sobre preto 5,43serve para texto sobre um dos dois
Um par que se confunde numa simulação é um par que não pode ser a única diferença entre duas coisas — acrescente uma forma, um rótulo ou um degrau de luminosidade. O verificador de contraste tem o veredicto APCA completo para um par específico.
Exportar
As formas CSS e Tailwind emitem oklch() com o hex como comentário — jogar a precisão fora na exportação desfaria a razão de calcular em OKLCH, e um navegador que recebe oklch() desenha a cor de gama ampla onde consegue.
Quer uma rampa inteira de 50 a 950 a partir de uma destas, em vez de um conjunto de matizes? A escala de tons e matizes monta uma, ancorada numa curva de luminosidade medida.
Como usar
Insira a cor que você já tem
Normalmente a cor da marca, em qualquer notação CSS. Todo o resto é derivado do matiz, da luminosidade e do croma dela, então esta é a única decisão que molda o conjunto inteiro.
Escolha a regra, depois ajuste a dispersão
Complementar é um matiz oposto; análoga são os vizinhos; tríade são três a 120°; complementar dividida suaviza um par complementar. O controle de dispersão escala esses deslocamentos — 1 é o espaçamento de manual, e abaixo dele o conjunto se lê como uma família. Monocromática e tons pedem uma contagem de passos em vez disso, porque variam a luminosidade, não o matiz.
Compare as duas faixas
A dispersão de luminosidade sob a fileira OKLCH é próxima de zero por construção. A fileira HSL gira pelos mesmos ângulos e a dispersão dela não é, porque a luminosidade HSL não é perceptual — amarelo puro e azul puro reivindicam ambos 50%. Se as duas faixas parecem iguais para você nesta cor-base em particular, elas são, e qualquer uma serve.
Leia o painel “vai aguentar?” antes de exportar
Ele relata o par mais próximo sob cada tipo de visão simulado em ΔE OKLab, e o contraste WCAG de cada amostra contra branco e preto. Um par marcado como colapsando não deve ser a única coisa que distingue dois estados — acrescente uma forma, um rótulo ou um passo de luminosidade.
Exporte com o prefixo que o seu código usa
Variáveis CSS, um bloco `@theme` do Tailwind, SCSS, tokens JSON ou uma folha de amostras SVG. As formas CSS emitem `oklch()` com o hexadecimal ao lado como comentário.
Perguntas frequentes
O hexadecimal e o oklch() na exportação são cores diferentes. Qual está certo?
Os dois, para monitores diferentes. Quando manter o croma-base colocaria uma amostra fora do sRGB, o hexadecimal é a versão mapeada para o gamut — croma cedido para caber — e o valor `oklch()` é a cor que foi de fato calculada, que uma tela de gamut amplo vai mostrar. O painel diz quanto croma cada amostra recortada perdeu.
Uma regra de harmonia significa que a paleta vai ficar bonita?
Não. São ângulos em um círculo de matizes, e geometria não é gosto. O que uma regra lhe dá é um conjunto inicial defensável com um motivo por trás de cada matiz, o que vale mais do que três cores escolhidas uma de cada vez. O julgamento sobre proporção — qual é a área grande e qual é o destaque de 5% — não está aqui de jeito nenhum.
Posso colar uma paleta que já tenho e verificá-la?
Aqui, não — esta página começa de uma cor e deriva o resto. Para um par específico, o verificador de contraste recebe as duas cores e dá o veredito completo. Para uma rampa a partir de uma dessas amostras, a escala de tons e matizes a constrói.
O que conta como “estas duas colapsam”?
Um ΔE OKLab abaixo de 0,06 depois da simulação, que é mais ou menos onde dois preenchimentos deixam de ser separáveis à primeira vista. A simulação em si é a abordagem de matriz no estilo Brettel: um modelo das deficiências comuns, não uma medição de qualquer pessoa em particular, e ela não diz nada sobre os tipos mais raros nem sobre perda de visão adquirida.
Pode receber de
Extrair paleta de cores
Palette Extractor
Extrai uma paleta de N cores de uma imagem e exporta como hex, variáveis CSS ou amostra ASE.
Simulador de daltonismo
Colour Blindness Simulator
Renderiza a imagem como a veria alguém com protanopia, deuteranopia, tritanopia ou visão em tons de cinza.
Verificador de contraste
Contrast Checker
Pontua um par de cores de texto e fundo contra WCAG 2 e APCA e sugere a cor aprovada mais próxima.
Gerador de degradê CSS
CSS Gradient Builder
Monta degradês lineares, radiais e cônicos com paradas arrastáveis e gera o CSS, em sRGB ou OKLCH.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Escala de tons e matizes
Tint & Shade Scale
Gera uma escala de luminosidade 50–950 a partir de uma cor com passos perceptualmente uniformes, pronta como tokens de design.
Verificador de contraste
Contrast Checker
Pontua um par de cores de texto e fundo contra WCAG 2 e APCA e sugere a cor aprovada mais próxima.
Extrator de tokens CSS
CSS Token Extractor
Extrai cores, espaçamentos, raios e fontes de uma folha de estilo e propõe um conjunto de propriedades personalizadas.
Extrair paleta de cores
Palette Extractor
Extrai uma paleta de N cores de uma imagem e exporta como hex, variáveis CSS ou amostra ASE.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.