Crear paleta de colores para CSS variables con selector online
Una paleta de colores bien definida es la base de cualquier sistema de diseño coherente. Sin ella, los desarrolladores usan HEX aleatorios a discreción, creando inconsistencias visuales que acumulan deuda técnica de diseño. WikiPlus Selector de Color es el punto de partida: convierte el color de marca a HSL, define las custom properties CSS, y genera una escala de tonos sistemática que funciona en todos los componentes de tu aplicación.
De color de marca a custom properties CSS
El proceso empieza con el color de marca en HEX (lo encuentras en el dossier de identidad corporativa). Introdúcelo en WikiPlus para obtener su equivalente en HSL. Por ejemplo, el azul corporativo #0011FF de WikiPlus se expresa como hsl(237, 100%, 50%). Ahora defines las custom properties en tu CSS o en tu archivo de variables de Tailwind: --brand-h: 237; --brand-s: 100%; --brand: hsl(var(--brand-h), var(--brand-s), 50%). Este sistema permite crear variaciones manteniendo el mismo tono y saturación, solo variando la lightness.
Generar una escala de 10 tonos del color de marca
Con el H y S del color de marca fijos, crea 10 pasos de lightness desde 95 % hasta 5 %. Cada paso representa un uso diferente: el tono 50 es el color base, los tonos 40-10 son versiones más oscuras para estados hover y activo, los tonos 60-95 son versiones más claras para fondos y bordes sutiles. Por ejemplo para un azul con H=237, S=100%: --color-100: hsl(237,100%,95%); --color-200: hsl(237,100%,85%); ... --color-900: hsl(237,100%,5%). Esta nomenclatura es coherente con la escala de Tailwind y con las paletas de Radix Colors, facilitando la integración con esos ecosistemas.
Colores semánticos: primary, secondary, success, warning, danger
Además de la paleta del color de marca, un sistema de diseño completo define colores semánticos: primary (el color de marca), secondary (un color complementario o análogo), success (típicamente un verde), warning (amarillo/naranja), danger (rojo) y neutral (gris). Cada uno debe tener su escala de 10 tonos para cubrir todos los estados visuales. WikiPlus Selector de Color es la herramienta para obtener los valores H, S de cada uno de estos colores y verificar que tienen suficiente contraste con los fondos donde se van a usar. El verde de éxito sobre fondo blanco debe cumplir el ratio de contraste WCAG AA.
Modos claro y oscuro con la misma paleta HSL
El sistema de custom properties HSL hace que implementar el modo oscuro sea relativamente sencillo. En modo claro, el texto usa el tono 900 (L=5%, casi negro) y el fondo usa el tono 50 (L=95%, casi blanco). En modo oscuro, se invierten: el texto usa el tono 100 (L=95%) y el fondo usa el tono 900 (L=5%). Con una clase o atributo data-theme='dark' en el elemento html, sobrescribes las variables CSS del modo claro con los valores del modo oscuro. WikiPlus ayuda a identificar los pares de tonos con contraste suficiente para ambos modos antes de implementar.
Preguntas frecuentes
- ¿Cuántos colores debería tener una paleta para un proyecto web típico?
- Un proyecto web típico necesita: 1 color primario (marca) con escala de 10 tonos, 1 color secundario o de acento con escala de 10 tonos, 5 colores semánticos (success, warning, danger, info, neutral) cada uno con escala de 5-10 tonos, y colores de estado como focus, disabled y placeholder. En total, entre 50 y 100 valores de color que se gestionan como custom properties CSS. Empezar con menos y añadir según se necesite es mejor que definir todo desde el inicio.
- ¿Tailwind CSS es compatible con colores HSL en custom properties?
- Sí. Tailwind CSS (v3+) permite definir colores personalizados en tailwind.config.js usando cualquier valor CSS válido incluyendo HSL y custom properties. La forma recomendada para modo oscuro con Tailwind es definir los colores como variables CSS HSL y referenciarlas desde la configuración de Tailwind, permitiendo usar las clases text-primary, bg-primary, etc. con soporte automático de modo oscuro.
- ¿Cómo verifico que mi paleta es accesible para personas con daltonismo?
- Herramientas como Coblis (Color Blindness Simulator) o la función de simulación de daltonismo de Figma permiten previsualizar tu interfaz con distintos tipos de daltonismo (deuteranopia, protanopia, tritanopia). La regla principal es no usar solo el color para transmitir información crítica: combina siempre el color con texto, icono o patrón como señal adicional. El contraste suficiente (WCAG AA) también ayuda a usuarios con baja visión del color.