Convertidor de colores – HEX, RGB, HSL y OKLCH

Cómo convertir un color

1. Escribe un color en el recuadro Color, por ejemplo #6366F1, rgb(99 102 241), hsl(239 84% 67%) o un nombre como teal. También puedes presionar Elegir un color para usar el selector de colores de tu dispositivo.
2. Revisa la vista previa. Una muestra grande enseña el color con un texto de ejemplo en blanco y en negro encima.
3. Copia el formato que necesitas. La lista Formatos muestra HEX, RGB, HSL y OKLCH, cada uno con su botón de copiar.
4. Revisa el contraste. El panel Contraste del texto (WCAG) muestra la relación sobre blanco y sobre negro, y el nivel WCAG más alto que alcanza el color.

Características

• Cuatro formatos de salida a la vez: HEX, RGB, HSL y OKLCH, listos para pegar en CSS.
• Entrada flexible: HEX de 3, 4, 6 y 8 dígitos, rgb(), hsl(), oklch(), sintaxis moderna y antigua, y nombres de color de CSS.
• Soporte de transparencia, con el canal alfa en todos los formatos.
• Selector de colores nativo en el celular y en la computadora.
• Relación de contraste WCAG 2 sobre blanco y sobre negro, con las etiquetas AAA, AA, AA Large o No cumple AA.
• Muestra en vivo con texto de ejemplo en blanco y en negro.
• Mensaje de error amable con ejemplos cuando no se puede leer un valor.

Por qué usar el convertidor de colores de Fileora

Hace las cuentas en tu navegador, así que no hay nada que esperar y no se envía nada a ningún lado, ni siquiera los colores de una marca que todavía no se lanzó. Es gratis, no pide registro y funciona en el celular, algo útil cuando quieres igualar un color que acabas de ver en pantalla.

Combinar la conversión con la revisión de contraste te ahorra un paso: sabes si un color de marca sirve para botones y enlaces antes de que llegue a la revisión de diseño.

HEX, RGB, HSL y OKLCH comparados

HEX es el formato más compacto y el más compatible. #6366F1 son simplemente los valores de rojo, verde y azul escritos en base 16. Es ideal para pasar diseños al equipo de desarrollo, pero difícil de ajustar a ojo.

RGB guarda la misma información como números enteros del 0 al 255. Es útil cuando el color viene del código, por ejemplo de un canvas o de una biblioteca de imágenes.

HSL divide el color en tono, saturación y luminosidad, así que puedes aclarar un color sin cambiar su tono. Su punto débil es que la luminosidad no es perceptual: un amarillo al 50% se ve mucho más brillante que un azul al 50%.

OKLCH corrige eso. Su luminosidad sigue a la visión humana, así que puedes armar una escala de tonos donde cada paso se ve igual de separado, o cambiar el tono manteniendo un contraste de texto parecido. Para design tokens y temas suele ser la mejor opción, con HEX como respaldo para herramientas antiguas.

Cómo acertar con el contraste

Apunta a un mínimo de 4.5:1 para el texto normal y de 3:1 para títulos grandes e íconos. Los tonos medios muchas veces pasan sobre un fondo y fallan sobre el otro, así que revisa blanco y negro si tu sitio tiene modo oscuro. Si un color de marca no cumple, baja un poco su luminosidad OKLCH para el texto y deja el original para fondos y bordes.

Cuando quieras incrustar en tu CSS un ícono pequeño de ese color, el convertidor de imagen a Base64 lo transforma en una data URI. Y para mantener ordenados los archivos de temas en JSON, usa el formateador JSON.