Conversor de cores OKLCH

• Conversão OKLCH instantânea: O conversor OKLCH atualiza todos os formatos de saída em cada movimento do controle deslizante - nenhum botão para pressionar. Ajuste Luminosidade, Croma e Matiz e obtenha instantaneamente valores HEX, RGB, HSL e OKLab. A amostra de cores em tempo real mostra exatamente como a cor OKLCH aparecerá na tela.
• Espaço de cores perceptualmente uniforme: OKLCH é um espaço de cores perceptualmente uniforme - etapas numéricas iguais correspondem a diferenças de cores percebidas iguais, ao contrário de HSL ou RGB. O conversor OKLCH facilita o trabalho com este moderno formato CSS Color Level 4 para melhores gradientes, escalas de cores e opções de cores acessíveis.
• 100% privado - sem upload: todas as conversões acontecem localmente no seu navegador usando JavaScript puro. Seus valores de cores nunca saem do seu dispositivo e nunca são enviados para nenhum servidor - seguro para projetos de clientes e sistemas de design proprietários.
• Gratuito e sem limites: converta cores OKLCH ilimitadas sem inscrição, sem assinatura e sem limites de uso. O conversor OKLCH é totalmente gratuito para sempre, sem anúncios bloqueando a interface. Inclui detecção de gama e sugestões de gama mais próximas.

• Desenvolvimento CSS moderno: os desenvolvedores front-end usam o conversor OKLCH para criar e verificar cores em CSS moderno. Com oklch() agora suportado em todos os principais navegadores, o conversor OKLCH ajuda você a escrever um código de cores mais limpo e sustentável usando o espaço de cores perceptualmente uniforme.
• Criação de gradiente suave: OKLCH produz gradientes significativamente mais suaves e visualmente mais precisos do que sRGB ou HSL. Use o conversor OKLCH para encontrar os valores corretos de luminosidade, croma e matiz para interrupções de gradiente que transitam naturalmente sem pontos médios turvos.
• Escalas de cores acessíveis: Os especialistas em acessibilidade usam o conversor OKLCH porque sua uniformidade perceptiva o torna ideal para gerar escalas de cores acessíveis. Etapas iguais na luminosidade OKLCH correspondem a etapas iguais de contraste percebido, tornando as rampas de cores compatíveis com WCAG muito mais fáceis de criar.
• Tokens de cores do sistema de design: os engenheiros de sistemas de design usam o conversor OKLCH para definir tokens de cores de uma forma perceptualmente significativa. O espaço de cores OKLCH facilita a criação de escalas de cores sistemáticas, onde cada etapa tem um peso visual consistente em todos os matizes.
• Ciência e pesquisa de cores: Pesquisadores e cientistas de cores usam o conversor OKLCH para explorar o espaço de cores OKLab/OKLCH. A ferramenta fornece valores brutos do OKLab junto com os formatos de saída padrão, tornando-a útil para a compreensão da matemática do espaço de cores e dos modelos perceptivos.
• Migração de CSS legado para moderno: ao migrar sistemas de cores hexadecimais ou rgb() herdados para oklch() moderno, use o conversor OKLCH para entender quais são os valores OKLCH equivalentes. Isso ajuda você a criar intuição para o novo espaço de cores enquanto adota gradualmente a sintaxe CSS Color Level 4.

OKLCH (Lightness-Chroma-Hue) é um espaço de cores moderno introduzido por Björn Ottosson em 2020. Faz parte do CSS Color Level 4 e foi projetado para ser perceptualmente uniforme - o que significa que mudanças numéricas iguais nos valores OKLCH produzem diferenças de cores percebidas iguais. Esta é uma melhoria significativa em relação aos espaços de cores mais antigos, como HSL e sRGB, que não são perceptivamente uniformes e podem produzir resultados visuais inconsistentes ao interpolar cores.

