Conversor de Cores OKLCH

Converte entre HEX, RGB, HSL, OKLCH e Display-P3 com a matemática do CSS Color 4, com leitura de luminosidade/croma/matiz, verificação de gamut sRGB e Display-P3, e sugestão de recorte fora do gamut

Cole qualquer cor (HEX, rgb(), hsl() ou oklch()) ou ajuste OKLCH L/C/H diretamente. A ferramenta converte entre todos os espaços modernos com as matrizes do CSS Color 4 e informa:

  • Valores HEX, sRGB 8-bit, sRGB linear, HSL, XYZ D65, OKLab e OKLCH
  • Representação Display-P3
  • Se a cor está dentro de sRGB, dentro de Display-P3 mas fora de sRGB, ou fora de ambos
  • Uma sugestão de recorte por redução de croma (o OKLCH dentro-do-gamut mais próximo) quando a cor está fora de sRGB

Por que OKLCH: seu canal L corresponde à luminosidade percebida e seus C/h são croma e matiz, então ajustar luminosidade ou saturação não desloca o matiz (ao contrário do HSL). Isso torna o OKLCH o melhor espaço para paletas perceptualmente uniformes.

As saídas são CSS prontos para copiar, incluindo color(display-p3 ...) e oklch().

Exemplos de resultados

1 Exemplos

Converter um azul de marca para OKLCH e checar gamut

Mostra HEX/RGB/HSL/OKLCH/Display-P3 com diagnóstico de gamut.

Color converter with OKLCH, P3, and gamut diagnostics.
Ver parâmetros de entrada
{ "colorInput": "#3b82f6", "inputFormat": "auto", "clipMode": "auto" }

Fatos principais

Categoria
Design e cor
Tipos de entrada
text, select, number
Tipo de saída
html
Cobertura de amostras
1
API disponível
Yes

Visão geral

O Conversor de Cores OKLCH permite converter códigos de cores de forma bidirecional entre HEX, RGB, HSL, OKLCH e Display-P3 utilizando as fórmulas do CSS Color 4. A ferramenta analisa se a cor está dentro do gamut sRGB ou Display-P3 e sugere automaticamente um ajuste por redução de croma caso a cor esteja fora do espaço de cor suportado.

Quando usar

  • •Ao criar paletas de cores consistentes e acessíveis onde a luminosidade percebida precisa ser uniforme.
  • •Ao migrar cores legadas em HEX, RGB ou HSL para os novos formatos modernos do CSS como oklch() e Display-P3.
  • •Ao verificar se uma cor vibrante está fora do gamut sRGB padrão e precisa de um ajuste de croma para exibição segura na web.

Como funciona

  • •Insira o código da cor de origem no campo de entrada ou ajuste diretamente os controles de Luminosidade (L), Croma (C) e Matiz (H).
  • •O conversor aplica as matrizes de transformação do CSS Color 4 para calcular os valores equivalentes em HEX, sRGB, HSL, XYZ D65, OKLab e Display-P3.
  • •A ferramenta analisa a cobertura de gamut e, se a cor ultrapassar os limites do sRGB ou Display-P3, exibe um alerta com a sugestão de recorte por redução de croma.
  • •Copie o código CSS gerado diretamente para o seu projeto, incluindo as sintaxes modernas oklch() e color(display-p3).

Casos de uso

Desenvolvimento de sistemas de design com paletas de cores perceptualmente uniformes.
Conversão rápida de cores HEX antigas para o formato moderno oklch() para uso em CSS nativo.
Depuração e correção de cores vibrantes que estouram o gamut sRGB padrão de monitores comuns.

Exemplos

1. Conversão de Azul de Marca para OKLCH

