Selector de colores HTML y códigos de color

Guía de códigos de color HTML y del selector de colores

En diseño web y desarrollo frontend se usan varias notaciones para un mismo color: HEX, RGB y HSL. HEX resulta compacto en los archivos CSS, RGB es práctico para los cálculos y la transparencia, y HSL facilita la lectura del tono, la saturación y la luminosidad. Este selector de colores HTML permite elegir entre 40 colores de la paleta, introducir HEX, usar el selector nativo o ajustar los canales R, G y B. Muestra al instante los valores RGB y HSL, el contraste del texto blanco y negro y los indicadores WCAG AA/AAA. Puedes copiar HEX, RGB o HSL por separado, o una declaración CSS de una línea para pegarla en tu proyecto.

La conversión de colores se realiza por completo en tu navegador. Prueba un color de una maqueta, una variable CSS, Figma o una propuesta de paleta de marca y compara el resultado al instante. El contraste utiliza el cálculo de luminancia relativa de las relaciones de contraste WCAG. Una evaluación completa de accesibilidad también depende del tamaño y grosor del texto, los controles que lo rodean y el contexto real. Usa la herramienta para una primera comprobación y para convertir códigos, y revisa la interfaz real antes de publicarla.

Tabla de referencia: 20 colores HTML

Esta tabla recoge 20 colores HTML habituales con sus valores HEX, RGB y HSL. También muestra el contraste del texto blanco y negro sobre cada color de fondo y los niveles WCAG: AA con 4,5:1, AA para texto grande con 3:1 y AAA con 7:1. Los valores se calculan con el mismo motor que utiliza el selector. La paleta interactiva de 40 colores añade otras 20 opciones, como crimson, tomato, coral, dodgerblue, royalblue, indigo, magenta y chocolate.

Formatos de código de color de un vistazo

• #RRGGBB: HEX de seis dígitos, una notación habitual en CSS. #FF0000 = rojo.
• #RGB: abreviatura de tres dígitos que repite cada uno. #F00 = #FF0000.
• rgb(255, 0, 0): canales decimales de 0 a 255, prácticos para cálculos y JavaScript.
• rgba(255, 0, 0, 0.5) / #FF000080: los dos últimos dígitos de HEX de ocho dígitos guardan el alfa (00=0%, 80≈50%, FF=100%).
• hsl(0, 100%, 50%): tono, saturación y luminosidad. Cambia L para ajustar la luminosidad.
• Nombres de color CSS (red, dodgerblue): busca entre los 40 colores seleccionados de esta herramienta. La paleta no incluye todos los colores con nombre de CSS.

Modo de uso

1. Elige un color de la paleta, introduce HEX, usa el selector o ajusta los valores R, G y B.
2. Observa la vista previa grande y el color de texto elegido automáticamente. HEX de ocho dígitos muestra la transparencia sobre un patrón de cuadros.
3. Consulta los valores RGB y HSL, las relaciones de contraste del texto blanco y negro y los indicadores AA/AAA.
4. Usa el botón de copia HEX, RGB o HSL para llevar al portapapeles el formato que necesites.
5. Pulsa Copiar código CSS, o Intro en un campo de color, para copiar una declaración de una línea como color: #336699; a CSS o a una herramienta de diseño.

Umbrales de contraste para accesibilidad web

Estos son umbrales mínimos de contraste de WCAG 2.x. Los indicadores del resultado, como AA ✓ y AAA ✗, utilizan los valores siguientes.

Crear un color a partir de valores RGB

Si una maqueta o un documento de trabajo indica valores RGB, introdúcelos en los campos R, G y B para calcular al instante HEX, HSL y el contraste. Los valores fuera de 0 a 255 se ajustan al intervalo y los decimales se redondean. Si falta un canal, la herramienta solicita el dato en vez de tratarlo como cero, para evitar que una entrada incompleta se convierta en negro sin avisar. Los botones de copia HEX, RGB y HSL facilitan el trabajo entre código y herramientas de diseño.

Diferencias entre HEX, RGB y HSL

HEX expresa rojo, verde y azul en hexadecimal como #RRGGBB y es habitual en CSS. RGB expresa los mismos canales con valores decimales de 0 a 255 y resulta útil para cálculos y transparencia RGBA. HSL usa tono, saturación y luminosidad, lo que facilita ajustar la luminosidad de un color. Ver los tres formatos a la vez ayuda a elegir la notación adecuada para cada tarea.

Cómo interpretar el resultado de contraste

El contraste del texto compara la luminancia relativa del primer plano y del fondo. Una relación cercana a 1:1 dificulta la distinción; una cercana a 21:1 resulta más clara. La herramienta compara texto blanco y negro sobre el color elegido, selecciona la opción de mayor contraste para la vista previa e indica AA (4,5:1), AA para texto grande (3:1) y AAA (7:1). Sobre azul #0000FF, el texto blanco alcanza 8,59:1 y cumple AAA; el negro obtiene 2,44:1 y queda por debajo de los umbrales de texto indicados.

Uso de una paleta de marca

Anota HEX, RGB y HSL al elegir colores de marca para poder identificar el mismo color digital en código, herramientas de diseño y documentación. Comprueba el contraste del texto blanco y negro en cada propuesta para elegir el color del texto de botones, etiquetas y banners. El resultado impreso requiere su propia revisión de gestión del color.

No es una tabla de colores de resistencias

Estos códigos de color son valores HEX/RGB para páginas web, CSS y HTML. La herramienta no interpreta bandas de resistencias electrónicas ni calcula su valor. Para esas tareas, utiliza una calculadora de electrónica.

Fuentes y alcance de la revisión

• Cálculo de contraste: luminancia relativa y relación de contraste de WCAG 2.2. El umbral de 0,03928 del motor conservado y el umbral actual de 0,04045 producen los mismos cálculos de canal para los 256 valores de ocho bits. Los niveles se evalúan con la relación sin redondear.
• La paleta de 40 colores utiliza los valores de los colores con nombre de CSS, como red y dodgerblue.
• Revisión del 2026-10-31: HEX de tres, seis y ocho dígitos, límites RGB y canales vacíos, HSL, contraste, umbrales AA/AAA y búsqueda de colores.

Esta utilidad convierte códigos de color y ayuda con comprobaciones preliminares de contraste. No sustituye herramientas de color de gama amplia, la conversión CMYK para impresión ni una auditoría detallada de accesibilidad. Usa herramientas específicas y revisa la pantalla real cuando necesites precisión.