Introducción
El Conversor de Color ayuda a diseñadores y desarrolladores a convertir entre HEX, HEXA, RGB, RGBA, HSL, HSLA, HSV y HSVA. Es útil al pasar entre herramientas de diseño, CSS, tokens de UI, código canvas, flujos de imagen y experimentos rápidos de color.
Cómo usar
Introduzca un color en formato HEX, RGB, HSL o HSV, o ajuste los controles disponibles. El conversor actualiza todos los formatos al instante. Use la vista previa, ajuste alpha para transparencia y copie el formato adecuado para CSS, tokens o código.
Funciones
- •Convierte entre HEX, HEXA, RGB, RGBA, HSL, HSLA, HSV y HSVA
- •Vista previa en vivo con transparencia
- •Valores CSS listos para copiar
- •Útil para UI, frontend y limpieza de tokens
- •Ejemplos y muestras rápidas
- •Sin instalación ni cuenta
Por qué importan los formatos
Cada formato tiene un uso. HEX es compacto para diseño y CSS. RGB coincide con canales de pantalla y código. HSL resulta más intuitivo para ajustar tono, saturación y luminosidad. Los formatos con alpha agregan transparencia.
Elegir el formato correcto
Use HEX para valores estáticos cortos. Use RGB/RGBA para canales programáticos o overlays. Use HSL/HSLA cuando cree variaciones de tema, porque cambiar luminosidad o saturación es más natural.
Accesibilidad y contraste
Convertir un color no garantiza legibilidad. Revise contraste en textos, botones y estados importantes. Si el contraste es débil, ajuste luminosidad, saturación o fondo.
Alpha y HEX de 8 dígitos
HEX de 8 dígitos agrega alpha al color de 6 dígitos. En #3366CC80, los últimos dos caracteres representan transparencia.
Guía de formatos
Comparación rápida de formatos comunes.
| Formato | Ejemplo | Ideal para |
|---|---|---|
| HEX | #3366CC | CSS estático y diseño |
| HEXA | #3366CC80 | Color estático con alpha |
| RGB | rgb(51, 102, 204) | Canales programáticos |
| RGBA | rgba(51, 102, 204, 0.5) | Overlays y sombras |
| HSL | hsl(220, 60%, 50%) | Variaciones de tema |
| HSV | hsv(220, 75%, 80%) | Flujos de selector de color |
Valores alpha comunes
Referencia para convertir opacidad a HEX de 8 dígitos.
| Opacidad | Alpha HEX aprox. | Uso |
|---|---|---|
| 100% | FF | Totalmente opaco |
| 75% | BF | Overlay fuerte |
| 50% | 80 | Semitransparente |
| 25% | 40 | Overlay sutil |
| 10% | 1A | Tinte muy ligero |
Preguntas frecuentes
¿Diferencia entre HEX, RGB y HSL?
HEX es notación hexadecimal compacta, RGB usa canales rojo/verde/azul y HSL usa tono, saturación y luminosidad.
¿Soporta transparencia?
Sí. Puede usar RGBA, HSLA, HSVA o HEXA de 8 dígitos.
¿Puedo usar los resultados en CSS?
Sí. Puede pegarlos en color, background-color, border-color, sombras y gradientes.
¿Qué formato conviene para sistemas de diseño?
HEX es común para tokens fijos; HSL facilita variaciones claras, oscuras o atenuadas.
¿Convertir cambia la apariencia?
Valores equivalentes deben verse iguales, pero transparencia, perfiles de color y pantalla pueden influir.