OKLCH a cadena CSS
Luminosidad 0.7, croma 0.15 y matiz 180 se convierten en oklch(0.7000 0.1500 180.00), u oklch(70.0000% 0.1500 180.00) si prefiere porcentajes. Todos sus tokens y hojas de estilo quedan escritos igual y con los mismos decimales. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- L
- 0,7
- C
- 0,15
- H
- 180
- L redondeado
- 0,7
- C redondeado
- 0,15
- H redondeado
- 180
- Decimales de L
- 4
OKLCH es el espacio de color perceptual detrás del módulo CSS Color Level 4 moderno, que permite a diseñadores fijar luminosidad, croma y matiz de forma independiente mientras el navegador realiza el mapeo de gama de valores fuera de rango. Los sistemas de diseño, las tuberías de tokens y los generadores de documentación necesitan un modo determinista de convertir componentes numéricos OKLCH en una cadena de función oklch() lista para pegar, que se valide igual en todo entorno. Esta capacidad acepta luminosidad en el intervalo unitario, croma no negativo, matiz en grados y un canal alfa opcional; luego redondea cada componente a decimales fijos y emite tanto la forma con luminosidad unitaria como la forma con luminosidad en porcentaje de la función CSS.
Qué es OKLCH y por qué importa una cadena CSS oklch()
OKLCH separa el color en tres ejes con sentido perceptual: L es la luminosidad del negro al blanco en una escala aproximadamente uniforme, C es el croma (cuán colorido es la muestra; cero significa plenamente acromático) y H es el ángulo de matiz en grados alrededor de la rueda de color. A diferencia del HSL legado, pasos iguales de luminosidad en OKLCH suelen verse más parejos al ojo humano, por eso los sistemas de diseño que abandonan hex y HSL suelen almacenar las rampas de marca primero en OKLCH.
El módulo CSS Color Level 4 expone ese espacio directamente con la función oklch(), de modo que una hoja de estilo puede declarar oklch(0.72 0.14 250) o la forma porcentual equivalente oklch(72% 0.14 250) sin una conversión sRGB intermedia que recortaría la gama demasiado pronto. La opacidad opcional usa la sintaxis moderna de barra oklch(L C H / A), alineada con otras funciones de color CSS.
Contrato de entrada, reglas de redondeo y forma de la respuesta
El alfa opcional entre cero y uno habilita la opacidad con barra en la cadena emitida. Esas fallas de validación no se facturan. Ejemplo: l igual a 0.7, c igual a 0.15, h igual a 180 produce oklch(0.7000 0.1500 180.00) y oklch(70.0000% 0.1500 180.00).
Con alfa 0.5 aparece la forma con barra: oklch(0.7000 0.1500 180.00 / 0.5000). El matiz no se envuelve en el intervalo de cero a trescientos sesenta, de modo que ángulos multi-vuelta o negativos intencionados sobreviven en CSS, que acepta cualquier tipo de ángulo. Combine este formateador con un convertidor aparte si necesita hex o sRGB; esta capacidad solo valida y serializa OKLCH para CSS.
Dónde un formateador OKLCH a CSS aporta valor real
Los repositorios de tokens de diseño y las tuberías style-dictionary convierten objetos de color estructurados en propiedades personalizadas CSS; un formateador compartido mantiene cada paquete del monorepo en la misma gramática oklch() en lugar de plantillas ad hoc. Las bibliotecas de componentes y la documentación de Storybook pueden mostrar muestras en vivo gobernadas por controles numéricos L, C y H mientras copian el campo css exacto a los fragmentos.
Las herramientas de accesibilidad y tematización que generan rampas claras y oscuras en OKLCH necesitan un paso final que nunca invente CSS ilegal. La validación fallida no consume saldo.
Qué puede hacer con ella
Documentación de Storybook y componentes
Maneje controles L, C y H en una demo en vivo y copie el campo css exacto a fragmentos de código que coincidan con las hojas de estilo de producción.
Generadores de temas y rampas
Tras calcular pasos OKLCH para modos claro y oscuro, formatee cada parada como oklch() válido de CSS Color Level 4 con alfa opcional en barra para superficies translúcidas.
Preguntas frecuentes
¿Cómo se formatea OKLCH como cadena CSS oklch()?
Envíe números finitos l en [0,1], c ≥ 0 y h en grados. El alfa opcional añade opacidad con barra.
¿Qué rangos son válidos para L, C, H y alfa?
La luminosidad debe estar en [0, 1], el croma no negativo, el matiz cualquier ángulo finito en grados y el alfa (si se envía) en [0, 1].
¿Cómo se controla el redondeo?
Por defecto hay cuatro decimales para L y C y dos para H. Los tokens impresos usan siempre ese ancho exacto para goldens estables.
¿La herramienta convierte OKLCH a hex o RGB?
No. Solo valida y formatea OKLCH en cadenas CSS oklch() modernas. Use una capacidad de conversión de color aparte si necesita canales sRGB o hex.
¿Cómo añado transparencia a un color oklch()?
Indique una opacidad entre 0 y 1 y se escribirá tras una barra. Con luminosidad 0.7, croma 0.15, matiz 180 y opacidad 0.5 obtiene oklch(0.7000 0.1500 180.00 / 0.5000).
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
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)Ejemplo de solicitud
{
"l": 0.7,
"c": 0.15,
"h": 180
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.oklch_to_css",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
Notas técnicas
Los rangos inválidos fallan con invalid_input en lugar de producir basura silenciosa.
Qué es OKLCH y por qué importa una cadena CSS oklch()
Las herramientas que construyen tokens, JSON de tema o CSS generado deben producir por tanto una cadena estable byte a byte: los mismos L, C y H siempre dan los mismos decimales, espacios y paréntesis. Este endpoint estandariza ese contrato: valida rangos, redondea con precisión fija y devuelve las formas CSS de L unitaria y L porcentual para que el consumidor elija el estilo de la casa sin reimplementar reglas de formato.
Contrato de entrada, reglas de redondeo y forma de la respuesta
Envíe un cuerpo JSON con los números finitos obligatorios l (luminosidad en el intervalo cerrado de cero a uno), c (croma mayor o igual que cero) y h (matiz en grados, cualquier ángulo finito). Los enteros opcionales l_decimals, c_decimals y h_decimals (cada uno de cero a diez) sustituyen los valores por defecto de cuatro, cuatro y dos decimales respectivamente; el alfa, cuando está presente, siempre se imprime con cuatro decimales. Cada campo puede llegar como número JSON o como cadena numérica; campos ausentes, valores no finitos, booleanos y L o alfa fuera de rango fallan con invalid_input nombrando el campo, y el croma negativo se rechaza igual. En éxito el cuerpo repite los componentes brutos, los redondeados, los presupuestos de decimales usados, has_alpha, un campo css con la cadena oklch() de luminosidad unitaria, un campo css_percent con L en porcentaje de la misma precisión, más cadenas method, formula y message para la interfaz.
Dónde un formateador OKLCH a CSS aporta valor real
Como la implementación es parse pura de tier A, cada llamada exitosa cuesta el precio base publicado $0.002 sin tokens de modelo ni red saliente. Mantenga las solicitudes pequeñas, fije las cadenas css y css_percent en las pruebas y obtendrá literales de color CSS modernos y reproducibles para sistemas de diseño, workers en el borde y generadores de documentación sin montar una biblioteca completa de ciencia del color solo para formatear.
Casos de integración
Tuberías de tokens de diseño y variables CSS
Serialice rampas de marca OKLCH en propiedades personalizadas oklch() estables para style-dictionary, Theo o JSON de tema propio sin deriva de cadenas en coma flotante entre máquinas de CI.
Preguntas técnicas
¿Cuánto cuesta la herramienta de OKLCH a cadena CSS?
La herramienta del navegador es gratuita. Las solicitudes API usan saldo prepago KIT a $0.002 por llamada exitosa; la entrada inválida no se factura.