Conversor de color — conversor online de HEX, RGB, HSL _

¿Qué es la conversión de color?

Cada color que renderiza tu navegador es, en última instancia, una terna sRGB — tres números entre 0 y 255 para los canales rojo, verde y azul, más un alfa opcional. La especificación CSS Color Level 4 define varios formatos de texto que se convierten ida y vuelta a la misma terna, además del espacio perceptualmente uniforme OKLCH. Esta herramienta lee cualquiera de ellos, convierte a todos ellos y calcula la relación de contraste WCAG 2.1 frente a un segundo color para que publiques interfaces accesibles con confianza.

¿Cómo funciona la conversión de color?

La conversión es una serie de transformaciones lineales y no lineales bien definidas. Cada paso se ejecuta en tu navegador — ninguna entrada llega nunca a nuestros servidores:

1. Tu entrada se analiza. La herramienta detecta automáticamente HEX de 3, 4, 6 u 8 dígitos, las formas funcionales rgb()/rgba()/hsl()/hsla()/hsv()/hwb() en sintaxis tradicional con comas o en la sintaxis moderna con barra para el alfa, o cualquiera de los 150 colores CSS con nombre (rebeccapurple incluido).
2. El color analizado se normaliza a sRGB canónico — cuatro flotantes {r, g, b, a} cada uno en el rango 0–1. Esta es la única fuente de verdad de la que se derivan todos los formatos de salida.
3. HEX se obtiene redondeando cada canal a su valor de byte 0–255 y uniendo los dígitos hexadecimales. RGB / RGBA imprimen los mismos bytes. HSL y HSV aplican los algoritmos estándar de coordenadas cilíndricas del W3C; HWB deriva el tono desde HSV, la blancura desde min(r, g, b) y la negrura desde 1 - max(r, g, b).
4. CMYK es una aproximación ingenua — k = 1 - max(r, g, b), y después c, m, y a partir de los canales residuales. Es adecuado para previsualización en pantalla pero no para impresión: una salida CMYK real requiere un perfil ICC que esta herramienta intencionadamente no incrusta.
5. OKLCH sigue la ruta de avance de css-color-4: sRGB se linealiza, se multiplica por la matriz LMS, se aplica la raíz cúbica, se multiplica por la matriz LMS-a-OKLab y finalmente se convierte de OKLab rectangular a OKLCH polar. OKLCH es perceptualmente uniforme, lo que lo convierte en el espacio adecuado para diseñar paletas que parezcan equilibradas al ojo humano.

¿Por qué usar este conversor de color?

• Privacidad: cada conversión se ejecuta en tu navegador usando JavaScript puro. El color que pegas nunca sale de tu dispositivo, lo que importa para trabajo de marca no publicado, sistemas de diseño internos y mockups de cliente bajo NDA.
• Traspaso de diseñador a desarrollador: pega el HEX de Figma y obtén la cadena rgb() para una configuración de Tailwind, la cadena hsl() para una propiedad personalizada de CSS, o la cadena oklch() para una paleta moderna — todos los formatos en un solo lugar, sin copiar y pegar entre pestañas.
• Precisión WCAG: el comprobador de contraste usa la fórmula exacta de luminancia relativa de WCAG 2.1 y los umbrales publicados de AA (4,5 / 3,0) y AAA (7,0 / 4,5) para texto normal y grande. La relación reportada coincide con las calculadoras manuales con un margen de 0,01.
• Modo oscuro y derivación de paletas: HSL y OKLCH exponen la luminosidad como un único canal, por lo que es sencillo desplazar un color de marca arriba o abajo en el eje de luminosidad para derivar tokens de modo oscuro emparejados o para generar una rampa de paleta de 10 pasos a partir de una sola semilla.

¿Cuáles son las aplicaciones comunes de la conversión de color?

La conversión de color aparece en el desarrollo web, el diseño y el trabajo de accesibilidad:

• Sistemas de diseño: convertir un HEX de marca en los tokens HSL y OKLCH emparejados para una escala de propiedades personalizadas CSS, y luego verificar que cada combinación de tokens supera WCAG AA frente al fondo de la página.
• Auditorías de accesibilidad: pegar un par de primer plano y fondo de una pantalla real de producto y leer la relación de contraste más los veredictos AA/AAA para texto de peso normal y de peso grande de un solo vistazo.
• Idas y vueltas entre herramientas: tomar un color de un selector de capturas de pantalla (HEX), pegarlo aquí y copiar la cadena hsl() u oklch() directamente a Tailwind, a tokens de Figma o a un tema CSS-in-JS.

¿Cómo es un ejemplo de conversión de color?

Toma el famoso rebeccapurple. La búsqueda de color con nombre lo resuelve a #663399. La conversión RGB da rgb(102, 51, 153). La conversión HSL da hsl(270, 50%, 40%) — un tono violeta, medio saturado, cuatro décimas de brillo. Comprobar ese color frente al blanco puro con la herramienta de contraste devuelve una relación cercana a 7,39, que supera AAA (7,0) para texto normal y AAA (4,5) para texto grande — una elección de primer plano fuerte y accesible. Una ida y vuelta de #663399 a través de RGB → HSL → RGB → HEX devuelve exactamente la cadena original, byte a byte.

Usa este conversor como referencia rápida para cualquier color que encuentres — en código, en archivos de diseño o en una captura de pantalla — y el comprobador de contraste como verificación de cordura antes de publicar. Todo se ejecuta localmente, nada se registra y la matemática de conversión sigue las especificaciones publicadas del W3C y de WCAG, de modo que los números coinciden con lo que reportaría tu herramienta de auditoría o las devtools del navegador.