OKLCH para string CSS
Luminosidade 0.7, croma 0.15 e matiz 180 viram oklch(0.7000 0.1500 180.00), ou oklch(70.0000% 0.1500 180.00) se você preferir porcentagens. Todos os seus tokens e folhas de estilo ficam escritos igual, com os mesmos decimais. Grátis no seu navegador.
- Grátis
- Funciona no seu navegador
- Sem cadastro
- Seus dados não saem do seu aparelho
Executar grátis
Exemplo resolvido
- L
- 0,7
- C
- 0,15
- H
- 180
- L arredondado
- 0,7
- C arredondado
- 0,15
- H arredondado
- 180
- Casas decimais de L
- 4
OKLCH é o espaço de cor perceptual por trás do CSS Color Module Level 4 moderno, permitindo que designers definam luminosidade, croma e matiz de forma independente enquanto o navegador faz o mapeamento de gamut de valores fora da faixa. Sistemas de design, pipelines de tokens e geradores de documentação precisam de um modo determinístico de transformar componentes numéricos OKLCH em uma string da função oklch() pronta para colar, validada da mesma forma em qualquer ambiente. Esta capacidade aceita luminosidade no intervalo unitário, croma não negativo, matiz em graus e um canal alfa opcional; em seguida arredonda cada componente para casas decimais fixas e emite tanto a forma com luminosidade unitária quanto a forma com luminosidade em porcentagem da função CSS.
O que é OKLCH e por que uma string CSS oklch() importa
OKLCH separa a cor em três eixos com sentido perceptual: L é a luminosidade do preto ao branco em uma escala aproximadamente uniforme, C é o croma (quão colorida é a amostra; zero significa plenamente acromático) e H é o ângulo de matiz em graus ao redor da roda de cores. Diferente do HSL legado, passos iguais de luminosidade em OKLCH tendem a parecer mais uniformes aos olhos humanos, por isso sistemas de design que saem de hex e HSL costumam guardar as rampas de marca primeiro em OKLCH.
O CSS Color Module Level 4 expõe esse espaço diretamente com a função oklch(), de modo que uma folha de estilo pode declarar oklch(0.72 0.14 250) ou a forma percentual equivalente oklch(72% 0.14 250) sem uma conversão sRGB intermediária que cortaria o gamut cedo demais. A opacidade opcional usa a sintaxe moderna de barra oklch(L C H / A), alinhada a outras funções de cor CSS.
Contrato de entrada, regras de arredondamento e forma da resposta
O alfa opcional entre zero e um habilita opacidade com barra na string emitida. Exemplo: l igual a 0.7, c igual a 0.15, h igual a 180 produz oklch(0.7000 0.1500 180.00) e oklch(70.0000% 0.1500 180.00). Com alfa 0.5 aparece a forma com barra: oklch(0.7000 0.1500 180.00 / 0.5000).
O matiz não é envolvido no intervalo de zero a trezentos e sessenta, de modo que ângulos multi-volta ou negativos intencionais sobrevivem no CSS, que aceita qualquer tipo de ângulo. Combine este formatador com um conversor separado se precisar de hex ou sRGB; esta capacidade apenas valida e serializa OKLCH para CSS.
Onde um formatador OKLCH para CSS realmente ajuda
Repositórios de tokens de design e pipelines style-dictionary convertem objetos de cor estruturados em propriedades personalizadas CSS; um formatador compartilhado mantém cada pacote do monorepo na mesma gramática oklch() em vez de modelos ad hoc. Bibliotecas de componentes e documentação Storybook podem exibir amostras ao vivo guiadas por controles numéricos L, C e H enquanto copiam o campo css exato para os trechos. Ferramentas de acessibilidade e de temas que geram rampas claras e escuras em OKLCH precisam de um passo final que nunca invente CSS ilegal.
Validação falha não consome saldo.
Casos de uso
Documentação Storybook e de componentes
Controle botões L, C e H em uma demo ao vivo e copie o campo css exato para trechos de código que coincidem com as folhas de estilo de produção.
Geradores de temas e rampas
Após calcular passos OKLCH para modos claro e escuro, formate cada parada como oklch() válido de CSS Color Level 4 com alfa opcional em barra para superfícies translúcidas.
Perguntas frequentes
Como formatar OKLCH como string CSS oklch()?
Envie números finitos l em [0,1], c ≥ 0 e h em graus. O alfa opcional adiciona opacidade com barra.
Quais faixas são válidas para L, C, H e alfa?
A luminosidade deve estar em [0, 1], o croma não negativo, o matiz qualquer ângulo finito em graus e o alfa (se enviado) em [0, 1].
Como o arredondamento é controlado?
O padrão é quatro casas para L e C e duas para H. Os tokens impressos usam sempre essa largura exata para goldens estáveis.
A ferramenta converte OKLCH em hex ou RGB?
Não. Ela apenas valida e formata OKLCH em strings CSS oklch() modernas. Use uma capacidade de conversão de cor separada se precisar de canais sRGB ou hex.
Como adiciono transparência a uma cor oklch()?
Informe uma opacidade entre 0 e 1 e ela será escrita depois de uma barra. Com luminosidade 0.7, croma 0.15, matiz 180 e opacidade 0.5 você recebe oklch(0.7000 0.1500 180.00 / 0.5000).
Ferramentas relacionadas
Para desenvolvedores — acesso via API
Tudo nesta página está disponível via API. Esta seção é para equipes que querem integrar a ferramenta aos próprios sistemas; quem não precisa disso pode simplesmente usar a ferramenta acima.
Endpoint
Autenticação por token Bearer. Um único POST coloca a tarefa na fila; o resultado chega por webhook ou link assinado.
Chame do seu código
curl -X POST https://api.kit.forhosting.com/color/oklch-to-css \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"l":0.7,"c":0.15,"h":180}'const res = await fetch("https://api.kit.forhosting.com/color/oklch-to-css", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"l": 0.7,
"c": 0.15,
"h": 180
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/oklch-to-css",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"l": 0.7,
"c": 0.15,
"h": 180
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/oklch-to-css", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"l":0.7,"c":0.15,"h":180}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"l":0.7,"c":0.15,"h":180}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/oklch-to-css", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemplo de requisição
{
"l": 0.7,
"c": 0.15,
"h": 180
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.oklch_to_css",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}A API é assíncrona: cada chamada devolve um task_id na hora. Se preferir polling, consulte o status a até 1 requisição por segundo.
Preço
Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.
Erros
| HTTP | Código | O que significa |
|---|---|---|
401 | unauthorized | Token ausente ou inválido. Confira o header Authorization. |
402 | insufficient_balance | Saldo insuficiente para esta tarefa. Faça uma recarga e tente de novo. |
404 | unknown_type | Esse tipo de tarefa não existe. Confira o campo type no catálogo. |
429 | rate_limited | Muitas requisições em pouco tempo. Espere um instante e tente de novo. |
Notas técnicas
Faixas inválidas falham com invalid_input em vez de produzir lixo silencioso.
O que é OKLCH e por que uma string CSS oklch() importa
Ferramentas que montam tokens, JSON de tema ou CSS gerado precisam, portanto, produzir uma string estável byte a byte: os mesmos L, C e H sempre geram os mesmos decimais, espaços e parênteses. Este endpoint padroniza esse contrato: valida faixas, arredonda com precisão fixa e devolve as formas CSS de L unitária e L percentual para que o consumidor escolha o estilo da casa sem reimplementar regras de formatação.
Contrato de entrada, regras de arredondamento e forma da resposta
Envie um corpo JSON com os números finitos obrigatórios l (luminosidade no intervalo fechado de zero a um), c (croma maior ou igual a zero) e h (matiz em graus, qualquer ângulo finito). Os inteiros opcionais l_decimals, c_decimals e h_decimals (cada um de zero a dez) substituem os padrões de quatro, quatro e duas casas decimais respectivamente; o alfa, quando presente, sempre é impresso com quatro casas. Cada campo pode chegar como número JSON ou como string numérica; campos ausentes, valores não finitos, booleanos e L ou alfa fora da faixa falham com invalid_input nomeando o campo, e croma negativo é rejeitado da mesma forma. Essas falhas de validação não são cobradas. Em sucesso o corpo ecoa os componentes brutos, os arredondados, os orçamentos de decimais usados, has_alpha, um campo css com a string oklch() de luminosidade unitária, um campo css_percent com L em porcentagem da mesma precisão, mais as strings method, formula e message para a interface.
Onde um formatador OKLCH para CSS realmente ajuda
Como a implementação é parse pura de tier A, cada chamada bem-sucedida custa o preço base publicado US$ 0,002 sem tokens de modelo e sem rede de saída. Mantenha as solicitações pequenas, fixe as strings css e css_percent nos testes e você obtém literais de cor CSS modernas e reproduzíveis para sistemas de design, workers na borda e geradores de documentação sem montar uma biblioteca completa de ciência da cor só para formatar.
Casos de integração
Pipelines de tokens de design e variáveis CSS
Serialize rampas de marca OKLCH em propriedades personalizadas oklch() estáveis para style-dictionary, Theo ou JSON de tema próprio sem deriva de strings de ponto flutuante entre máquinas de CI.
Perguntas técnicas
Quanto custa a ferramenta de OKLCH para string CSS?
A ferramenta do navegador é gratuita. Solicitações API usam saldo pré-pago KIT a US$ 0,002 por chamada bem-sucedida; entrada inválida não é cobrada.