Qué hace esta herramienta
El selector muestra un color de tres formas a la vez: HEX para la web, RGB para pantallas y HSL para diseño. Haz clic en cualquier valor para copiarlo. Debajo de los valores obtienes diez colores relacionados: cinco tonos (el mismo matiz, cada vez más oscuro) y cinco matices (el mismo matiz, cada vez más claro).
Cómo se crean los tonos y matices
La herramienta convierte tu color a HSL y luego baja la luminosidad 10 puntos por cada tono y la sube 10 puntos por cada matiz, manteniendo el matiz y la saturación (casi) fijos. Los matices también suavizan un poco la saturación para que los pasos muy claros no se vean lavados.
Ejemplo práctico
Elige #3B82F6 (un azul medio). Sus valores son rgb(59, 130, 246) y hsl(217, 91%, 60%). Un tono más oscuro es #1D66E5; un matiz más claro es #6CA3F8.
Cuándo usar cada formato
Usa HEX en CSS y HTML, RGB cuando una API o herramienta pida los valores de los canales, y HSL cuando quieras ajustar un color por sensaciones (mueve el tono para cambiar de familia de color, o la luminosidad para variantes en modo oscuro).
Limitaciones
El selector trabaja en el espacio de color sRGB, que cubre el uso estándar de web y pantallas. Los formatos de gama amplia como Display P3 no están representados.