Convertidor de Colores
Convierte entre los formatos de color HEX, RGB y HSL con edición bidireccional: cambia cualquier valor y los demás se actualizarán instantáneamente. El selector de color nativo del navegador permite una selección visual, mientras que las entradas numéricas precisas habilitan la especificación exacta del color. Copia formatos listos para CSS directamente para el desarrollo web y el diseño.
¿Qué hace esta herramienta?
El Convertidor de Colores proporciona una conversión bidireccional entre los tres formatos principales de color para la web. El formato HEX (hexadecimal) utiliza #RRGGBB o #RGB con valores de 00-FF por canal. RGB (Rojo, Verde, Azul) usa valores decimales de 0-255 por canal, comúnmente escrito como rgb(255, 0, 128). HSL (Matiz, Saturación, Luminosidad) usa el matiz en grados (0-360) y la saturación/luminosidad como porcentajes (0-100%), escrito como hsl(300, 50%, 50%). Una muestra de color en vivo muestra el color actual, y los botones de copia proporcionan formatos listos para CSS para un uso inmediato en hojas de estilos.
Cómo funciona
Los valores de color se convierten utilizando matemáticas estándar de espacio de color. De HEX a RGB: cada par de dígitos hexadecimales se convierte a decimal de 0-255. De RGB a HSL: los valores RGB se normalizan a 0-1, el máximo y mínimo determinan la luminosidad, la saturación depende del rango de luminosidad y el matiz se calcula a partir de qué componente RGB es el mayor usando fórmulas trigonométricas. De HSL a RGB invierte este proceso. Cuando editas cualquier campo, el color se parsea, se convierte a las tres representaciones y se muestra. La entrada de color nativa del navegador proporciona la selección de color integrada del sistema operativo en las plataformas compatibles.
Características
- HEX ↔ RGB ↔ HSL — edita cualquier valor, los demás se actualizan
- Integración con el selector de color nativo del navegador
- Vista previa de muestra de color en vivo
- Copia CSS rgb(...) o hsl(...) con un solo clic
- Referencia Hex8 (con alpha) para herramientas de diseño
- Conversión en tiempo real bidireccional
- Valida los rangos de entrada para cada formato
Cómo usar
- 1
Selecciona o ingresa un color
Usa el selector de color nativo, pega un código hex o ingresa valores RGB/HSL directamente. Se aceptan cualquier valor de color válido.
- 2
Ajusta finamente con deslizadores o números
Ajusta los deslizadores R/G/B para un control preciso de los canales de color, o modifica los valores H/S/L para cambiar el matiz o ajustar la saturación y el brillo.
- 3
Copia el formato CSS
Haz clic en Copiar CSS en tu formato preferido: hex para compactitud, rgb para legibilidad, o hsl para ajustes intuitivos.
- 4
Usa Hex8 para herramientas de diseño
El campo Hex8 muestra el formato #RRGGBBAA con alfa. Copia esto para herramientas de diseño como Figma o Photoshop que admiten hex con transparencia.
Casos de uso comunes
Desarrollo web
Convierte los colores de los mockups de diseño a valores CSS, ajusta los colores de la paleta matemáticamente mediante HSL y copia códigos hex exactos para la implementación.
Diseño gráfico
Traduce colores entre herramientas de diseño que usan formatos diferentes y verifica la precisión del color a través de las representaciones HEX, RGB y HSL.
Exploración de esquemas de color
Usa HSL para crear variaciones: ajusta el matiz para colores complementarios, la saturación para el control de intensidad y la luminosidad para tintes y sombras.
Verificación de accesibilidad
Convierte colores para verificar las relaciones de contraste y asegurarte de que los diseños cumplan con los estándares de accesibilidad WCAG para la visibilidad del color.
Consejos y buenas prácticas
- HSL es más intuitivo para ajustes de color que RGB: cambia el matiz sin afectar el brillo o ajusta la saturación sin cambiar el color base
- HEX es el más compacto para CSS (7 caracteres vs 16+ para rgb/hsl), pero rgb() y hsl() son más legibles y admiten operaciones con CSS calc()
- Usa el selector de color nativo (haz clic en la entrada de color) para la selección visual; se integra con los selectores de color del sistema operativo en macOS y Windows
- Para escala de grises, usa HSL con 0% de saturación: cualquier valor de matiz funciona, solo la L (luminosidad) afecta el resultado