🎨
Conversor de Colores
Vista previa en vivoConvierte entre formatos de color HEX, RGB y HSL.
Supports #hex, rgb(r,g,b), hsl(h,s,l)
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
HSV
hsv(217, 76%, 96%)
Modelos de color explicados (HEX/RGB/HSL)
Los modelos de color son sistemas matemáticos para representar colores. HEX (Hexadecimal) es un código de 6 dígitos usado en HTML y CSS, que representa los componentes Rojo, Verde y Azul. RGB (Rojo, Verde, Azul) usa valores decimales de 0 a 255 para cada canal, a menudo usado en imagen digital.
HSL (Tono, Saturación, Luminosidad) es más intuitivo para los humanos, ya que describe el color en términos de su pigmento base (Tono), intensidad (Saturación) y brillo (Luminosidad). Entender estos modelos ayuda a elegir el formato correcto para tus necesidades de diseño y desarrollo, asegurando consistencia en diferentes plataformas y dispositivos.
Cómo usar esta herramienta
- Usa el selector de color visual para seleccionar un color arrastrando el cursor en el cuadrado de saturación/brillo y el deslizador de tono.
- Alternativamente, ingresa un valor específico en el campo "Entrada manual" (soporta formatos #hex, rgb o hsl).
- Observa el cuadro "Vista previa" para ver el color seleccionado en tiempo real.
- Ve los valores convertidos en las tarjetas HEX, RGB, HSL y HSV a continuación.
- Haz clic en el icono "Copiar" en cualquier tarjeta para guardar ese formato específico en tu portapapeles.
Casos de uso comunes
- Diseño web: Convierte colores de herramientas de diseño (a menudo RGB/HSL) a códigos HEX para usar en hojas de estilo CSS.
- Consistencia de marca: Asegúrate de que los colores de tu marca estén representados con precisión en diferentes formatos digitales y medios.
- Desarrollo de UI: Genera rápidamente variaciones más claras u oscuras de un color base ajustando el valor de Luminosidad en HSL.
- Pruebas de accesibilidad: Usa la vista previa para verificar si los colores elegidos proporcionan suficiente contraste para texto legible y elementos de UI.
Consejos profesionales
- Usa HSL al diseñar componentes de UI como botones, ya que facilita la creación de estados hover simplemente ajustando el valor de luminosidad.
- Al trabajar con transparencia en CSS, prefiere
rgba()ohsla()para mejor legibilidad y control sobre el canal alfa. - Siempre verifica las relaciones de contraste de color para asegurarte de que tus diseños sean accesibles para usuarios con discapacidades visuales.