Color Naranja: código #FFA500

Naranja

#FFA500

Códigos del color

  • HEX#FFA500
  • RGBrgb(255, 165, 0)
  • HSLhsl(39, 100%, 50%)
  • HSVhsv(39, 100%, 100%)
  • CMYKcmyk(0%, 35%, 100%, 0%)
  • LABlab(74.9% 23.9 79)
  • OKLCHoklch(79.3% 0.171 70.7)

Sobre el color Naranja

Naranja tiene el código HEX #FFA500, que corresponde a rgb(255, 165, 0) en el modelo RGB. En el círculo cromático, su tono está en 39°, con 100% de saturación y 50% de luminosidad (hsl(39, 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 10,63:1 sobre él, frente a 1,97:1 del blanco.

Para impresión, la conversión aproximada es cmyk(0%, 35%, 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 Naranja

Complementaria

#FFA500 · #0059FF

Análoga

#FF2600 · #FFA500 · #D9FF00

Tríada

#FFA500 · #00FFA6 · #A600FF

Tetrádica

#FFA500 · #00FF26 · #0059FF · #FF00D9

Complementaria dividida

#FFA500 · #00D9FF · #2600FF

Monocromática

#805300 · #CC8500 · #FFA500 · #FFC14D · #FFDB99

Naranja con texto blanco y negro

Texto blanco Aa Bb Cc 123
1,97:1 · no cumple WCAG
Texto negro Aa Bb Cc 123
10,63:1 · AAA

Prueba otras combinaciones en el verificador de contraste

El naranja de esta página es #FFA500, el color con nombre orange de CSS. Es más amarillento que el naranja que mucha gente imagina (el de la fruta o el de un cono de tránsito). Si buscas algo más rojizo, compáralo con darkorange (#FF8C00) o con el coral, que tira hacia el rosa.

Significado y percepción

Al estar entre el rojo y el amarillo, el naranja toma la energía de uno y la ligereza del otro. Se asocia con entusiasmo, creatividad, calidez e informalidad, y también con alerta: chalecos reflectantes, salvavidas y conos usan naranja porque destaca sobre casi cualquier paisaje. En México, además, es inseparable del Día de Muertos por la flor de cempasúchil. En otras culturas tiene lecturas religiosas (el azafrán en el hinduismo y el budismo) o políticas. Como cualquier color, el naranja no tiene un significado fijo.

Dónde funciona el naranja

Cómo combinarlo

La combinación más potente es con el azul marino (#000080), ya que azul y naranja son complementarios en el círculo tradicional. Para algo más tropical, prueba el verde azulado (#008080) o el turquesa (#40E0D0). En paletas terrosas, el naranja se entiende con el marrón (#8B4513) y respira sobre el blanco roto (#FAF9F6). La guía de armonía del color muestra cómo llegar a estas parejas.

Consejo: naranja en modo claro y oscuro

Con texto blanco, #FFA500 solo alcanza 1,97:1; con texto negro, llega a 10,6:1. Es decir, un botón naranja pide texto oscuro. Si la marca exige texto blanco, oscurece el naranja hasta algo como #B35C00, que queda cerca de 4,7:1. En modo oscuro ocurre lo contrario: el #FFA500 original funciona muy bien como acento sobre fondos casi negros, sin ningún ajuste.

Cómo usarlo en CSS

:root {
  --color-orange: #FFA500;
  --color-orange-rgb: 255, 165, 0;
}

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