Selecciona colores con sliders HEX, RGB y HSL bidireccionales y armonías de color
Complementario
Triádico
Análogo
vs Blanco
3.68:1
vs Negro
5.71:1
Un Color Picker completo va más allá de seleccionar un color en una paleta: necesitas poder editar el color en el espacio de color más conveniente para tu caso de uso, entender las relaciones entre colores y verificar que cumple los requisitos de contraste de accesibilidad. Esta herramienta ofrece tres formas de entrada bidireccional: HEX (el formato estándar en web y diseño), RGB (rojo, verde, azul — el modelo de pantallas), y HSL (matiz, saturación, luminosidad — el más intuitivo para ajustes humanos). Los tres formatos se sincronizan automáticamente: cambia cualquier slider o campo de texto y todos los demás se actualizan. El panel de armonías de color calcula relaciones basadas en la teoría del color: el complementario (opuesto en la rueda de color, máximo contraste), los triádicos (120° de separación, paletas vibrantes y equilibradas) y los análogos (30° de separación a cada lado, combinaciones suaves y armoniosas). El panel de contraste calcula el ratio de contraste WCAG 2.1 contra fondo blanco y negro.
¿Cuál es la diferencia entre RGB y HSL?
RGB (Red, Green, Blue) describe un color por las cantidades de rojo, verde y azul que lo componen — el modelo nativo de las pantallas. HSL (Hue, Saturation, Lightness) describe el color por su matiz (posición en la rueda de color, 0-360°), saturación (intensidad del color, 0-100%) y luminosidad (qué tan claro u oscuro, 0-100%). HSL es más intuitivo para diseñadores: para oscurecer un color solo reduces la luminosidad; para crear una versión más apagada, reduces la saturación.
¿Qué es el color complementario y cuándo usarlo?
El color complementario es el que está exactamente opuesto en la rueda de color (180° de diferencia en HSL). Los colores complementarios crean el máximo contraste visual y vibración cuando se usan juntos, lo que los hace ideales para llamadas a la acción (CTA) donde el botón debe destacar sobre el fondo. Se recomienda usarlos en proporciones 70-30 o 80-20.
¿Qué son los colores análogos?
Los colores análogos son los que están adyacentes en la rueda de color (típicamente a 30° de diferencia a cada lado del color base). Crean paletas armoniosas y naturales porque se perciben como 'del mismo grupo' — como los tonos de un atardecer (naranja, amarillo, dorado) o un bosque (verde, verde-azulado, amarillo-verdoso). Son ideales para diseños con sensación de cohesión visual.
¿Cuáles son los requisitos de contraste WCAG?
Las Web Content Accessibility Guidelines (WCAG) 2.1 definen niveles de contraste mínimo entre texto y fondo: Nivel AA requiere ratio ≥ 4.5:1 para texto normal (<18pt o <14pt bold) y ≥ 3:1 para texto grande. Nivel AAA requiere ≥ 7:1 para texto normal y ≥ 4.5:1 para texto grande. Un ratio de 21:1 es el máximo (negro sobre blanco).
¿Por qué el HEX de 3 caracteres existe?
La notación HEX corta (#RGB) es una abreviatura donde cada dígito se expande duplicándolo: #F0A equivale a #FF00AA. Solo funciona cuando cada componente del color tiene ambos dígitos iguales. Es útil para colores 'puros' como #F00 (rojo puro), #0F0 (verde puro), #FFF (blanco), #000 (negro) o #333 (gris oscuro).