Generación
100% en su navegador
Convertidor de color
Convierte colores entre los formatos HEX, RGB y HSL al instante. Incluye selector de color y vista previa en vivo.
← clic para abrir el selector
HEX
RGB
HSL
Valores CSS
Convertidor de color
Convierte cualquier color entre los formatos HEX, RGB y HSL al instante. Usa el selector de color para una selección visual, o escribe directamente en cualquier campo.
Formatos de color explicados
- HEX (#rrggbb): un código hexadecimal de 6 dígitos usado en HTML y CSS. El formato más común para el diseño web.
- RGB (r, g, b): define el color por la intensidad del rojo, verde y azul (0–255 cada uno). Nativo de pantallas y monitores.
- HSL (tono, saturación, luminosidad): un modelo intuitivo. El tono es el ángulo en la rueda de colores (0–360°), la saturación es la intensidad (0–100 %) y la luminosidad es el brillo (0–100 %).
Cuándo usar cada formato
- Usa HEX en hojas de estilo CSS y herramientas de diseño (Figma, Photoshop).
- Usa RGB con canvas, WebGL o cuando necesites control numérico de canales.
- Usa HSL para construir sistemas de color dinámicos (ej. ajustar la luminosidad para el modo oscuro).
Paso a paso
- Haz clic en el cuadro de color para elegir uno, o escribe un valor en HEX, RGB o HSL.
- Los demás formatos y la vista previa se actualizan al instante.
- Copia el color como código CSS listo para usar con Copiar valores CSS.
Preguntas frecuentes
¿Qué diferencia hay entre HEX, RGB y HSL?
HEX y RGB describen la mezcla de rojo, verde y azul: HEX en hexadecimal y RGB en decimal. HSL describe tono, saturación y luminosidad.
¿Qué rango tiene el tono?
El tono (H) va de 0 a 360 grados; la saturación (S) y la luminosidad (L), de 0 a 100 por ciento.
¿Se guarda el color?
No. El cálculo se hace en tu navegador.