> convertir | vista previa | elegir <
// Convierta entre formatos de color HEX, RGB, HSL, HSV y CMYK
Vista previa del color
La vista previa en vivo se actualiza instantáneamente mientras escribe o elige colores.
Entrada en cualquier formato
Ingrese un color en cualquier formato y todos los demás formatos se actualizan automáticamente.
5 formatos de color
Convierta entre HEX, RGB, HSL, HSV/HSB y CMYK. Copie cualquier formato con un clic.
// SOBRE FORMATOS DE COLOR
Modelos de color:
Los colores se pueden representar con diferentes modelos: RGB aditivo (rojo, verde, azul) para pantallas, CMYK sustractivo (cian, magenta, amarillo, negro) para impresión, notación HEX como representación RGB compacta, y HSL/HSV para tono, saturación y luminosidad/valor.
Ejemplo:
#FF5733 → rgb(255, 87, 51) → hsl(11, 100%, 60%)
Casos de uso comunes:
- >Desarrollo web: colores CSS en HEX, RGB o HSL
- >Diseño para impresión: conversión de RGB a CMYK
- >Diseño UI: HSL para ajustes intuitivos de color
- >Directrices de marca: colores consistentes entre formatos
- >Accesibilidad: verificación de ratios de contraste
>> preguntas frecuentes
P: ¿Cuál es la diferencia entre HEX y RGB?
R: HEX y RGB representan el mismo modelo de color (rojo, verde, azul) pero en notaciones diferentes. HEX usa hexadecimal (#FF5733) mientras que RGB usa valores decimales (rgb(255, 87, 51)).
P: ¿Qué es HSL y por qué usarlo?
R: HSL significa Tono, Saturación, Luminosidad. Es un modelo de color más intuitivo para los humanos. CSS soporta nativamente la notación hsl().
P: ¿Cuándo debería usar CMYK?
R: CMYK (Cian, Magenta, Amarillo, Negro) es el modelo de color utilizado en la impresión. Tenga en cuenta que no todos los colores RGB se pueden reproducir en CMYK.
P: ¿Qué formatos de color CSS son compatibles con los navegadores?
R: Los navegadores modernos soportan HEX, RGB, HSL, colores con nombre y formatos más nuevos como hwb(), lab(), lch(), oklch().
P: ¿Cómo afectan los formatos de color a la accesibilidad?
R: El formato no afecta directamente la accesibilidad, pero comprender los valores de color ayuda a calcular los ratios de contraste. WCAG 2.1 requiere un mínimo de 4.5:1 para texto normal.
// Colores comunes en HEX, RGB y HSL
| HEX | RGB | HSL |
|---|---|---|
| #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
// Notaciones de color CSS y conversión
color: #ff8000; color: #f80; /* shorthand for #ff8800 */ color: #ff800080; /* 8 digits: last two = alpha */ color: rgb(255 128 0); color: rgb(255 128 0 / 50%); color: hsl(30 100% 50%); #FF8000 -> FF=255 80=128 00=0 -> rgb(255, 128, 0)
>> Más preguntas
P: ¿Cómo convierto HEX a RGB a mano?
R: Divide el código en pares y convierte cada par de hexadecimal a decimal: #FF8000 → FF = 255, 80 = 128, 00 = 0, es decir rgb(255, 128, 0).
P: ¿Qué significan la forma corta (#F80) y el HEX de 8 dígitos?
R: #F80 es la abreviatura de #FF8800 (cada dígito se duplica). Con 8 dígitos (#RRGGBBAA), los dos últimos son el canal alfa, es decir, la opacidad.
P: ¿Por qué los colores se ven distintos en impresión y en pantalla?
R: Las pantallas mezclan luz de forma aditiva (RGB) y cubren una gama mayor; la impresión mezcla tintas de forma sustractiva (CMYK). Los verdes, azules y neones vivos a menudo solo se imprimen de forma aproximada: comprueba con una prueba de color.