Convertidor de Color

Convertidor de Color - Convertir Entre Formatos de Color

Un potente convertidor de color que convierte entre formatos HEX, RGB, HSL y CMYK. Cuenta con selector de color con vista previa en vivo, copiar colores al portapapeles y detección de brillo de color. Perfecto para desarrolladores web, diseñadores y cualquiera que trabaje con colores.

¿Cómo convierto HEX a RGB o RGB a HEX?

Pega un valor HEX (con o sin el # inicial) en el campo HEX, o escribe tres números en los campos R, G, B y cada otro formato se actualiza al instante en que tu entrada es válida. La matemática es directa: HEX es solo RGB en base 16, así que #FF5733 se divide en pares FF/57/33 que equivalen a 255/87/51 en decimal. En sentido contrario, cada canal RGB se divide entre 16 para dar un dígito hexadecimal y el resto da el siguiente; la herramienta maneja ambas conversiones y la notación abreviada de 3 dígitos (#F57 se expande a #FF5577). Usa HEX al escribir CSS a mano, RGB al manipular colores en JavaScript o para canal alfa (rgba(255,87,51,0.8) para 80% de opacidad, que HEX no expresa limpiamente hasta llegar a la sintaxis de 8 dígitos #FF5733CC).

¿Cuándo usar HSL en vez de HEX o RGB?

HSL es el formato que mapea a cómo los diseñadores humanos piensan el color: elige un tono del arcoíris y luego cuán vivo (saturación) y cuán claro (luminosidad) lo quieres. Usa HSL cuando necesites derivar variaciones de un único color — para hacer un estado hover 10% más oscuro, mantienes la misma H y S y bajas L un 10%; el resultado es automáticamente el mismo tono. Hacerlo en HEX o RGB requiere malabarear los tres canales y normalmente desplaza el tono accidentalmente. HSL es también la columna vertebral de las rampas de color en sistemas de diseño (Tailwind, Material, Radix), las custom properties CSS para temas, y cualquier animación que fundo entre colores relacionados. CSS moderno incluso soporta hsl() directamente sin conversión: color: hsl(9 100% 60%);.

¿Por qué mis valores CMYK lucen más apagados que la versión RGB en pantalla?

RGB es un modelo de color aditivo usado por dispositivos emisores de luz (monitores, teléfonos, proyectores), donde sumar los tres canales al máximo produce blanco puro. CMYK es un modelo sustractivo usado por tinta sobre papel, donde sumar las cuatro tintas resta luz para producir casi negro. Los espacios de color visibles se solapan pero no son idénticos: un azul vibrante de pantalla o un verde neón no puede reproducirse con ninguna combinación de tintas CMYK, así que la conversión matemática recorta al rango imprimible y los resultados lucen apagados. Es física fundamental, no un bug. Para trabajo profesional de impresión, diseña directamente en CMYK desde el inicio en software como Adobe InDesign o Affinity Publisher usando un perfil de color ICC ajustado a tu impresora; nunca confíes en una previsualización CMYK automática en pantalla como definitiva.

¿Cómo se calcula el brillo del color y por qué importa?

El valor de Brillo usa la fórmula YIQ / ITU-R BT.601 0.299 × R + 0.587 × G + 0.114 × B aplicada sobre los canales sRGB en crudo (sin linealizar), ponderando cada uno por cuán fuertemente responde el ojo humano. El verde domina porque las células cono de la retina son más sensibles a longitudes de onda del espectro medio; el rojo es intermedio; el azul aporta menos. El resultado es un número de 0 (negro puro) a 255 (blanco puro), y la herramienta usa el corte en 128 como heurística rápida claro/oscuro para elegir texto claro u oscuro.

Importante: este brillo YIQ NO es la luminancia relativa WCAG. La verdadera luminancia WCAG 2.1 primero lineariza por gamma cada canal y luego los pondera 0.2126 R + 0.7152 G + 0.0722 B; la relación de contraste derivada de ella es la que realmente rige el cumplimiento de accesibilidad. Por eso esta herramienta ahora reporta ambos — un brillo YIQ rápido para un veredicto aproximado claro/oscuro, y una relación de contraste WCAG separada con insignias de aprobado/reprobado AA / AA Grande / AAA para comprobaciones reales de accesibilidad.

¿Qué relaciones de contraste WCAG necesito aprobar (AA vs AAA)?

WCAG 2.1 define relaciones de contraste mínimas entre el texto (o elementos de UI) y su fondo, expresadas como ratios de 1:1 (sin contraste) a 21:1 (negro puro sobre blanco puro):

- AA, texto normal: 4.5:1 — la base que la mayoría de sitios debe cumplir para texto de cuerpo por debajo de unos 18pt (24px) regular o 14pt (18,66px) en negrita.
- AA, texto grande: 3:1 — aplica a texto igual o superior a 18pt regular / 14pt negrita, y también a objetos gráficos y bordes de componentes de UI activos (Criterio de Éxito 1.4.11).
- AAA, texto normal: 7:1 — el nivel mejorado para texto normal; el texto grande en AAA necesita 4.5:1.

Esta herramienta calcula la verdadera luminancia relativa WCAG de tu color, luego su relación de contraste contra #FFFFFF y #000000, elige el color de texto que dé más contraste, y muestra insignias de aprobado o reprobado AA / AA Grande / AAA. Como comprobación rápida: #767676 es el gris más claro que aún alcanza 4.5:1 sobre blanco, mientras que #777777 se queda corto (cerca de 4.48:1) y reprueba AA para texto de cuerpo aunque apruebe el umbral de texto grande de 3:1.

¿Cómo mantengo los colores usables para usuarios daltónicos?

Alrededor del 8% de los hombres y el 0,5% de las mujeres tienen alguna deficiencia de visión de color, más comúnmente de tipo rojo-verde: deuteranopía/deuteranomalía (percepción reducida del verde) y protanopía/protanomalía (percepción reducida del rojo), con la más rara tritanopía afectando azul-amarillo. Las reglas prácticas:

- Nunca dependas solo del tono para transmitir significado. Combina el color con etiquetas de texto, iconos, patrones o posición — un punto de estado rojo/verde es invisible para muchos usuarios a menos que añadas una forma o palabra.
- Mantén un fuerte contraste de luminancia. Dos colores que difieren solo en tono pero no en luminosidad pueden colapsar en el mismo gris para un espectador daltónico, así que la relación de contraste WCAG mostrada aquí es tu mejor red de seguridad.
- Evita combinaciones problemáticas como rojo-sobre-verde, verde-sobre-marrón y azul-sobre-púrpura para elementos adyacentes o superpuestos.

Verifica un valor HEX aquí, confirma que cumple el umbral de contraste que necesitas, y luego previsualiza tu paleta completa en un simulador de daltonismo antes de publicar.

¿Cuál es la diferencia entre códigos HEX de 3 y 6 dígitos?

Un HEX de 3 dígitos como #F57 es notación abreviada del valor de 6 dígitos #FF5577, con cada dígito duplicado. Funciona porque cada par de dígitos hexadecimales idénticos representa el mismo byte (FF = 255, 77 = 119), así que la abreviación colapsa pares repetidos en dígitos únicos. La abreviación solo alcanza 4.096 colores (16^3) frente a los 16,7 millones disponibles en notación de 6 dígitos, así que está bien para primarios web-safe sólidos y grises puros (#000, #FFF, #888) pero no puede representar la mayoría de colores de marca sutiles. Usa la abreviada para mantener hojas de estilo pequeñas y compactas y la notación de 6 dígitos en todo lo demás. CSS también acepta abreviada de 4 dígitos (#F57C = #FF5577CC) y notación de 8 dígitos (#FF5577CC) para colores con canal alfa, aunque esta herramienta se centra en la conversión opaca HEX/RGB/HSL/CMYK.

¿Por qué mi HEX exacto de marca se ve ligeramente distinto entre dispositivos?

Los navegadores renderizan color por defecto en el espacio sRGB, pero los píxeles reales que ves dependen de la calibración de tu monitor, la tecnología del panel (IPS vs OLED vs TN antiguo), el ajuste de brillo, la luz ambiente y si el SO aplica un perfil de gamut amplio como Display P3. Dos monitores mirando el mismo #1A73E8 pueden mostrar azules sutilmente diferentes, y la misma pantalla puede cambiar a lo largo del día al activarse modos nocturnos cálidos. Para consistencia de marca, define tokens de color una vez en HEX o HSL, documéntalos con nombres semánticos y confía en que la variación está acotada — sRGB aún cubre cerca del 35% del espectro visible y es el común denominador universal. Para colores que deben coincidir entre impresión y pantalla, usa el output CMYK aquí como punto de partida y haz una prueba de impresión antes de comprometerte.

¿Puedo representar transparencia o canal alfa en HEX?

Sí, los navegadores modernos soportan HEX de 8 dígitos (#RRGGBBAA) donde los dos últimos dígitos codifican un canal alfa de 00 (totalmente transparente) a FF (totalmente opaco). Por ejemplo #FF5733CC es el mismo color que #FF5733 al 80% de opacidad (CC = 204 / 255). La abreviada de 4 dígitos #F57C se expande del mismo modo. Sin embargo, la sintaxis antigua rgba() (rgba(255, 87, 51, 0.8)) sigue siendo más legible, más soportada en clientes de email antiguos y más fácil de manipular vía JavaScript o custom properties CSS porque el alfa es un campo decimal separado. Usa HEX de 8 dígitos cuando quieras un token único autocontenido; usa rgba() cuando el alfa varíe independientemente del color base, por ejemplo al fundir un color de marca en una transición hover. Ten en cuenta que este convertidor trabaja solo con colores opacos — añade tú mismo los dígitos alfa una vez que tengas el HEX base aquí.

¿Qué tan precisa es la conversión RGB a HSL y qué casos límite vigilar?

La conversión es matemáticamente sin pérdidas en ambas direcciones — cada triple (R, G, B) mapea a exactamente un triple (H, S, L) — pero dos casos límite producen resultados no intuitivos. Los colores grises puros (donde R = G = B) tienen tono indefinido porque no hay canal dominante; esta herramienta reporta H = 0 por convención, pero no puedes usar ese valor de tono para generar esquemas armónicos (cualquier armonía desde una base gris se queda gris). Segundo, colores muy oscuros o muy claros pierden precisión de tono cuando se almacenan como porcentajes enteros: un color en L = 2% con saturación alta puede redondear al mismo valor HSL que uno con saturación baja, así que el round-trip RGB → HSL → RGB puede desviarse uno o dos unidades RGB. Para tokens de diseño, almacena el HEX original y trata HSL como derivación, no como fuente de verdad.

Características Clave

• Convertir entre HEX, RGB, HSL y CMYK
• Selector de color interactivo
• Vista previa de color en vivo
• Copiar cualquier formato de color al portapapeles
• Detección de brillo (claro/oscuro)
• Verificador de contraste WCAG 2.1 con insignias de aprobado/reprobado AA / AA Grande / AAA
• Recomendación del mejor color de texto (negro o blanco) para accesibilidad
• Soporte para formatos HEX #RGB y #RRGGBB
• Conversión en tiempo real mientras escribes
• Calculadora de brillo de color
• Procesamiento 100% del lado del cliente
• Sin comunicación con servidor
• Funciona sin conexión
• Soporte de modo oscuro
• Amigable para móviles