Ir al contenido
Calcuplay
Idioma: Español es
Tecnología

Conversor de colores HEX, RGB, HSL y contraste

Elige un color para obtener sus códigos HEX, RGB y HSL, y prueba su legibilidad sobre un fondo. #0F766E se escribe rgb(15, 118, 110) y hsl(175, 77 %, 26 %).

Código HEX

Código HEX

#0F766E

rgb(15, 118, 110) · hsl(175, 77%, 26%)

Tono
175°
Saturación
77 %
Luminosidad
26 %

Comprobación de contraste

Color del texto
Color del fondo

Texto de ejemplo

Texto de ejemplo

Relación de contraste5,47:1

  • AA · texto normal ≥ 4,5:1Aprobado
  • AA · texto grande ≥ 3:1Aprobado
  • AAA · texto normal ≥ 7:1Suspenso
  • AAA · texto grande ≥ 4,5:1Aprobado
  • Componentes de interfaz (AA) ≥ 3:1Aprobado

Pequeño reto

Racha 0Récord 0

Ponte a prueba: cada respuesta la calcula la herramienta, y las opciones falsas son las trampas más comunes.

Cómo funciona

Fórmula: Contraste = (L1 + 0,05) ÷ (L2 + 0,05)

Un código HEX escribe en hexadecimal los tres componentes rojo, verde y azul, de 0 a 255 cada uno: #FF8000 = rojo 255, verde 128, azul 0. El HSL describe el mismo color por su tono (un ángulo en el círculo cromático), su saturación y su luminosidad. Para el contraste se calcula la luminancia relativa de cada color según la definición de las WCAG 2.2, y luego la relación (L1 + 0,05) ÷ (L2 + 0,05), que va de 1:1 a 21:1. El texto normal debe alcanzar 4,5:1 en el nivel AA (7:1 en AAA), el texto grande (18 pt, o 14 pt en negrita) 3:1 (4,5:1 en AAA), y los componentes de interfaz 3:1. La relación nunca se redondea hacia arriba: 4,49:1 no pasa.

Ejemplos prácticos

  • El rojo puro #FF0000

    rgb(255, 0, 0) = hsl(0, 100 %, 50 %).

  • Negro sobre blanco

    El contraste máximo: 21:1.

  • Gris #777777 sobre blanco

    Contraste 4,47:1, justo por debajo del mínimo de 4,5:1 del nivel AA para texto normal.

Errores frecuentes

  • Juzgar a ojo que un gris es «bastante oscuro».

    #777777 sobre blanco da 4,47:1: el texto normal necesita al menos 4,5:1.

  • Leer #F0C como un color incompleto.

    Es la forma corta de #FF00CC: cada cifra se duplica.

  • Creer que el orden texto/fondo cambia el contraste.

    Blanco sobre #777777 también da 4,47:1: la relación es la misma en los dos sentidos.

Colores comunes y su contraste

Colores comunes y su contraste
Código HEXRGBHSLSobre blancoSobre negro
#0000000, 0, 00°, 0%, 0%21:11:1
#FFFFFF255, 255, 2550°, 0%, 100%1:121:1
#FF0000255, 0, 00°, 100%, 50%3,99:15,25:1
#00FF000, 255, 0120°, 100%, 50%1,37:115,3:1
#0000FF0, 0, 255240°, 100%, 50%8,59:12,44:1
#FFFF00255, 255, 060°, 100%, 50%1,07:119,55:1
#00FFFF0, 255, 255180°, 100%, 50%1,25:116,74:1
#FF00FF255, 0, 255300°, 100%, 50%3,13:16,69:1
#808080128, 128, 1280°, 0%, 50%3,94:15,31:1
#767676118, 118, 1180°, 0%, 46%4,54:14,62:1
#0F766E15, 118, 110175°, 77%, 26%5,47:13,83:1

Preguntas frecuentes

¿Cómo se convierte un código HEX a RGB?

Divide el código en tres pares y convierte cada uno de hexadecimal a decimal: #1E90FF da 1E = 30, 90 = 144 y FF = 255, es decir, rgb(30, 144, 255).

¿Qué contraste necesita un texto legible?

Las WCAG 2.2 piden al menos 4,5:1 para el texto normal en el nivel AA, y 7:1 en el nivel AAA. El texto grande puede bajar a 3:1 en AA. Sobre blanco, el gris #767676 pasa justo (4,54:1), mientras que #777777 no (4,47:1).

¿Qué diferencia hay entre RGB y HSL?

Son dos formas de escribir el mismo color. El RGB mezcla rojo, verde y azul; el HSL parte de un tono y ajusta la saturación y la luminosidad, lo que facilita crear versiones más claras u oscuras de un color.

Calculadoras de tecnología

Calculadoras de tecnología

Herramientas relacionadas

Guías relacionadas

Otras calculadoras