Elysia Tools

Explore ferramentas, exemplos, explicações visuais e guias temáticos em um espaço claro.

Categorias populares

Temas

Idioma
ZHESPTRUFRDEEN

Elysia Tools

Navegação

Design

Conversor de Cores OKLCH

· Última atualização：2026-06-18

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

Detalhes

O que esta ferramenta ajuda você a fazer

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().

Execução

Executar esta ferramenta

Preencha o formulário, execute a ferramenta e veja o resultado no mesmo lugar.

Exemplos

Exemplos compatíveis com esta ferramenta

Relacionado

Continue com ferramentas e temas relacionados

Escrito pela equipe Elysia Tools
Matemática502
Cor214
HTML/CSS86
Hue55
Espaço de cores53
RGB50
CSS48
HEX40
Lightness34
HSL26
sRGB22
Chroma21

Guia de uso da ferramenta

Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.

Fatos principais

Categoria
Design
Tipos de entrada
text, select, number
Tipo de saída
html
Cobertura de exemplos
4
API pronta
Sim

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

  1. 1Insira o código da cor de origem no campo de entrada ou ajuste diretamente os controles de Luminosidade (L), Croma (C) e Matiz (H).
  2. 2O 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.
  3. 3A 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.
  4. 4Copie 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.

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.

Perguntas frequentes

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.

Início
Ferramentas3197
Exemplos593
Visualizações461
Visualizadores de arquivos103
Temas229
Etiquetas333
Imagens, áudio e vídeo655

Ferramentas de processamento, conversão e otimização de imagens, áudio e vídeo

Matemática, datas e finanças644

Calculadoras, ferramentas numéricas, lógica de datas, estatística e finanças

Design e cor296

Ferramentas de cor, layout, gráficos, estilo visual e apoio ao design

Texto e escrita209

Ferramentas de escrita, limpeza, formatação, extração e análise de texto

Desenvolvimento e Web193

Utilitários para desenvolvedores, rede, depuração web e automação

Conversão e codificação175

Ferramentas de conversão de formatos, arquivos, unidades, arquivos compactados e codificação

Estruturar uma captura de interface, revisar e entregar ao desenvolvimento
Esboço de piano, revisão MIDI e entrega de uma demonstração de áudio
Revisão de texturas retrô e entrega de recursos
Revisão e entrega de guias de procedimento com capturas
Revisão visual de alterações responsivas e entrega de evidências

© 2026 Elysia Tools. Todos os direitos reservados.

DocumentaçãoPreçosSobreTermos de serviçoPolítica de privacidadeCookiesContato
Validação

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

Python

Exemplos de Processamento de Imagem Web Python

Exemplos de processamento de imagem Web Python usando PIL/Pillow incluindo leitura, salvamento, redimensionamento e conversão de formato

Java

Exemplos de Processamento de Imagem Android Java

Exemplos de processamento de imagem Android Java incluindo leitura/escrita, dimensionamento e conversão de formato

Kotlin

Exemplos de Processamento de Imagem Android Kotlin

Exemplos de processamento de imagem Android Kotlin incluindo leitura/escrita, dimensionamento e conversão de formato

Design

Conversor de espacos de cor

Converte uma cor entre HEX, RGB, HSL, CIELAB e Display-P3 com saida CSS e verificacao de gamut.

Design

Conversor de cores CMYK

Converte cores entre HEX, RGB, HSL e CMYK.

Design

Extrator de paleta de cores da imagem

Envia uma imagem, extrai cores dominantes e exporta tokens prontos para codigo com checagem de contraste

Design

Ferramenta de Cores Complementares Divididas

Criar contraste harmonioso com esquemas de cores complementares divididas usando uma cor base e duas cores adjacentes ao seu complemento

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°.