Sobre estos formatos de color
HEX y RGB son los formatos estándar para pantallas y CSS: HEX es compacto (#3B82F6), RGB es explícito sobre cada canal (0-255). HSL (tono, saturación, luminosidad) y HSV (tono, saturación, valor/brillo) describen el color de forma más parecida a como lo piensa la gente, más fácil para elegir un matiz o una variación del mismo tono. CMYK (cian, magenta, amarillo, negro) es para impresión, donde el color se crea mezclando tinta en lugar de emitir luz.
Qué hace esta herramienta
El convertidor de colores muestra un color en cinco notaciones a la vez: HEX, RGB, HSL, HSV y CMYK. Escribe un código hex, introduce valores RGB, arrastra los controles o elige uno de los 148 colores con nombre de CSS, y todos los formatos se actualizan al instante.
Cada línea tiene su propio botón de copiar y está escrita con sintaxis lista para CSS, como rgb(59, 130, 246) o hsl(217, 91%, 60%). La conversión se hace por completo en tu navegador.
Cuándo usarla
- Llevar un color de marca de un archivo de diseño en HEX a código CSS, Android o iOS que espera RGB o HSL.
- Obtener un tono más claro u oscuro del mismo matiz cambiando solo la luminosidad en HSL.
- Comprobar que el texto sobre un color sigue siendo legible con el Verificador de Contraste de Color.
- Crear la paleta de un sistema de diseño y documentar cada color en todas las notaciones que puedan necesitar los desarrolladores.
Ejemplo práctico
#3B82F6
rgb(59, 130, 246) · hsl(217, 91%, 60%) · hsv(217, 76%, 96%) · cmyk(76%, 47%, 0%, 4%)
#FF6347 (tomato)
rgb(255, 99, 71) · hsl(9, 100%, 64%) · hsv(9, 72%, 100%) · cmyk(0%, 61%, 72%, 0%)
Preguntas sobre esta herramienta
¿Por qué CMYK solo aproxima los colores de impresión?
Las pantallas mezclan luz y las impresoras mezclan tinta, y cada impresora y cada papel se comportan de forma distinta. Los valores CMYK son una conversión matemática, así que pide a tu imprenta un valor basado en perfil cuando el color exacto importe.
¿En qué se diferencian HSL y HSV?
Ambos empiezan por matiz y saturación. HSL usa la luminosidad, donde 100 % siempre es blanco, y HSV usa el valor o brillo, donde 100 % es la versión más viva del color. Las herramientas de diseño suelen usar HSV; CSS usa HSL.
¿Admite transparencia?
La opacidad no forma parte de estos cinco formatos aquí. En CSS añádela como cuarto valor, por ejemplo rgb(59 130 246 / 50%), o como dos dígitos hex adicionales, #3B82F680.
¿Esta herramienta es gratuita?
Sí, es gratis. Sin registro ni correo electrónico. Obtén el resultado en esta página.
¿Cómo obtengo el resultado?
Usa la herramienta en esta página. El resultado aparece aquí, sin envío por correo electrónico.