Color Amarillo: código #FFFF00

Amarillo

#FFFF00

Códigos del color

  • HEX#FFFF00
  • RGBrgb(255, 255, 0)
  • HSLhsl(60, 100%, 50%)
  • HSVhsv(60, 100%, 100%)
  • CMYKcmyk(0%, 0%, 100%, 0%)
  • LABlab(97.1% -21.6 94.5)
  • OKLCHoklch(96.8% 0.211 109.8)

Sobre el color Amarillo

Amarillo tiene el código HEX #FFFF00, que corresponde a rgb(255, 255, 0) en el modelo RGB. En el círculo cromático, su tono está en 60°, con 100% de saturación y 50% de luminosidad (hsl(60, 100%, 50%)).

Por su tono se percibe como un color cálido: suele transmitir energía y cercanía y «avanza» visualmente en la composición.

Como fondo pide texto oscuro: el negro alcanza un contraste de 19,55:1 sobre él, frente a 1,07:1 del blanco.

Para impresión, la conversión aproximada es cmyk(0%, 0%, 100%, 0%). Confírmala siempre con el perfil de color de la imprenta, porque el resultado depende del papel y la tinta.

Tonos más claros

Tonos más oscuros

Combinaciones con Amarillo

Complementaria

#FFFF00 · #0000FF

Análoga

#FF8000 · #FFFF00 · #80FF00

Tríada

#FFFF00 · #00FFFF · #FF00FF

Tetrádica

#FFFF00 · #00FF80 · #0000FF · #FF0080

Complementaria dividida

#FFFF00 · #0080FF · #8000FF

Monocromática

#808000 · #CCCC00 · #FFFF00 · #FFFF4D · #FFFF99

Amarillo con texto blanco y negro

Texto blanco Aa Bb Cc 123
1,07:1 · no cumple WCAG
Texto negro Aa Bb Cc 123
19,55:1 · AAA

Prueba otras combinaciones en el verificador de contraste

Lo primero: amarillo y legibilidad

El amarillo puro, #FFFF00, es el color más claro del espectro después del blanco. En la práctica, eso implica dos cosas. Primero, el texto negro sobre amarillo tiene un contraste de unos 19,6:1, una de las parejas más legibles que existen, y por eso dominan las señales de advertencia, las cintas de obra y la señalización de seguridad. Segundo, el amarillo sobre blanco (o el texto blanco sobre amarillo) se queda en apenas 1,07:1: prácticamente invisible.

Nunca uses el amarillo como color de texto sobre fondo claro. Si tu interfaz necesita un “texto amarillo”, oscurécelo hacia un ámbar o un mostaza y compruébalo en el verificador de contraste. La guía de contraste y accesibilidad explica los niveles AA y AAA.

Significado y percepción

El amarillo suele evocar sol, alegría, calor y optimismo, pero también atención y precaución. En parte de Asia se asoció históricamente con la realeza. En varios países de habla hispana arrastra connotaciones propias: en el mundo del teatro hay quien lo considera de mala suerte, y en algunos lugares las flores amarillas se relacionan con la despedida, aunque en México son protagonistas del Día de Muertos por su simbolismo. En exceso, el amarillo cansa la vista, tanto en pantalla como en una pared.

Combinaciones recomendadas

ColorEfecto
Gris #808080Equilibra la energía del amarillo; pareja moderna en decoración.
Azul marino #000080Contraste fuerte, pero más elegante que el negro.
Negro #000000Máxima visibilidad, lenguaje de señalización.
Morado #800080Complementario en el círculo tradicional; vibrante y atrevido.

Dónde brilla el amarillo

En branding, el amarillo encaja con marcas cercanas de comercio y alimentación, sobre todo como acento junto a un tono oscuro. En UI es el color tradicional de advertencia, entre el verde de éxito y el rojo de error. En moda, el amarillo puro es difícil de llevar cerca del rostro; tonos más cálidos como el mostaza o metálicos como el dorado son más fáciles de combinar. En impresión es de los colores que mejor sobreviven a la conversión: #FFFF00 pasa a cmyk(0%, 0%, 100%, 0%), prácticamente el propio amarillo de proceso.

Cómo usarlo en CSS

:root {
  --color-yellow: #FFFF00;
  --color-yellow-rgb: 255, 255, 0;
}

.elemento {
  background-color: var(--color-yellow);
  color: #000000;
}