HEX, RGB y HSL explicados

Cada color de una pantalla es una mezcla de luz roja, verde y azul. Un código hex escribe esas tres cantidades como pares de dígitos en base 16, desde 00 (nada) hasta FF (todo, que equivale a 255). Así, #FF0000 es rojo total sin verde ni azul, #808080 es un gris medio y #4F98FB tiene un poco de rojo, bastante verde y casi todo el azul, lo que se ve como un azul cielo claro.

RGB dice exactamente lo mismo con números normales: rgb(79, 152, 251). HSL describe el color como la gente suele pensar en él: el tono es la posición en una rueda cromática de 0 a 360 grados, la saturación es su intensidad y la luminosidad va del negro en 0% al blanco en 100%. Para oscurecer un poco un color, bajar la luminosidad en HSL es mucho más fácil que adivinar nuevos dígitos hex.

OKLCH es el más nuevo de los cuatro. Su valor de luminosidad está diseñado para coincidir con lo claros que las personas perciben los colores, de modo que un amarillo y un azul con la misma L parecen igual de claros. Eso lo convierte en un formato fiable para crear paletas con pasos uniformes.

¿Qué formato deberías usar?

Usa hex cuando compartas un color con otra persona, lo pegues en una herramienta de diseño o definas los colores de marca en un creador de sitios web: casi todas las herramientas lo aceptan. Usa RGB o HSL en CSS cuando quieras añadir transparencia o ajustar un color a mano. Usa OKLCH cuando crees una paleta completa en CSS y quieras que la luminosidad sea uniforme entre tonos distintos.

Elijas el que elijas, todos describen el mismo color. Copiar el valor de esta página en otro formato no cambia su aspecto.

Elige un color de marca que funcione en un sitio web

Un color de marca debe cumplir varias funciones: destacar en botones, mantener la legibilidad del texto blanco y no cansar la vista en toda la página. Los azules medios, verdes y rojos oscuros suelen lograrlo. Los colores muy claros (amarillo, rosa pastel) quedan bien en un logo, pero son malos para los botones porque ni el texto blanco ni el negro se leen bien sin ajustes.

El panel de contraste lo muestra enseguida. Si el texto blanco tiene menos de 4.5:1, usa texto negro o elige para los botones un matiz más oscuro de la escala.

Tonos, matices y una paleta sencilla

Los tonos mezclan el color con blanco; los matices, con negro. Una paleta práctica para un sitio web solo necesita unos pocos: un tono muy claro para los fondos de sección, el color principal para botones y enlaces, y un matiz más oscuro para los estados hover. Añade grises neutros para el texto y los bordes y tendrás un conjunto completo y coherente.

Para comprobar una combinación específica de texto y fondo (por ejemplo, texto gris sobre un fondo teñido), usa el comprobador de contraste de color, que calcula las puntuaciones WCAG AA y AAA.

Cómo funciona

Usa el selector de color o escribe un valor como #4F98FB, rgb(79, 152, 251) o hsl(215, 95%, 65%). El # es opcional, y también funciona la abreviatura de tres dígitos como #39F.

Para ver o comprobar un código hex, pégalo. Si el código no es válido (por ejemplo, tiene una letra posterior a la F o un número incorrecto de dígitos), el cuadro se pone rojo.

Copia cualquier formato con un clic. OKLCH es el formato CSS moderno que mantiene constante la luminosidad entre tonos.

Haz clic en cualquier tono o matiz para convertirlo en el color actual.

Consulta las proporciones de contraste para decidir si este color admite texto blanco o negro.

Consejos

Para los botones, intenta lograr un contraste de al menos 4.5:1 entre el texto y el color del botón.

Crea una paleta a partir de un color de marca: un tono claro para fondos, el color base para botones, un matiz oscuro para estados hover y texto.

Las pantallas varían. Comprueba el color de marca en un teléfono y en una laptop.

Preguntas frecuentes

¿Qué es un código de color hexadecimal?

Es un código de seis dígitos para un color de pantalla, escrito como # seguido de tres pares de dígitos hexadecimales para rojo, verde y azul. #FF0000 es rojo puro; #000000, negro; #FFFFFF, blanco.

¿Cuál es la diferencia entre HEX, RGB y HSL?

Describen los mismos colores de formas distintas. HEX y RGB indican las cantidades de rojo, verde y azul. HSL indica el tono (ángulo en una rueda cromática), la saturación y la luminosidad, que son más fáciles de ajustar a mano.

¿Qué es OKLCH y debería usarlo?

OKLCH es un formato de color CSS más reciente, basado en la percepción humana del color. Dos colores con el mismo valor L parecen igual de luminosos, lo que facilita crear paletas coherentes. Todos los navegadores principales actuales lo admiten.

¿Cómo se calcula el contraste?

Con la fórmula WCAG 2: la luminancia relativa del color más claro más 0.05, dividida entre la del color más oscuro más 0.05. Para comprobar dos colores en detalle, usa el comprobador de contraste de color de We.Inc.

¿Cómo compruebo qué color es un código hex?

Pega el código en el cuadro de la parte superior de esta página. La muestra enseña el color y obtienes los valores RGB, HSL y OKLCH correspondientes, además de versiones más claras y más oscuras. Si el cuadro se pone rojo, el código no es un valor hex válido de tres o seis dígitos.

¿Qué significa un código hex de tres dígitos como #F80?

Es una abreviatura en la que cada dígito se duplica. #F80 es el mismo color que #FF8800. Solo los colores cuyos pares se repiten pueden escribirse así.

¿Los códigos hex distinguen entre mayúsculas y minúsculas?

No. #4f98fb y #4F98FB son el mismo color. Elige un estilo y mantenlo en tu código para que los valores sean fáciles de buscar.

¿Cómo convierto hex a RGB a mano?

Divide los seis dígitos en tres pares y convierte cada par de base 16 a base 10. Para #4F98FB: 4F es 4 x 16 + 15 = 79, 98 es 9 x 16 + 8 = 152 y FB es 15 x 16 + 11 = 251, así que el color es rgb(79, 152, 251). El selector lo hace por ti.

¿Cómo obtengo el código hex de un color de mi pantalla?

Haz clic en el pequeño cuadrado de color junto al cuadro de texto para abrir el selector de color del navegador. Algunos navegadores incluyen ahí un cuentagotas que toma un color de la pantalla; si el tuyo no lo tiene, haz una captura de pantalla, usa el cuentagotas de cualquier editor de imágenes y pega aquí el código.

Selector de color HEX

Selector y comprobador de color HEX: HEX, RGB, HSL | We.Inc

Selector y comprobador de color HEX gratis: elige un color o pega un código hex para verlo y copia los valores HEX, RGB, HSL y OKLCH, tonos, matices y contraste.