Selector de colores/ HEX · RGB · HSL
Selecciona, convierte y explora colores. Soporta HEX, RGB, HSL, HSV con escalas de luminosidad y paletas armonicas.
Valores de color
Colores predefinidos
Escala de luminosidad
Armonías de color
Complementario
Análogo
Triádico
¿Esta herramienta resolvió tu problema?
Preguntas frecuentes
Que formatos de color admite esta herramienta?
La herramienta admite HEX (ej. #6366f1), RGB (ej. rgb(99, 102, 241)), HSL (ej. hsl(239, 84%, 67%)) y HSV/HSB. Puedes escribir cualquiera de estos formatos en el campo de entrada y se analizara y convertira automaticamente.
Que es el cuentagotas (EyeDropper)?
El boton de cuentagotas te permite hacer clic en cualquier parte de tu pantalla para seleccionar el color de ese pixel. Utiliza la API EyeDropper del navegador, disponible en Chrome, Edge y Opera. Aun no es compatible con Firefox ni Safari.
Que es una escala de luminosidad?
La escala de luminosidad muestra 9 tonos de tu color elegido, desde muy oscuro (10% de luminosidad) hasta muy claro (90%), todos con el mismo tono y saturacion. Es util para construir paletas de colores consistentes en diseno UI.
Que son las armonias de color?
Las armonias de color son conjuntos de colores que se ven visualmente agradables juntos. Los colores complementarios estan opuestos en la rueda de color (alto contraste). Los colores analogos son vecinos (armoniosos). Los triadicos son tres colores equidistantes (vibrantes y equilibrados).
Cual es la diferencia entre HSL y HSV?
Ambos usan tono (H) y saturacion (S), pero el tercer componente difiere. HSL usa luminosidad L (0%=negro, 50%=color puro, 100%=blanco). HSV usa valor V (0%=negro, 100%=brillo maximo). HSV se usa a menudo en herramientas creativas como Photoshop; HSL es mas comun en CSS.
Como uso estos colores en CSS?
Copia el valor HEX (ej. #6366f1) para el uso mas comun. Usa el valor RGB para rgba() con transparencia: rgba(99, 102, 241, 0.5). Usa el valor HSL cuando quieras ajustar programaticamente la luminosidad o saturacion en propiedades CSS personalizadas.