Designer de Interface
Contexto
Um designer precisa migrar a cor azul principal da marca (#3b82f6) para o formato OKLCH para criar variações de luminosidade consistentes no CSS.
Problema
Obter os valores exatos de L, C e H para o azul da marca e garantir que ele esteja dentro do gamut sRGB.
Como usar
Insira '#3b82f6' no campo de entrada de cor e selecione o formato automático.
Configuração de exemplo
colorInput: '#3b82f6', inputFormat: 'auto'
Resultado
A ferramenta exibe o valor oklch(0.62 0.19 256) e confirma que a cor está totalmente dentro do gamut sRGB.

2. Ajuste de Cor Fora do Gamut sRGB

Desenvolvedor Front-end
Contexto
Um desenvolvedor deseja usar um verde extremamente vibrante definido em OKLCH, mas precisa garantir que ele não quebre em telas sRGB comuns.
Problema
A cor oklch(0.85 0.3 140) está fora do gamut sRGB e precisa de um ajuste seguro.
Como usar
Insira 'oklch(0.85 0.3 140)' na entrada de cor e observe o diagnóstico de gamut.
Configuração de exemplo
colorInput: 'oklch(0.85 0.3 140)', clipMode: 'srgb'
Resultado
O conversor identifica que a cor está fora do sRGB e sugere uma versão recortada com croma reduzido, mantendo a luminosidade de 85% e o matiz de 140°.

Testar com amostras

design
Exemplos de códigos de cor
Coleção de códigos de cor em vários formatos (Hex, RGB, HSL, cores com nome) para testes de validação
title token color
sample

Hubs relacionados

Ferramentas de conversao de espacos de cor para web e impressao
Ferramentas reunidas para conversao de espacos de cor entre web e impressao em um unico hub.
Geradores de efeitos CSS, paletas e tokens de design
Ferramentas reunidas para efeitos visuais em CSS, construcao de paletas e geracao de tokens de design em um unico hub.
Ferramentas de auditoria de acessibilidade web e cores acessiveis
Revise problemas WCAG, ordem de leitor de tela, falhas de contraste, risco para deficiencia de visao de cores e escolhas de cor acessivel em um unico hub para fluxos de acessibilidade web.
Ferramentas de Design de Cor e Conversão de Espaços de Cor
Comparar conversores de cor, geradores de paletas, ferramentas de harmonia, verificadores de acessibilidade e utilitários de ajuste de cor em um só lugar para designers e desenvolvedores.

FAQ

O que é o espaço de cor OKLCH?

É um espaço de cor baseado na percepção humana, onde a luminosidade (L) e o croma (C) podem ser ajustados sem alterar o matiz (H).

Como funciona a verificação de gamut nesta ferramenta?

Ela calcula se as coordenadas da cor estão dentro dos limites físicos dos espaços sRGB e Display-P3, indicando se a cor será exibida corretamente.

O que significa a sugestão de recorte por redução de croma?

Quando uma cor está fora do gamut sRGB, a ferramenta reduz apenas o croma (saturação) até que ela caiba no espaço sRGB, mantendo a luminosidade e o matiz intactos.

Posso converter cores inserindo valores individuais de L, C e H?

Sim, você pode ajustar os campos numéricos de Luminosidade, Croma e Matiz diretamente para gerar as conversões em tempo real.

A ferramenta suporta o formato Display-P3?

Sim, ela gera a representação CSS color(display-p3 ...) e verifica se a cor está contida neste gamut de ampla gama de cores.

Documentação da API

Ponto final da solicitação

POST /pt/api/tools/oklch-color-converter

Parâmetros da solicitação

Nome do parâmetro Tipo Requerido Descrição
colorInput text Não -
inputFormat select Não -
L number Não -
C number Não -
H number Não -
clipMode select Não -

Formato de resposta

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Documentação de MCP

Adicione este ferramenta à sua configuração de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-oklch-color-converter": {
      "name": "oklch-color-converter",
      "description": "Converte entre HEX, RGB, HSL, OKLCH e Display-P3 com a matemática do CSS Color 4, com leitura de luminosidade/croma/matiz, verificação de gamut sRGB e Display-P3, e sugestão de recorte fora do gamut",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=oklch-color-converter",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Você pode encadear várias ferramentas, ex: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máx 20 ferramentas.

Se você encontrar algum problema, por favor, entre em contato conosco em [email protected]