Español
Cómo pasar de HEX a RGB (y al revés)
Este convertidor de colores pasa un código HEX a RGB, HSL, HSV, CMYK y OKLCH mientras escribes, y también funciona al revés: pega rgb(255, 99, 71) en cualquier casilla y obtienes #FF6347. Todas las casillas aceptan todos los formatos, así que no tienes que buscar el campo correcto.
Si quieres hacerlo a mano, un código HEX no es más que tres números escritos en base 16. Toma #3B82F6, sepáralo en pares y convierte cada par:
82 → 8×16 + 2 = 130
F6 → 15×16 + 6 = 246
#3B82F6 = rgb(59, 130, 246)
De RGB a HEX es el camino inverso. Divide cada canal entre 16: el cociente es el primer dígito y el resto, el segundo. 255 da 15 y resto 15, o sea FF. 99 da 6 y resto 3, o sea 63. Por eso el rojo tomate, rgb(255, 99, 71), sale como #FF6347.
Códigos de color habituales en HEX, RGB y HSL
Merece la pena reconocerlos a simple vista. Todos son también nombres de color CSS válidos, y la herramienta muestra el nombre más cercano para cualquier color que introduzcas (#3B82F6 se acerca a dodgerblue, aunque no es el mismo).
| Nombre | HEX | RGB | HSL |
|---|---|---|---|
| white | #FFFFFF | 255, 255, 255 | 0, 0%, 100% |
| black | #000000 | 0, 0, 0 | 0, 0%, 0% |
| red | #FF0000 | 255, 0, 0 | 0, 100%, 50% |
| tomato | #FF6347 | 255, 99, 71 | 9, 100%, 64% |
| gold | #FFD700 | 255, 215, 0 | 51, 100%, 50% |
| teal | #008080 | 0, 128, 128 | 180, 100%, 25% |
| navy | #000080 | 0, 0, 128 | 240, 100%, 25% |
| rebeccapurple | #663399 | 102, 51, 153 | 270, 50%, 40% |
Códigos HEX cortos, largos y con transparencia
El HEX tiene cuatro longitudes. Tres dígitos es una abreviatura en la que cada dígito se duplica, así que #F60 significa #FF6600. Seis dígitos es la forma normal. Ocho dígitos añaden un canal alfa al final: #3B82F680 es el mismo azul a 128 de 255, más o menos un 50% de opacidad. Cuatro dígitos es la versión corta de eso. Los navegadores entienden las cuatro desde hace años, pero algunas aplicaciones de diseño y clientes de correo siguen aceptando solo seis, así que ante la duda pega el código de seis dígitos y ajusta la opacidad aparte.
¿Qué formato conviene usar?
- HEX para todo lo que pegas en una herramienta de diseño, una guía de marca o un CMS. Es corto y nadie lo lee mal.
- RGB / RGBA cuando necesitas transparencia en CSS antiguo o en código de canvas con JavaScript.
- HSL cuando quieres retocar un color razonando sobre él. Bajar el último número lo oscurece y bajar el del medio lo vuelve más gris. Los estados hover son mucho más fáciles de escribir así.
- OKLCH para sistemas de diseño CSS nuevos. Su luminosidad coincide con lo que ve el ojo, así que dos colores con la misma L parecen de verdad igual de claros, algo que HSL no consigue (un amarillo al 50% de luminosidad se ve mucho más brillante que un azul al 50%).
- CMYK solo como referencia aproximada para imprimir. Los números de aquí salen de la fórmula simple, no de un perfil de impresora, así que el folleto no va a coincidir exactamente con tu pantalla. Pregunta a la imprenta qué perfil usa.
- HSV / HSB sobre todo para coincidir con el selector de Photoshop o Figma, que lo usan.
Comprobador de contraste: qué cumple WCAG
WCAG 2 compara la luminosidad relativa del texto y del fondo y la expresa como un ratio de 1:1 (iguales) a 21:1 (negro sobre blanco). Los umbrales son fijos:
| Nivel | Texto normal | Texto grande (24px, o 18,66px en negrita) |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Los iconos, los bordes de los campos y los indicadores de foco necesitan 3:1 según WCAG 2.1. Así puntúan algunos colores reales como texto sobre blanco:
| Color del texto sobre #FFFFFF | Ratio | Resultado |
|---|---|---|
| #949494 | 3,03:1 | Solo texto grande |
| #777777 | 4,48:1 | No cumple AA para texto principal, por muy poco |
| #767676 | 4,54:1 | Cumple AA |
| #595959 | 7,00:1 | Cumple AAA |
| #3B82F6 | 3,68:1 | Solo texto grande y botones |
| #008080 | 4,77:1 | Cumple AA |
La fila de #777777 es la trampa clásica. Parece idéntico a #767676, y un comprobador que muestre un solo decimal enseñará 4,5, pero la regla dice "al menos 4,5" y 4,48 no lo es. Esta herramienta nunca redondea hacia arriba un ratio que no llega al umbral.
Cuando un color no cumple, el comprobador busca el tono más cercano con el mismo matiz que sí cumpla. Para #3B82F6 sobre blanco sugiere #1E6FF5 para AA (4,52:1) y #0950C5 para AAA (7,08:1). Pulsa Usar para cargarlo o cópialo directamente a tu hoja de estilos. Los amarillos y naranjas vivos suelen necesitar un tono mucho más oscuro para funcionar como texto sobre blanco; en esos casos, deja el color vivo para los fondos y pon texto oscuro encima.
Crea una paleta y toma colores de una imagen
El panel de paleta genera una escala de tintes y sombras del 50 al 950 (la nomenclatura de Tailwind), además de combinaciones complementaria, análoga, triádica, complementaria dividida, cuadrada y monocromática. Haz clic en cualquier muestra para copiarla y luego exporta el conjunto como propiedades personalizadas CSS, variables SCSS, JSON o un bloque de colores de Tailwind, o descarga una tira PNG para meterla en una diapositiva o enviársela a un cliente.
Para igualar un color de un logo o una foto, carga la imagen y toca el punto. Un solo píxel de un JPG puede variar unos tonos respecto a lo que ves por el ruido de la compresión, así que con fotos cambia a la media de 3×3 o 5×5. En Chrome y Edge, el botón Tomar de la pantalla puede capturar un color de cualquier parte de tu pantalla, incluidas otras ventanas. No se sube nada; la imagen se lee en tu navegador.
Preguntas frecuentes
¿Cómo paso de HEX a RGB?
Separa los seis dígitos en tres pares y convierte cada par de base 16 a un número entre 0 y 255. #3B82F6 queda en 3B = 59, 82 = 130 y F6 = 246, así que el valor RGB es rgb(59, 130, 246).
¿Cómo paso de RGB a HEX?
Escribe cada canal como un número hexadecimal de dos dígitos y únelos detrás de un #. rgb(255, 99, 71) da FF, 63 y 47, así que el código HEX es #FF6347, que es el color CSS tomato.
¿Qué ratio de contraste necesito para cumplir WCAG AA?
El texto normal necesita al menos 4,5:1 y el texto grande (24px, o 18,66px en negrita) 3:1. El gris #767676 sobre blanco da 4,54:1, el gris más claro que todavía vale para el texto principal.
¿Qué significa un código hex de 8 dígitos?
Los dos últimos dígitos son el canal alfa (opacidad). #3B82F680 es el mismo azul con una opacidad de 128/255, más o menos el 50%, que en CSS es rgba(59, 130, 246, 0.5).
¿Qué significa un código hex de 3 dígitos como #F60?
Cada dígito se duplica, así que #F60 es #FF6600. La forma corta solo funciona cuando los dos dígitos de cada par son iguales, por eso #3B82F6 no tiene versión de 3 dígitos.
¿El valor CMYK es lo bastante preciso para imprimir?
Es un punto de partida, no una prueba de impresión. La herramienta usa la fórmula estándar, así que #3B82F6 queda en cmyk(76%, 47%, 0%, 4%), pero la mezcla real de tintas depende del perfil de color de la impresora y del papel, así que pide los valores a tu imprenta.
¿Cómo saco el código HEX de un color de una foto?
Carga la imagen en el panel de arriba y toca el punto que quieras; la herramienta lee ese píxel. Con fotos, cambia a la media de 3×3 o 5×5, porque un solo píxel suele tener más ruido que el color que ves.
¿Qué diferencia hay entre HSL y HSV?
Los dos parten del mismo tono, pero en HSL una luminosidad del 100% siempre es blanco, mientras que en HSV un valor del 100% es la versión más brillante del color. El rojo puro es hsl(0, 100%, 50%) y hsv(0, 100%, 100%).