¿Qué es un código de color hex?
Un código de color hex (color hexadecimal) es la forma más común de especificar colores en diseño web y CSS. Se escribe como un # seguido de seis caracteres hexadecimales — dos para cada canal de rojo, verde y azul: #RRGGBB. Cada par va de 00 (nada) a FF (completo), dando 16.777.216 combinaciones de colores posibles.
Ejemplos: #000000 es negro, #FFFFFF es blanco, #FF0000 es rojo puro. Una forma abreviada (#RGB) funciona cuando ambos dígitos de cada canal coinciden — #FF4400 se puede escribir como #F40. Una forma de ocho caracteres (#RRGGBBAA) agrega un canal alfa (opacidad).
Códigos de color HEX
Los códigos hex se usan en HTML, CSS, SVG y herramientas de diseño. Son compactos, inequívocos y tienen soporte universal. En CSS los puedes escribir en minúsculas o mayúsculas — #f04a00 y #F04A00 son idénticos. Usa el selector de color de arriba para encontrar el código hex de cualquier color.
Colores RGB
rgb(r, g, b) expresa cada canal como un número entero de 0 a 255. La función también acepta un valor de opacidad: rgba(255, 68, 0, 0.5) se renderiza al 50% de opacidad. En CSS Color Level 4 se prefiere la sintaxis con barra rgb(255 68 0 / 50%), y rgba() es un alias de rgb().
Colores HSL
hsl(tono, saturación%, luminosidad%) suele ser más intuitivo para diseñadores. El tono es un grado en la rueda de colores (0–360°), la saturación controla la viveza, y la luminosidad controla el brillo. Ajustar solo la luminosidad, manteniendo el tono y la saturación constantes, produce tintes y sombras del mismo color — útil para generar escalas de color en interfaces.
Códigos de color HTML y colores con nombre en CSS
CSS define 140 colores con nombre que se pueden usar directamente en HTML y CSS sin necesidad de un código hex — color: tomato, background: steelblue, border-color: goldenrod. Nombres comunes: black, white, red, green, blue, gray, orange, purple, pink, brown. Usa los colores con nombre por legibilidad en el código fuente, y códigos hex cuando necesites un color exacto.
Elegir códigos de color accesibles
WCAG 2.1 AA exige una relación de contraste de al menos 4.5:1 para texto normal y 3:1 para texto grande (18pt o 14pt en negrita) respecto a su fondo. Texto oscuro sobre fondo claro o texto claro sobre fondo oscuro son las combinaciones más seguras. Herramientas como el verificador de contraste de las DevTools del navegador pueden evaluar cualquier par de códigos hex.
Preguntas frecuentes
¿Cómo encuentro el código hex de un color?
Usa el selector de color de arriba — arrastra hasta cualquier color y el código hex, RGB y HSL se actualizan al instante. En herramientas de diseño: Figma, Photoshop y Sketch muestran el código hex en el panel de relleno/color. En un navegador: abre las DevTools, inspecciona un elemento y hace clic en la muestra de color junto a cualquier valor CSS para abrir un selector integrado que muestra el código hex. En macOS, la app integrada Digital Color Meter muestra el código hex de cualquier píxel de la pantalla.
¿Cuál es la diferencia entre los colores HEX y RGB?
Representan el mismo color en formatos distintos. HEX (#FF4400) codifica cada canal como dos dígitos hexadecimales. RGB (rgb(255, 68, 0)) usa números enteros decimales de 0 a 255. Ambos tienen soporte total en CSS — usa el que te resulte más legible para tu flujo de trabajo. Los códigos hex son más compactos; RGB facilita ajustar canales individuales matemáticamente.
¿Qué es RGBA?
rgba(r, g, b, a) es RGB con un canal alfa agregado para la opacidad. El valor alfa va de 0 (totalmente transparente) a 1 (totalmente opaco) — por ejemplo, rgba(255, 0, 0, 0.5) es rojo al 50% de transparencia. En el CSS moderno, rgb(255 0 0 / 50%) es equivalente.
¿Qué son los nombres de colores CSS?
CSS define 140 colores con nombre — de aliceblue a yellowgreen — que los navegadores reconocen sin necesidad de un código hex. Cubren colores comunes (rojo, azul, verde) y tonos más específicos (coral, teal, lavanda). Los colores con nombre son prácticos para prototipos, pero hex o RGB suele ser más preciso en producción.