Selector de color y generador de paletas

Cualquier color en pantalla puede describirse de tres maneras distintas, y esta herramienta las mantiene sincronizadas: HEX es la notación abreviada de CSS y de las herramientas de diseño; RGB indica cuánta luz roja, verde y azul se combina para producir el color; y HSL (matiz, saturación y luminosidad) lo describe como lo piensa una persona: qué tono es, cuán vivo y cuán claro u oscuro. Arrastra la muestra de color nativa, escribe un código HEX o ajusta directamente cualquier campo R/G/B o H/S/L, y todos los demás se actualizan al instante, de modo que puedes pasar de una forma de pensar el color a otra sin hacer cuentas.

La rueda cromática es la base de seis reglas clásicas de armonía, todas generadas automáticamente a partir del color base que elijas. La complementaria empareja un color con su opuesto para lograr el máximo contraste; la análoga toma los vecinos en la rueda para un aspecto sereno y cohesionado; la triádica y la tetrádica reparten tres o cuatro colores a distancias iguales para una paleta viva pero equilibrada; la complementaria dividida suaviza el par complementario usando los dos colores contiguos al opuesto en lugar del opuesto mismo; y la monocromática se queda en un solo matiz y varía solo la luminosidad, a menudo la opción más segura para una interfaz que necesita un color de marca coherente en varios tonos.

No todas las buenas paletas parten de la teoría del color: a veces solo quieres ver qué sale. El generador de paletas aleatorias (pulsa la barra espaciadora o haz clic en Generar) crea cinco colores a la vez, con matices y luminosidades ajustados para evitar resultados apagados o demasiado pastel. Haz clic en el candado de cualquier muestra que quieras conservar y vuelve a generar: solo cambian los colores desbloqueados, así que puedes construir una paleta poco a poco, igual que en herramientas como Coolors. Haz clic en una muestra para copiar su código HEX, o usa los botones bajo la paleta para copiar todo el conjunto como propiedades personalizadas CSS, variables SCSS, un fragmento de Tailwind o un array JSON, o para exportar un archivo de muestras .ase de Adobe para Illustrator y Photoshop. También puedes extraer una paleta de cualquier imagen (se procesa en local y nunca se sube) y guardar en tu navegador las paletas que te gusten para más adelante.

Elegir un color bonito no es lo mismo que elegir uno utilizable: un texto cuyo color tenga una luminosidad demasiado parecida a la de su fondo puede ser ilegible, y las Pautas de Accesibilidad para el Contenido Web (WCAG) fijan umbrales concretos: una relación de contraste de al menos 4,5:1 para texto normal para cumplir el nivel AA, y 7:1 para el nivel AAA, más estricto. El comprobador de contraste calcula la relación exacta entre el color elegido y el texto blanco y negro con la misma fórmula de luminancia relativa que define la especificación WCAG, e indica si cada combinación cumple, para que detectes un botón o un título con poco contraste antes de publicarlo y no después.