Convertidor de colores: HEX, RGB, HSL, HSV, CMYK
Escribe un color en cualquier formato, por ejemplo #3B82F6, rgb(59, 130, 246), hsl(217, 91%, 60%) o cmyk(76%, 47%, 0%, 4%). El convertidor de colores HEX y RGB reconoce el formato y muestra el mismo color en todas las demás notaciones.
Fuente: CSS Color 4, § 5.2, W3C – CSS Color Module Level 4: RGB hex notation. Actualizado: .
Cómo se calcula
Cómo calcula el convertidor de colores
Todos los formatos describen el mismo color en el espacio de color sRGB, el estándar de las pantallas y de la web. La base es siempre el valor RGB, con tres canales de 0 a 255:
Cómo convertir colores
- Introduce un color en cualquier formato, p. ej. #3B82F6 o rgb(59, 130, 246).
- El conversor reconoce el formato automáticamente.
- Lee y copia HEX, RGB, HSL, HSV y CMYK.
Ejemplo: #3B82F6 → 3B = 59, 82 = 130, F6 = 246, es decir, rgb(59, 130, 246). En CMYK: K = 1 − 246/255 ≈ 4 %, C = (1 − 59/255 − 0,035) / 0,965 ≈ 76 %.
- HEX escribe los tres canales como números hexadecimales de dos dígitos: 59 → 3B, 130 → 82, 246 → F6, es decir,
#3B82F6. La forma corta #RGB duplica cada dígito (#FA0 = #FFAA00); un 4.º u 8.º dígito indica la opacidad. - HSL (tono, saturación, luminosidad) y HWB (tono, proporción de blanco y de negro) se calculan con las fórmulas de CSS Color Module Level 4.
- HSV (también llamado HSB) usa el mismo tono que HSL; V es el mayor de los tres canales y S = (máx − mín) ÷ máx.
- CMYK se calcula con la fórmula simple K = 1 − máx(R, G, B), C = (1 − R − K) ÷ (1 − K), etc.
Ejemplo #3B82F6: R = 59/255 = 0,231, G = 0,510, B = 0,965. Valor máximo 0,965, mínimo 0,231. Luminosidad L = (0,965 + 0,231) ÷ 2 = 59,8 %, saturación S = (0,965 − 0,231) ÷ (1 − |2 × 0,598 − 1|) = 91,2 %, tono H = 217,2°. Resultado: hsl(217.2, 91.2%, 59.8%).
Por qué CMYK es solo una aproximación
Las tintas de impresión no se comportan como la luz: qué valor CMYK reproduce mejor un color de pantalla depende del papel, del método de impresión y de la carga de tinta. Estas características se recogen en un perfil de color ICC. La fórmula usada aquí no conoce ningún perfil: para el azul puro, por ejemplo, da «cmyk(100%, 100%, 0%, 0%)», que impreso se ve claramente más violeta. Por eso, para material impreso, usa los valores de color de tu imprenta o convierte en tu programa de maquetación con el perfil de la imprenta.
Redondeo
RGB y HEX son enteros y, por tanto, exactos. HSL, HSV y HWB se muestran con un decimal y CMYK en porcentajes enteros. Los valores usan el punto como separador decimal, así que puedes pegarlos directamente en CSS.
Más herramientas de color: el generador de paletas, el comprobador de contraste y el cuentagotas.
Preguntas frecuentes
¿Cómo convierto HEX a RGB?
Cada par de dígitos es un canal en hexadecimal: #3B82F6 → 3B = 3 × 16 + 11 = 59, 82 = 8 × 16 + 2 = 130, F6 = 15 × 16 + 6 = 246. Resultado: rgb(59, 130, 246).
¿Puedo usar los valores CMYK para imprimir?
Solo como orientación aproximada. La conversión se hace sin perfil de color ICC. Lo que cuenta es el perfil de tu imprenta: pide allí los valores CMYK adecuados o convierte en tu programa de maquetación con el perfil de impresión.
¿Qué diferencia hay entre HSL y HSV?
Ambos usan el mismo tono. En HSL, una luminosidad del 100 % es siempre blanco y el 50 % es el color puro; en HSV, un valor del 100 % es el nivel más claro del color y el blanco se alcanza con una saturación del 0 %. Los programas de diseño suelen llamar HSB al HSV.
¿Qué notaciones reconoce?
HEX de 3, 4, 6 u 8 dígitos (con o sin #), rgb()/rgba() también en porcentaje, hsl()/hsla() con deg, turn, rad o grad, hsv()/hsb(), hwb(), cmyk() con porcentajes y tres números sueltos como RGB. Funcionan tanto la sintaxis con comas como la de espacios (CSS Color 4).
¿Cómo convierto RGB a HEX?
Pasa cada valor de 0 a 255 a un número hexadecimal de dos cifras y únelos: 59 → 3B, 130 → 82, 246 → F6 da #3B82F6.
Fuentes y base legal
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
- CSS Color 4, § 8: W3C – CSS Color Module Level 4: HWB colors
Última actualización: · Principios editoriales
Herramientas relacionadas
- Generador de paletas de coloresCrea colores que combinan a partir de un color base: complementarios, análogos, triádicos, cuadrado, complementario dividido o monocromo, con HEX, RGB y HSL.
- Comprobador de contraste de colores según WCAG 2.2Comprueba el contraste entre el color del texto y el del fondo: relación de contraste WCAG 2.2, niveles AA/AAA para texto normal, texto grande y componentes.
- Obtener el color de una imagen (cuentagotas)Saca el código de color de una imagen: carga la foto, haz clic en un punto y copia el valor HEX, RGB y HSL, además de los colores principales. Sin subir nada.
- Calculadora de IMC según la OMSCalculadora de IMC: índice de masa corporal con estatura y peso, categoría de la OMS en una escala de colores, peso normal para tu estatura y BMI Prime.
- Ruido blanco y sonidos de lluviaRuido blanco, rosa y marrón, y sonidos de lluvia con truenos, sin fin en el navegador: se mezclan libremente, con temporizador y desvanecimiento suave.
- Convertir hexadecimal a decimal (y al revés)Hexadecimal a decimal: multiplica cada cifra por 16 elevado a su posición y suma; FF son 255. Con pasos, ejemplos resueltos, tabla y la función de Excel.
- Vitamina D UI a mcgConvierte vitamina D de UI a mcg y al revés: 1 mcg = 40 UI, así que 1000 UI = 25 mcg. Con las ingestas diarias y los límites superiores por edad de MedlinePlus.
- Calculadora de delay: de BPM a milisegundosCalculadora delay BPM: introduce el tempo y lee el tiempo de delay en ms para negra, corchea, semicorchea, con puntillo y en tresillo. Gratis y sin registro.
- Percentil bebé: calcula el percentil de peso, talla y cabezaPercentil bebé según la OMS: indica sexo, edad, peso, talla y perímetro cefálico y obtén el percentil, la puntuación z y el rango normal de 0 a 5 años.