Artículo
Herramientas de color para la web: hex, paletas y accesibilidad
Elegir colores para un sitio web parece sencillo hasta que te enfrentas a códigos hex, tripletas RGB y ángulos HSL que describen lo mismo de formas distintas. Este artículo explica cómo se relacionan esos formatos, cómo convertir un único color de marca en una paleta utilizable y cómo asegurarte de que el resultado siga siendo legible para las personas que perciben el color de otra manera.
Hex, RGB y HSL describen el mismo color
Un color en pantalla se mezcla a partir de luz roja, verde y azul. La notación hex escribe esos tres canales como un código de seis caracteres, por ejemplo #2563eb, donde cada par de caracteres es un canal de 00 a ff. El RGB escribe los mismos tres números en decimal, de 0 a 255, lo que resulta más fácil de leer pero no aporta nada más. El HSL adopta un enfoque distinto: describe un color por su tono (una posición en la rueda cromática de 0 a 360 grados), su saturación (cuán vivo es) y su luminosidad (cuán cercano al blanco o al negro). El HSL es el formato al que recurren los diseñadores cuando quieren ajustar un color, porque subir la luminosidad o desplazar el tono es un solo cambio intuitivo en lugar de tres números acoplados. Un conversor te permite pasar entre los tres, de modo que puedes leer un valor en un formato y usarlo en otro.
Convertir un color en una paleta
Un único color de marca rara vez basta. Una paleta que funciona suele necesitar un color principal, uno o dos acentos y un conjunto de grises neutros para el texto y los fondos. Las relaciones entre los colores siguen reglas sencillas en la rueda cromática: los colores complementarios se sitúan enfrentados, los colores análogos quedan contiguos para una sensación serena y un conjunto triádico reparte tres colores de forma uniforme para lograr contraste sin choques. Una herramienta de esquemas de color aplica estas reglas a tu color de partida y te da los códigos hex correspondientes, así no tienes que calcular los ángulos a mano. Si ya tienes una imagen cuyo ambiente te gusta, un extractor de paletas lee sus colores dominantes, una forma rápida de basar un sitio en una foto o un logotipo.
Contraste y daltonismo
Una paleta que se ve bien en tu pantalla aún puede fallarles a algunos lectores. Aproximadamente uno de cada doce hombres y una de cada doscientas mujeres tienen alguna forma de deficiencia en la visión del color, lo más habitual es la dificultad para separar el rojo del verde. Si tu única señal de un error es un texto rojo sobre un botón verde, esos lectores no la perciben. La solución no es evitar el color, sino no depender nunca solo de él: combínalo con un icono, una etiqueta o una forma, y mantén suficiente contraste de luminosidad entre el texto y su fondo. Un simulador de daltonismo te muestra cómo se ve tu paleta en los tipos comunes de visión del color, de modo que puedes detectar un problema antes de publicar en lugar de después de una queja.
Hacer todo esto en el navegador
Ninguno de estos pasos necesita un servidor. Convertir un código hex, generar un esquema, leer los colores de una imagen y simular el daltonismo son cálculos pequeños que un navegador resuelve al instante. Eso importa cuando la imagen que estás muestreando es un diseño sin publicar o el logotipo de un cliente: con las herramientas de aquí, el archivo permanece en tu dispositivo y no se envía nada. Obtienes el mismo resultado que con un servicio en línea, sin entregar el material gráfico. El conversor de color, el generador de esquemas de color, el extractor de paletas y el simulador de daltonismo se ejecutan todos en local y funcionan igual sin conexión una vez cargada la página.
OKLCH y los espacios de color más amplios
Hex, RGB y HSL describen colores dentro del espacio sRGB que las pantallas han utilizado durante años. Las pantallas más recientes muestran más, y CSS puede alcanzar ese rango con la función color() y el espacio Display P3, que incorpora verdes y rojos vivos que sRGB no puede representar. El cambio más relevante es OKLCH, una forma de expresar el color en términos de luminosidad, croma y matiz que refleja cómo el ojo percibe realmente el brillo. En HSL, un amarillo y un azul con la misma luminosidad del 50% no se parecen en nada: el amarillo se ve claro, el azul se ve oscuro. En OKLCH, mantener fija la luminosidad y cambiar solo el matiz conserva el brillo percibido sin variaciones. Eso permite construir una paleta donde cada tono alcanza el mismo objetivo de contraste con solo fijar un número, en lugar de ajustar cada color a mano.
Herramientas en este artículo
- Convertidor de coloresConvierte colores entre HEX, RGB, HSL, HSV y CMYK. Verificador de contraste WCAG incluido. Sin subida.
- Generador de esquemas de colorGenera paletas complementarias, análogas, triádicas, tetrádicas y monocromáticas a partir de un color base. Sin subida.
- Extractor de paleta de coloresExtrae colores dominantes de una imagen como muestras HEX. Copia cualquier color. Sin subida.
- Simulador de daltonismoSimula protanopia, deuteranopia, tritanopia y acromatopsia en una imagen. Sin subida.
Preguntas frecuentes
¿Cuál es la diferencia entre hex y RGB?
Son dos maneras de escribir el mismo color. El hex agrupa los canales rojo, verde y azul en un código de seis caracteres en base 16, mientras que el RGB enumera esos mismos tres canales como números decimales de 0 a 255. #ff0000 y rgb(255, 0, 0) son el mismo rojo. El hex es compacto y habitual en CSS y en los archivos de diseño, el RGB se lee con más facilidad de un vistazo, y pasar de uno a otro no cambia nada del color en sí.
¿Cómo sé si mis colores son legibles para los usuarios daltónicos?
Pasa tu paleta por un simulador de daltonismo, que redibuja tus colores tal como los vería una persona con cada tipo común de visión del color. Fíjate en los pares que se funden en el mismo matiz, sobre todo los rojos y los verdes. La costumbre más segura es no usar nunca el color como única señal: respáldalo con texto, un icono o un patrón, y mantén una diferencia de luminosidad clara entre el primer plano y el fondo, para que el significado perviva incluso cuando el tono no lo haga.