Utilidades
Color aleatorio
Color y paleta para un diseño, un fondo de pantalla o un estado de ánimo, con una sola pulsación.
Aa Sobre ese fondo se lee texto blanco: contraste 5,7 : 1.
Cómo elegir el color
Un color aleatorio no es solo inspiración. A veces hace falta un tono «simplemente distinto» para diferenciar datos de prueba de los reales, elegir un fondo para una tarjeta o ver cómo queda una combinación en un diseño real. El generador produce un color uniformemente aleatorio entre 16,7 millones de variantes y lo muestra de inmediato en tres modelos.
Después empieza el diseño: un mismo tono funciona de forma distinta como fondo, acento y texto. Por eso junto al color se muestra el contraste, para saber de inmediato si sirve para una etiqueta.
HEX, RGB y HSL: en qué se diferencian
HEX y RGB describen lo mismo: tres canales (rojo, verde y azul) con 256 valores cada uno. La única diferencia es la notación: #7C3AED o rgb(124, 58, 237). Esa notación es cómoda para el código, pero incómoda para las personas: no está claro cómo «desplazar» el tono sin cambiar la luminosidad.
HSL descompone el color en hue (tono en el círculo, 0–360°), saturation (saturación, 0–100 %) y lightness (luminosidad, 0–100 %). Aquí se ve la lógica: para obtener un color complementario basta con girar el tono 180°. Por eso las armonías se calculan en HSL y no en RGB.
Armonías y cuándo aplicarlas
| Esquema | Giro del tono | Dónde es adecuada |
|---|---|---|
| Complementaria | 180° | botón sobre fondo, acento en un diseño sereno |
| Análoga | ±30° | degradados, ilustraciones, transiciones suaves |
| Tríada | 120°, 240° | tres categorías de igual peso |
| Tétrada | 90°, 180°, 270° | esquemas saturados, infografía |
La regla 60-30-10 ayuda a no sobrecargar el diseño: el sesenta por ciento del área es el color principal, el treinta el de apoyo y el diez el de acento. La armonía ofrece un conjunto del que es fácil elegir esos tres papeles.
Contraste y legibilidad
La luminosidad del color se calcula con la fórmula WCAG: los canales se convierten al espacio lineal y luego se suman con pesos de 0,2126 para el rojo, 0,7152 para el verde y 0,0722 para el azul. El contraste de dos colores es la relación (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminosidad del color más claro.
El umbral para el texto normal es 4,5 : 1 (nivel AA); para el texto grande, 3 : 1. El generador elige de inmediato qué texto se lee mejor, blanco o negro, y muestra la relación resultante. Si el valor es inferior a 4,5, el color sirve para el fondo de una tarjeta, pero no para una etiqueta.
Un matiz importante: el contraste no tiene en cuenta el daltonismo ni sustituye una comprobación en la interfaz real. Para estados importantes, duplica el color con un icono o texto.
Qué hacer con la paleta lista
- copia los valores HEX y pégalos en las variables del tema;
- comprueba el contraste del texto con cada fondo, no solo con el principal;
- no uses más de dos colores saturados en un mismo bloque;
- guarda la combinación afortunada: no se podrá reunir de nuevo.