Paletas de marca baseadas em OKLCH. Escolha uma base e obtenha todas as harmonias clássicas mais uma escala tonal 50–950. Trave, re-rolê e exporte como CSS / Tailwind v4 / SCSS / JSON.
Paletas de marca baseadas em OKLCH. Escolha uma base e obtenha todas as harmonias clássicas mais uma escala tonal 50–950. Trave, re-rolê e exporte como CSS / Tailwind v4 / SCSS / JSON.
Nosso Color Picker & Converter é para uma cor por vez — escolher / converter / copiar. Esta ferramenta é para paletas: coloque uma cor base e obtenha um sistema completo, pronto para a marca (harmonias + escala tonal) de uma só vez. É a diferença entre comprar uma única camisa e ganhar um guarda-roupa inteiro.
O HSL espaça os matizes de forma irregular (o amarelo a 60° parece muito mais brilhante que o azul a 240°, mesmo com o mesmo valor de luminosidade). Uma paleta triádica em HSL tem uma amostra que é visivelmente mais brilhante ou mais opaca que as outras. O OKLCH é perceptualmente uniforme — três amostras com a mesma luminosidade OKLCH parecem ter o mesmo brilho. Por isso todo sistema de design moderno (Apple HI, Tailwind v4, IBM Carbon) está migrando para OKLCH em harmonias e escalas.
As cores da sua marca nunca saem do seu dispositivo. Abra o DevTools → Network e verá zero requisições de saída durante qualquer operação.
Dica: pressione Espaço para re-rolar as amostras destravadas.
Harmonias OKLCH, escalas tonais, travar-e-re-rolar, exportações de tokens de design — e alguns toques que tornam o uso realmente divertido.
Complementar, análoga, triádica, tetrádica, complementar dividida, monocromática — todas calculadas em OKLCH, então uma paleta triádica de três cores saturadas e brilhantes mantém o brilho uniforme. Sem a confusão do HSL.
Coloque a cor da sua marca e obtenha uma escala tonal no formato Tailwind 50, 100, 200, … 900, 950, gerada percorrendo a luminosidade ao longo de uma curva OKLCH. O croma é comprimido nos extremos para que as cores permaneçam dentro do gamute sRGB.
Fixe qualquer amostra (ícone de cadeado) e clique em Re-rolar (ou pressione Espaço) para variar o restante dentro da harmonia escolhida. Itere rápido, mantenha o que você ama.
Propriedades CSS personalizadas (--brand-500), bloco @theme do Tailwind v4, map SCSS e tokens de design JSON prontos para Style Dictionary / Figma Tokens. Mais uma faixa de amostras PNG 1200×200.
Cada amostra mostra sua razão de contraste WCAG contra preto ou branco (o que for melhor), com selo AA / AAA / falha. Identifique problemas de acessibilidade antes do lançamento.
Cada byte permanece no seu dispositivo. Cálculos OKLCH, geração de harmonia, derivação de escala e exportação PNG rodam todos como JavaScript localmente. Abra o DevTools → Network e verifique zero requisições de saída.
Quatro passos de uma única cor base até uma paleta completa pronta para tokens de design.
Clique na caixa de cor, cole um HEX ou clique em Base aleatória para se inspirar. A ferramenta centraliza toda a paleta nessa cor — tanto as amostras de harmonia quanto a escala tonal de 11 passos.
O padrão é Análoga — três cores dentro de 30° da base, perfeito para paletas de marca tranquilas. Complementar para destaques de contraste. Triádica / Tetrádica para marcas editoriais / lúdicas. Monocromática para sistemas tonais de um único matiz. Tudo calculado em OKLCH para que se mantenham com brilho uniforme.
Clique no ícone de cadeado em qualquer amostra que queira manter, depois pressione Espaço (ou clique em Re-rolar) para variar o restante dentro da harmonia. Itere rápido. Edite qualquer amostra diretamente clicando em seu campo HEX se quiser cravar um valor exato.
Copie a saída CSS (propriedades personalizadas), Tailwind v4 (bloco @theme), map SCSS ou tokens de design JSON. Ou clique em Baixar PNG para uma faixa de amostras 1200×200 pronta para colocar em um briefing de design.
Quatro cenários comuns em que uma ferramenta de paleta OKLCH com privacidade em primeiro lugar supera o ajuste manual de códigos hex no Figma.
Você tem uma cor de marca e precisa de um sistema em torno dela. Coloque o HEX, escolha Análoga, re-rolê até que duas cores de apoio fiquem perfeitas, trave as três. Mude para a visualização de Escala Tonal, copie o bloco @theme do Tailwind, cole no app.css do novo projeto. Tempo total: 5 minutos.
O indigo padrão do Tailwind não é a sua marca. Sua marca é #5B3FCD. Coloque-a, obtenha uma escala tonal de 11 passos que espelha perfeitamente o espaçamento do Tailwind. Copie o bloco @theme — cada bg-brand-500 / text-brand-700 simplesmente funciona.
Cada amostra mostra sua razão de contraste WCAG + selo AA/AAA. Verifique pontualmente que brand-500 atinge AA contra branco e que brand-100 permanece legível como matiz de fundo com texto brand-900. Corrija amostras problemáticas re-rolando-as individualmente.
Agências / empresas multimarca mantêm N sistemas de design paralelos, cada um com a mesma forma, mas com um matiz de marca diferente. Use o mesmo fluxo de harmonia + escala tonal para cada marca, exporte cada uma como tokens JSON, coloque no Style Dictionary. Forma consistente, identidade distinta.
As cores da sua marca nunca saem do seu dispositivo. Abra o DevTools → Network e verá zero requisições de saída durante qualquer operação.
canvas local; a imagem da amostra é gerada inteiramente na memória do navegador e baixada como Blob — nada atravessa a rede.
Leituras selecionadas sobre paletas OKLCH, sistemas de cor de marca e tokens de design.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Nosso Color Picker & Converter é para uma cor por vez — escolher / converter / copiar. Esta ferramenta é para paletas: coloque uma cor base e obtenha um sistema completo, pronto para a marca (harmonias + escala tonal) de uma só vez. É a diferença entre comprar uma única camisa e ganhar um guarda-roupa inteiro.
O HSL espaça os matizes de forma irregular (o amarelo a 60° parece muito mais brilhante que o azul a 240°, mesmo com o mesmo valor de luminosidade). Uma paleta triádica em HSL tem uma amostra que é visivelmente mais brilhante ou mais opaca que as outras. O OKLCH é perceptualmente uniforme — três amostras com a mesma luminosidade OKLCH parecem ter o mesmo brilho. Por isso todo sistema de design moderno (Apple HI, Tailwind v4, IBM Carbon) está migrando para OKLCH em harmonias e escalas.
É a escala de cor de marca no estilo Tailwind: indigo-50 (mais clara), indigo-100, indigo-200, … indigo-900, indigo-950 (mais escura). Coloque a cor da sua marca e a ferramenta gera automaticamente todos os 11 passos percorrendo a luminosidade OKLCH ao longo de uma curva fixa. O resultado é um substituto direto para qualquer token de paleta Tailwind, no matiz da sua marca.
Clique no ícone de cadeado no canto superior esquerdo de qualquer amostra — ela permanece fixa. Em seguida, clique em Re-rolar ou pressione Espaço para variar todas as amostras destravadas dentro da harmonia escolhida. É assim que você encontra uma ótima paleta: fixe a cor de marca à qual você já se comprometeu e explore variações ao redor dela.
Não. Cálculos OKLCH, geração de harmonia, derivação da escala tonal, cálculo de razão de contraste, exportação PNG e cada cópia para a área de transferência — tudo roda em JavaScript no seu dispositivo. Abra o DevTools → Network e verá zero requisições de saída. Cole as cores da sua marca, tokens de design internos, paletas sob NDA — nada sai do seu computador.