🎨 Conversor de colores
Pega un color en cualquier formato –#3B82F6, rgb(), hsl() o un nombre en inglés como teal– y obtén todos los demás formatos, su contraste para accesibilidad y una paleta de tintes y sombras.
Respuesta rápida: #3B82F6 equivale a rgb(59, 130, 246), hsl(217, 91 %, 60 %) y cmyk(76 %, 47 %, 0 %, 4 %); su relación de contraste es de 3,68:1 sobre blanco (AA solo para texto grande) y de 5,71:1 sobre negro (AA).
Sin valoraciones todavía · Actualizado el · Gratis · Sin registro
Datos: Conversor de colores
Resultado
Color
#3B82F6
rgb(59, 130, 246)
| HEX | #3B82F6 |
| RGB | rgb(59, 130, 246) |
| HSL | hsl(217, 91%, 60%) |
| HSV / HSB | hsv(217, 76%, 96%) |
| CMYK | cmyk(76%, 47%, 0%, 4%) |
- Contraste con blanco
- 3,68:1 · AA solo para texto grande
- Contraste con negro
- 5,71:1 · AA
- Mejor color de texto
- Negro
Tintes (mezclados con blanco)
| Tinte | Color | RGB | HSL |
|---|---|---|---|
| Base | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| 10 % | #4F8FF7 | rgb(79, 143, 247) | hsl(217, 91%, 64%) |
| 20 % | #629BF8 | rgb(98, 155, 248) | hsl(217, 91%, 68%) |
| 30 % | #76A8F9 | rgb(118, 168, 249) | hsl(217, 92%, 72%) |
| 40 % | #89B4FA | rgb(137, 180, 250) | hsl(217, 92%, 76%) |
| 50 % | #9DC1FB | rgb(157, 193, 251) | hsl(217, 92%, 80%) |
| 60 % | #B1CDFB | rgb(177, 205, 251) | hsl(217, 90%, 84%) |
| 70 % | #C4DAFC | rgb(196, 218, 252) | hsl(216, 90%, 88%) |
| 80 % | #D8E6FD | rgb(216, 230, 253) | hsl(217, 90%, 92%) |
| 90 % | #EBF3FE | rgb(235, 243, 254) | hsl(215, 90%, 96%) |
Sombras (mezcladas con negro)
| Sombra | Color | RGB | HSL |
|---|---|---|---|
| Base | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| 10 % | #3575DD | rgb(53, 117, 221) | hsl(217, 71%, 54%) |
| 20 % | #2F68C5 | rgb(47, 104, 197) | hsl(217, 61%, 48%) |
| 30 % | #295BAC | rgb(41, 91, 172) | hsl(217, 62%, 42%) |
| 40 % | #234E94 | rgb(35, 78, 148) | hsl(217, 62%, 36%) |
| 50 % | #1E417B | rgb(30, 65, 123) | hsl(217, 61%, 30%) |
| 60 % | #183462 | rgb(24, 52, 98) | hsl(217, 61%, 24%) |
| 70 % | #12274A | rgb(18, 39, 74) | hsl(218, 61%, 18%) |
| 80 % | #0C1A31 | rgb(12, 26, 49) | hsl(217, 61%, 12%) |
| 90 % | #060D19 | rgb(6, 13, 25) | hsl(218, 61%, 6%) |
Requisitos de contraste de las WCAG
| Nivel | Texto normal | Texto grande (18 pt o más, o 14 pt en negrita) | Sobre blanco | Sobre negro |
|---|---|---|---|---|
| AA | 4,5:1 | 3:1 | Solo texto grande | Cumple |
| AAA | 7:1 | 4,5:1 | No cumple | Solo texto grande |
Cómo usar el conversor de colores
Pega un color en cualquier formato habitual: #3B82F6, #38F, rgb(59, 130, 246), hsl(217, 91%, 60%), hsv(217, 76%, 96%), cmyk(76%, 47%, 0%, 4%) o un nombre básico en inglés como teal. Obtendrás todos los demás formatos, una muestra del color, su contraste y una paleta de tintes y sombras.
Fórmulas de conversión
HEX → RGB: cada par de dígitos hexadecimales es un canal, de 00 a FF = de 0 a 255
CMYK: K = 1 − máx(R′, G′, B′) · C = (1 − R′ − K) ÷ (1 − K), y lo mismo para M e Y (R′ = R ÷ 255)
HSL: L = (máx + mín) ÷ 2 · S = (máx − mín) ÷ (1 − |2L − 1|) · H según el canal dominante
Contraste = (L1 + 0,05) ÷ (L2 + 0,05), con la luminancia relativa de las WCAG
Ejemplo resuelto
#3B82F6 se divide en 3B, 82 y F6 = rgb(59, 130, 246). El azul es el canal más alto (0,965), así que K = 3,5 % y C = (1 − 0,231 − 0,035) ÷ 0,965 = 76 %, lo que da cmyk(76%, 47%, 0%, 4%). En HSL es hsl(217, 91%, 60%). Su luminancia relativa es 0,236, de modo que el contraste es de 3,68:1 frente al blanco y de 5,71:1 frente al negro: para letra pequeña, usa texto negro sobre él.
Colores habituales
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Rojo | #FF0000 | 255, 0, 0 | 0°, 100 %, 50 % |
| Verde | #008000 | 0, 128, 0 | 120°, 100 %, 25 % |
| Azul | #0000FF | 0, 0, 255 | 240°, 100 %, 50 % |
| Naranja | #FFA500 | 255, 165, 0 | 39°, 100 %, 50 % |
| Verde azulado | #008080 | 0, 128, 128 | 180°, 100 %, 25 % |
| Gris | #808080 | 128, 128, 128 | 0°, 0 %, 50 % |
Consejos
- Los valores CMYK de esta herramienta son una conversión sencilla, independiente del dispositivo; para impresión profesional, convierte con el perfil ICC de tu imprenta.
- Comprueba el contraste de cada combinación de texto y fondo de un diseño, no solo el del color de marca.
Preguntas frecuentes
¿Cómo se convierte un color HEX a RGB?
Divide los seis dígitos hexadecimales en tres pares y pasa cada uno de base 16 a decimal. #3B82F6 → 3B = 59, 82 = 130, F6 = 246, es decir, rgb(59, 130, 246).
¿Qué diferencia hay entre RGB y CMYK?
RGB mezcla luz roja, verde y azul para las pantallas; CMYK mezcla tintas cian, magenta, amarilla y negra para la impresión. Los colores de pantalla muy brillantes o saturados a veces no se pueden reproducir en papel.
¿Qué diferencia hay entre HSL y HSV?
Los dos describen el tono como un ángulo (0–360°) más la saturación. La luminosidad de HSL va del negro al blanco pasando por el color puro, mientras que el valor de HSV (también llamado brillo, HSB) va del negro al color puro.
¿Qué relación de contraste necesita un texto accesible?
El nivel AA de las WCAG 2 exige 4,5:1 para el texto normal y 3:1 para el texto grande (18 pt, o 14 pt en negrita). El nivel AAA exige 7:1 y 4,5:1.
¿Qué son los tintes y las sombras de un color?
Un tinte es el color mezclado con blanco, que lo aclara; una sombra es el color mezclado con negro, que lo oscurece. Son una forma rápida de crear una paleta coherente a partir de un solo color de marca.
¿Te ha resultado útil? Valora esta herramienta
Solo mostramos la valoración media. Los avisos de error llegan directamente a nuestro buzón para que podamos revisarlos y corregirlos. Consulta nuestra Metodología y nuestra política de privacidad.