Paleta a código

De una lista de colores a código que funciona

Una paleta que solo vive como muestras en un archivo de diseño tarde o temprano hay que volver a teclearla en código, y ahí es donde se cuelan las erratas: falta un carácter en un código hex y es invisible hasta que algo pinta el tono equivocado. Esta herramienta convierte una lista sencilla de colores en la sintaxis exacta que usa tu proyecto, para que los valores solo tengan que estar bien una vez.

Poner nombre a tus colores

Escribe solo un color en una línea, como #0f9e8e, y recibe un nombre automático basado en el color estándar más cercano, como teal-1. Escribe nombre: color, como primario: #0f9e8e, y se usa tu propio nombre, limpiado en un identificador seguro. Mezclar las dos formas en la misma lista no supone ningún problema.

Los formatos

• Variables CSS: un bloque :root con propiedades personalizadas, usable en cualquier sitio del CSS moderno.
• Variables SCSS: variables Sass normales para proyectos que aún usan SCSS.
• Configuración de Tailwind: un objeto de colores formateado para la sección theme de un archivo de configuración de Tailwind.
• Objeto JavaScript: variables que puedes importar directamente en un script o un archivo de tokens de diseño.
• JSON: un mapa sencillo de nombre a valor, útil para herramientas de diseño, API o cualquier sistema que lea JSON.

Funciona cualquier color CSS

Escribe hex, rgb(), hsl() o un nombre de color CSS; cada uno se normaliza a un código hex, incluido un canal alfa si el color tiene transparencia. Las líneas que no son un color válido simplemente se omiten, así que un encabezado o comentario suelto en tu lista no rompe el resultado.

Límites

Esto solo da formato a colores; no genera un sistema de diseño completo con espaciado, tipografía o matices de cada color. Para una escala de tintes y matices de un color, mira el generador de tonos de color. Todo se procesa en tu navegador.