# 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 > Página canônica: https://elysiatools.com/pt/tools/oklch-color-converter - **Categoria:** Design - **Palavras-chave:** oklch, espaço de cor, p3, gamut, converter ## Visão geral 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()`. ## Entradas - **Entrada de cor** (text): #3b82f6 · rgb(59 130 246) · hsl(217 91% 60%) · oklch(0.62 0.19 256) - **Formato de entrada** (select) - **Luminosidade L (%)** (number): 0–100 (OKLCH 0–1) - **Croma C** (number): e.g. 0.19 (typically 0–0.4) - **Matiz H (°)** (number): 0–360 - **Gamut de referência** (select) ## 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. ## 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. ## Ferramentas relacionadas - [Conversor de espacos de cor](https://elysiatools.com/pt/tools/color-space-converter): Converte uma cor entre HEX, RGB, HSL, CIELAB e Display-P3 com saida CSS e verificacao de gamut. - [Conversor de cores CMYK](https://elysiatools.com/pt/tools/cmyk-converter): Converte cores entre HEX, RGB, HSL e CMYK. - [Extrator de paleta de cores da imagem](https://elysiatools.com/pt/tools/image-color-palette-extractor): Envia uma imagem, extrai cores dominantes e exporta tokens prontos para codigo com checagem de contraste - [Ferramenta de Cores Complementares Divididas](https://elysiatools.com/pt/tools/color-split-complement): Criar contraste harmonioso com esquemas de cores complementares divididas usando uma cor base e duas cores adjacentes ao seu complemento - [Resolvedor de nomes de cores CSS](https://elysiatools.com/pt/tools/css-color-name-resolver): Resolve qualquer cor hex para a cor nomeada CSS mais próxima com distância CIEDE2000 real e explora toda a sua família de cores. - [Visualizador de Easing e Animação CSS](https://elysiatools.com/pt/tools/css-easing-visualizer): Visualiza uma curva de easing cubic-bezier do CSS, pré-visualiza em posição/opacidade/escala, escolhe predefinições e exporta CSS - [Sincronizador de paleta Tailwind](https://elysiatools.com/pt/tools/tailwind-color-palette-sync): Insira HEX, escolha o esquema de nomes (escala 50–950 / nome único / aninhamento) e gere o fragmento theme.extend.colors do tailwind.config.ts com níveis WCAG AA/AAA. Dark mode opcional. - [Conversor Absorbância↔Transmitância (A = −log₁₀T)](https://elysiatools.com/pt/tools/absorbance-transmittance-converter): Converte nos dois sentidos entre absorbância e transmitância: A = −log₁₀(T), T = 10⁻ᴬ, %T = 100·T e A = 2 − log₁₀(%T). Aceita absorbância A, transmitância percentual %T ou transmitância fracionária T e devolve as três representações de uma vez. Referências: A=0 → %T=100; A=1 → %T=10; A=0,301 → %T=50. Absorbância negativa implicaria %T > 100 %, impossível na espectrofotometria padrão, e é rejeitada. ## Exemplos - [Exemplos de códigos de cor](https://elysiatools.com/pt/samples/color-code): Coleção de códigos de cor em vários formatos (Hex, RGB, HSL, cores com nome) para testes de validação - [Exemplos de Processamento de Imagem Web Python](https://elysiatools.com/pt/samples/web-image-processing-python): Exemplos de processamento de imagem Web Python usando PIL/Pillow incluindo leitura, salvamento, redimensionamento e conversão de formato - [Exemplos de Processamento de Imagem Android Java](https://elysiatools.com/pt/samples/android-image-processing-java): Exemplos de processamento de imagem Android Java incluindo leitura/escrita, dimensionamento e conversão de formato - [Exemplos de Processamento de Imagem Android Kotlin](https://elysiatools.com/pt/samples/android-image-processing-kotlin): Exemplos de processamento de imagem Android Kotlin incluindo leitura/escrita, dimensionamento e conversão de formato