Convertidor de Color

Convertidor de Color

Convierte entre los formatos de color HEX, RGB, HSL y HSV al instante. Ya sea que estés escribiendo CSS, diseñando en Figma o Photoshop, o construyendo una paleta de color de marca, este convertidor traduce cualquier valor de color a todos los demás formatos para que siempre tengas el código exacto que tu herramienta espera.

Cómo Funciona la Conversión de Color

Todos los modelos de color de pantalla codifican los colores como tres componentes numéricos que representan el mismo color subyacente.

RGB a HEX -- convierte cada uno de los tres valores decimales de 0-255 en un par hexadecimal de 2 dígitos y concaténalos con un prefijo #. Ejemplo: rgb(255, 87, 51) se convierte en FF (255), 57 (87), 33 (51) = #FF5733.

RGB a HSL -- normaliza cada canal a 0-1, halla los valores máximo (M) y mínimo (m), luego: Matiz = ángulo según qué canal es el máximo, Saturación = (M - m) / (1 - |2L - 1|), Luminosidad = (M + m) / 2. Ejemplo: rgb(255, 87, 51) se convierte en hsl(11, 100%, 60%).

HEX a RGB -- interpreta cada par hexadecimal de 2 caracteres como un número en base 16. #1A8FE3 da R = 0x1A = 26, G = 0x8F = 143, B = 0xE3 = 227.

Ejemplos Resueltos

Ejemplo 1 -- Auditoría de color de marca. Una guía de marca especifica el Pantone 485 C, aproximadamente #DA291C. Un desarrollador necesita la versión rgb() de CSS para un degradado: rgb(218, 41, 28). Un diseñador necesita la versión HSL para crear un tinte más claro: hsl(4, 76%, 48%). Aumentar la luminosidad al 70% da hsl(4, 76%, 70%) = un tinte rosa salmón, todo a partir del mismo hex original.

Ejemplo 2 -- Verificación de accesibilidad. Un botón usa texto #767676 sobre un fondo #FFFFFF. Al convertir a RGB da rgb(118, 118, 118) frente a rgb(255, 255, 255). La luminancia relativa de #767676 es de aproximadamente 0.216 y la del blanco es 1.0, lo que da una relación de contraste de 4.54:1 -- que apenas pasa el WCAG AA para el texto normal (mínimo 4.5:1).

Ejemplo 3 -- Generación de paleta para modo oscuro. Una interfaz usa #0057B8 (HSL: 214, 100%, 36%) como su azul principal en fondos claros. Para el modo oscuro, mantén el matiz en 214, mantén la saturación en 100% y sube la luminosidad al 60% para obtener #3399FF -- un azul visiblemente más claro que mantiene el matiz de la marca pero funciona en superficies oscuras.

Tabla de Referencia

Cuándo Usar

• Copiar un color HEX de un archivo de diseño y necesitar la versión rgb() o hsl() para variables de CSS o la configuración de Tailwind.
• Generar sombras de una paleta de color ajustando la luminosidad en HSL mientras mantienes fijos el matiz y la saturación.
• Comprobar si dos colores en formatos diferentes son en realidad el mismo color antes de finalizar un sistema de diseño.
• Convertir un valor hex exportado de Photoshop a RGBA con un canal alfa para efectos de superposición en CSS.
• Hacer coincidir un color web con una especificación de impresión convirtiéndolo al equivalente CMYK más cercano para una impresora.

Errores Comunes

1. Usar un HEX de 3 dígitos como si fuera de 6 dígitos. #F53 es la forma abreviada de #FF5533, no de #F05030. Cada dígito de un código hex de 3 dígitos se duplica, así que usa la forma abreviada solo cuando ambos dígitos de cada par de canal sean idénticos.
2. Tratar la luminosidad de HSL y el valor de HSV como lo mismo. Un color con luminosidad HSL 50% y valor HSV 100% se ven muy diferentes -- HSL 50% es un tono medio totalmente saturado, mientras que el valor HSV 100% es la variante más brillante posible de ese matiz. Confundir estos valores al cambiar de herramienta produce colores incorrectos.
3. Ignorar el canal alfa en las conversiones RGBA. Convertir rgba(255, 87, 51, 0.5) a HEX requiere 8 dígitos: #FF573380. Omitir el alfa produce #FF5733, que es totalmente opaco -- un resultado visual completamente distinto sobre cualquier fondo que no sea blanco.
4. Errores de redondeo que se acumulan a lo largo de varias conversiones. Convertir de RGB a HSL y de vuelta puede introducir errores de redondeo de 1 unidad (por ejemplo, rgb(255, 87, 51) podría volver como rgb(255, 86, 51)). Guarda los valores originales y convierte solo una vez antes de usarlos.

Aplicaciones en el Mundo Real

Las propiedades personalizadas de CSS aprovechan bien HSL porque generar una paleta completa a partir de un color base es sencillo -- define --brand-hue: 214 y calcula todas las sombras variando la luminosidad del 10% al 90%. Los sistemas de diseño de empresas como GitHub, Stripe y Atlassian documentan públicamente sus tokens de color tanto en HEX (para referencias estáticas) como en HSL (para la generación programática). Los cálculos de contraste de WCAG requieren convertir cualquier formato de color a luminancia relativa, que se deriva de los valores RGB lineales, lo que hace de este convertidor un paso práctico en las auditorías de accesibilidad.

Consejos

1. Memoriza los 6 colores de las esquinas: #FF0000 rojo, #FFFF00 amarillo, #00FF00 verde, #00FFFF cian, #0000FF azul, #FF00FF magenta. Cualquier otro matiz se sitúa entre dos de estos en la rueda de color.
2. Para aclarar cualquier color sin cambiar su matiz, conviértelo a HSL y sube el valor L. Para oscurecerlo, baja el valor L. Mantén H y S sin cambios.
3. Cualquier color HEX donde los tres pares son iguales (#333333, #AAAAAA, #F5F5F5) es un tono de gris. Cuanto mayor sea el valor, más claro es el gris.
4. Usa las propiedades personalizadas de CSS -- --brand-color: #FF5733 -- para definir un color una vez y reutilizarlo. Cambiar un valor actualiza toda la hoja de estilos.
5. Para el diseño en modo oscuro, evita el texto blanco puro #FFFFFF sobre fondos negros puros #000000. Prueba #E8E8E8 sobre #1A1A1A (luminosidad HSL ~91% sobre ~10%) para reducir la fatiga visual con esencialmente la misma relación de contraste.
6. Los códigos hex de ocho dígitos añaden un canal alfa como los dos últimos dígitos: #FF573300 es totalmente transparente y #FF5733FF es totalmente opaco. Valores como #FF573380 dan aproximadamente un 50% de opacidad.