Hex a variable CSS

Los equipos siguen guardando los colores de marca como códigos hex en Figma, PDF de marca y paletas JSON, y luego necesitan una sola línea determinista que puedan pegar en :root o en un bloque de tema. Esta herramienta envuelve un color hex validado en una declaración de propiedad personalizada con nombre: usted elige el identificador, el solver normaliza el hex a seis dígitos en minúsculas con almohadilla, comprueba que el nombre sea un ident con guiones legal y devuelve la línea de definición --name: #rrggbb;. Los códigos hex inválidos y los identificadores ilegales fallan con invalid_input en lugar de emitir CSS que no analizaría. La misma lógica pura se ejecuta gratis en el navegador y en la API, de modo que los tokens generados no divergen entre vistas previas locales, integración continua y hojas de producción.

Qué es una propiedad personalizada CSS y por qué envolver un color hex

Usted escribe --brand-primary: #3366ff; en :root o en cualquier selector y luego consume el token con color: var(--brand-primary) en botones, enlaces y superficies. Esa única fuente de verdad es cómo los sistemas de diseño mantienen de acuerdo un hex de Figma, una paleta JSON y una hoja de producción sin cazar decenas de literales incrustados. Un paso dedicado de hex a variable CSS estandariza el contrato: validar el color, validar el nombre, expandir la abreviatura, pasar el hex de seis dígitos a minúsculas, conservar la capitalización del ident y emitir un espacio tras los dos puntos más un punto y coma final.

Contrato de entrada, reglas de validación y la línea de definición

Se recorta el espacio en blanco circundante. En caso de éxito el hex se devuelve siempre como #rrggbb en minúsculas, la abreviatura de tres dígitos se expande (#abc pasa a #aabbcc) y el nombre se devuelve con prefijo -- conservando la capitalización original de las letras. El campo principal declaration es la propia línea de definición: --brand-primary: #3366ff;. Envíe un cuerpo JSON con dos cadenas obligatorias. hex es el color: tres o seis dígitos hexadecimales, almohadilla inicial opcional, letras en mayúsculas o minúsculas. Los alias color, value, text, input y code los acepta el mismo solver. name es el ident de la propiedad personalizada, con o sin -- inicial; los alias incluyen variable, var, var_name, custom_property e ident. La misma cadena se parte en variable y value para tablas de tokens, y root_block la envuelve como :root { --brand-primary: #3366ff; } para sembrar una hoja con un solo pegado. Los canales enteros r, g y b, más los indicadores shorthand, had_hash y had_prefix, describen la forma original. La validación fallida —campo ausente, hex vacío tras una almohadilla, longitud distinta de tres o seis, caracteres no hex, prefijo de programación 0x, espacios dentro del nombre, prefijo $ de Sass, envoltorio var(), ident que no empieza por letra o guion bajo, o un nombre de más de sesenta y cuatro caracteres incluido el prefijo— devuelve invalid_input nombrando el campo y nunca se cobra. El precio es un fijo $0.002 por petición exitosa.

Dónde un formateador de hex a variable 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, y la validación fallida no consume saldo.