O conversor OKLCH oferece suporte ao pipeline OKLCH completo: ele converte entre OKLCH, OKLab (o espaço de coordenadas retangulares subjacente), sRGB linear e formatos sRGB padrão, incluindo HEX, RGB e HSL. Todas as conversões usam a matemática matricial exata de Ottosson sem aproximações.

1. Ajuste os controles deslizantes OKLCH: Defina Luminosidade (L: 0-1), Croma (C: 0-0,4+) e Matiz (H: 0-360°) usando os controles deslizantes interativos ou entradas numéricas. Você também pode clicar em qualquer chip de cor de amostra para carregar instantaneamente um valor OKLCH predefinido. A transparência alfa é suportada para cores semitransparentes.
2. A conversão é executada em tempo real: à medida que você ajusta qualquer controle deslizante, o valor OKLCH é convertido por meio do OKLab para sRGB linear e depois para os formatos HEX, RGB e HSL. Todos os valores são atualizados instantaneamente sem nenhum botão para pressionar. A amostra de cores mostra uma visualização da cor convertida.
3. Verificação de gama realizada automaticamente: O conversor OKLCH detecta automaticamente se a cor está fora da gama sRGB. Se isso acontecer, um aviso será exibido junto com a cor da gama mais próxima obtida pela redução do croma, mantendo a luminosidade e o matiz constantes.
4. Copie qualquer valor: Clique no botão Copiar próximo a qualquer linha de saída ou cartão de formato para copiar esse valor específico ou use “Copiar todos os valores” para copiar os dados de cores completos, incluindo os componentes brutos do OKLab.

• Luminosidade (L): Varia de 0 (preto) a 1 (branco). Ao contrário da leveza HSL, a leveza OKLCH corresponde de perto à percepção humana. Uma luminosidade de 0,5 parece visualmente a meio caminho entre o preto e o branco, independentemente do matiz ou croma.
• Croma (C): Controla a intensidade ou saturação da cor. A maioria das cores sRGB tem valores de croma entre 0 e 0,25, embora alguns roxos profundos e cianos possam atingir até 0,3. Valores acima de 0,3 têm cada vez mais probabilidade de estar fora da gama sRGB. O máximo teórico para o croma OKLCH é ilimitado.
• Matiz (H): O ângulo de cor de 0 a 360 graus, correspondendo aos mesmos ângulos de matiz do OKLab. 0° = vermelho/rosa, 90° = amarelo, 180° = verde, 270° = azul. Os matizes OKLCH são perceptualmente uniformes - passos angulares iguais produzem diferenças de matiz percebidas iguais.
• Alfa (A): Controla a transparência de 0 (totalmente transparente) a 1 (totalmente opaco). O valor alfa é passado pelo pipeline de conversão para todos os formatos de saída, para que você possa usar a cor resultante em qualquer contexto CSS que exija transparência.

OKLCH vs HSL: HSL não é perceptualmente uniforme - duas cores com a mesma luminosidade HSL podem parecer dramaticamente diferentes em brilho (por exemplo, amarelo em L=50% parece muito mais brilhante que azul em L=50%). OKLCH corrige esse problema fundamental. O HSL também produz pontos médios turvos ao interpolar entre duas cores, enquanto os gradientes OKLCH mantêm saturação e qualidade visual consistentes.

OKLCH vs LCH: LCH (baseado em CIE L*a*b*) está disponível em CSS há mais tempo, mas tem uma falha significativa - ele pode produzir cores inválidas ao medir a linearidade de matiz. O OKLCH foi projetado especificamente para ser mais robusto e representar melhor como o sistema visual humano percebe as cores. Ambos são suportados em CSS moderno, mas OKLCH é a escolha recomendada para novos projetos.

OKLCH vs sRGB: sRGB é o espaço de cores padrão para conteúdo da web, mas depende do dispositivo e não é perceptualmente uniforme. OKLCH é um espaço de cores independente de dispositivo que pode representar cores fora da gama sRGB (exibições de gama ampla). O conversor OKLCH ajuda você a entender quando suas cores excedem sRGB e mostra a alternativa de gama mais próxima.