Sobre esta herramienta
Conversión HEX ↔ RGB ↔ HSL.
El Conversor de Colores traduce valores de color entre los cuatro formatos de color web más usados: HEX (#RRGGBB), RGB (rojo 0–255, verde 0–255, azul 0–255), HSL (tono 0–360°, saturación 0–100%, luminosidad 0–100%) y HSB/HSV (tono, saturación, brillo). Introduce un valor en cualquier formato y todos los demás se actualizan. Una muestra de color muestra el resultado visualmente.
Ejemplo
HEX de entrada: #0052ff
RGB: rgb(0, 82, 255) · HSL: hsl(221°, 100%, 50%)
Cómo usar
- Introduce un color en cualquier formato (HEX, RGB, HSL o HSB).
- Todos los demás valores de formato se actualizan simultáneamente.
- Ve la muestra de color en vivo.
- Copia cualquier formato con un clic.
Características
- HEX (#RRGGBB y abreviatura de 3 caracteres)
- RGB (0–255)
- HSL (tono, saturación, luminosidad)
- HSB/HSV (tono, saturación, brillo)
- Muestra de color en vivo
Cuándo usar esta herramienta
Desarrolladores frontend que traducen especificaciones de diseño en Figma (en HEX) a valores CSS HSL para funciones hsl() en animaciones.
Diseñadores que comprueban si un color de marca se siente cálido o frío mirando su ángulo de tono en la rueda de colores.
Revisores de accesibilidad que encuentran el valor HEX de un color mostrado visualmente antes de comprobar su relación de contraste.
Autores CSS que convierten valores RGB heredados de una hoja de estilos antigua a formato HEX para un nuevo sistema de diseño.
Preguntas frecuentes
¿Cuál es la diferencia entre HSL y HSB?+
Ambos usan Tono (0–360°) y Saturación (0–100%). La Luminosidad HSL es 50% para un color puro, 0% para negro, 100% para blanco. El Brillo HSB es 100% para un color puro, 0% para negro.
¿Cómo convierto un color hexadecimal de CSS?+
Pega el valor hexadecimal (p.ej. #0052ff) en el campo HEX. Los valores RGB y HSL aparecen al instante.
¿Qué es RGB?+
RGB define un color por las intensidades de sus canales rojo, verde y azul — cada uno de 0 (ninguno) a 255 (completo).
¿Se admiten los colores con nombre de CSS?+
Sí. Escribe un color con nombre como "tomato", "steelblue" o "darkgreen" para obtener sus valores HEX y RGB.
¿Por qué CSS admite tantos formatos de color?+
Diferentes formatos sirven a diferentes flujos de trabajo. HEX es compacto y tradicional. RGB se mapea directamente al hardware de pantalla. HSL es intuitivo para manipulación de color. Los tres producen colores idénticos.
¿Cuál es la diferencia entre RGB y HSL?+
RGB describe un color como intensidades de canal rojo, verde y azul (0–255 cada uno). HSL lo describe como tono (0–360° en la rueda), saturación (0–100%) y luminosidad (0–100%). Mismo color, modelo mental diferente.
¿Puedo usar esta herramienta para encontrar combinaciones de colores accesibles?+
Usa la herramienta Comprobador de Contraste tras encontrar tu valor HEX aquí — calcula la relación de contraste WCAG entre dos colores y te indica si supera AA o AAA.