Naranja es el color secundario vibrante entre rojo y amarillo en el círculo cromático. Cuando se usa en los entornos adecuados, evoca sentimientos de diversión y emoción. Puedes crear tonos más claros y alegres de naranja añadiendo más amarillo o un naranja más oscuro e intenso añadiendo más rojo.
Para lograr consistencia en múltiples plataformas y dispositivos, utiliza los códigos de color específicos relacionados con naranja.
- Código HEX: #FFA500
- Valor RGB: 100% rojo, 64.7% verde y 0% azul
Aquí hay algunas formas de usar naranja en tus diseños:
- Indicar áreas importantes o clicables. Usa naranja para elementos que necesitan sentirse dinámicos y atractivos, como efectos de hover u otros elementos interactivos.
- Resaltar llamadas a la acción. Combina naranja con un fondo neutro para hacer que el texto o los botones resalten.
- Guiar a los espectadores con acentos. Usa naranja para acentos en íconos o ilustraciones para añadir un toque de color y guiar la mirada del espectador.
- Indicar progreso con señales visuales. El naranja puede usarse para indicar progreso positivo o la finalización de tareas, formularios o procesos dentro de la interfaz.
Ten en cuenta que el color y su significado pueden variar según la cultura y el contexto. Si diseñas para una audiencia internacional, investiga cómo se perciben los colores en cada país.
Para variaciones dentro del mismo espectro energético que el naranja, considera:
- Rojo (#FF2C2C) es un color audaz y estimulante que coincide con el calor energético del naranja.
- Rojo anaranjado (#FF4B33) es naranja infundido con la intensidad ardiente del rojo, haciéndolo más audaz y dramático.
- Amarillo anaranjado (#FFB800) capitaliza la esencia alegre del naranja con un toque más ligero.
- Naranja oscuro (#C76E00) comparte el calor del naranja pero con una intensidad más profunda.
El naranja se combina maravillosamente con paletas de colores que realzan o atenúan su vibración, como azules profundos o cremas neutros. Para complementar el naranja, considera combinarlo con:
- Azul marino (#000080) es un color complementario que contrasta bien con el naranja.
- Carbón (#4A4A4A) es versátil y maduro, lo que combina bien con la energía vibrante y alegre del naranja.
- Crema (#FDFBD4) crea una calidez natural cuando se combina con naranja.
- Negro (#000000) ofrece una declaración audaz y dramática para cualquier diseño.
Acentos más brillantes como el verde petróleo o el morado también crean paletas de colores audaces con naranja. Aunque hacen más declaración, estos colores añaden un toque de energía y se inclinan hacia la diversión del naranja.
Aunque el naranja es brillante y audaz, puede chocar con:
- Verde neón (#2CFF05) puede crear un contraste visual extremo cuando se combina con naranja.
- Marrón (#895129) combinado con naranja puede hacer que un diseño se vea plano porque no hay suficiente contraste para que cualquiera de los colores resalte.
- Fucsia (#FE3894) con naranja puede crear un aspecto intenso donde el naranja parece estar en desacuerdo con el vibrante fucsia.
- Verde esmeralda (#00674F) y naranja crean unfuerte contraste que puede ser chocante. Es como presentar dos energías opuestas a la vez.
La energía vibrante del naranja captura el espíritu de entusiasmo y simboliza la amistad, la felicidad e incluso la prosperidad. A través de diversas culturas, el naranja tiene significados variados. En la mitología griega, los dioses vestidos de naranja a menudo representaban la inmortalidad, mientras que en religiones orientales como el hinduismo y el budismo, el naranja es venerado como un color sagrado.
Los psicólogos del color a menudo asocian el naranja con emociones y actitudes que inspiran acción u optimismo. Esto incluye fomentar la creatividad, la autoexpresión y un sentido de diversión.
En el diseño de interfaces, el naranja se usa frecuentemente para incitar a la acción a través de botones de CTA, transmitir advertencias o alertas, y enfatizar información crítica. Su energía vibrante ofrece una impresión amigable y creativa, lo que lo convierte en una opción popular para marcas con identidades similares, como Dunkin’ Donuts o Reese’s.
La palabra “naranja” deriva de la palabra persa antigua “nārang,” que se refiere a la fruta de naranja amarga. La palabra inglesa “orange” también apareció en el siglo XII y probablemente se derivó de la palabra francesa “orenge.”
Este color intenso fue un favorito entre artistas como Vincent van Gogh. Puedes encontrar representaciones de naranja en una variedad de sus pinturas.
El naranja tuvo otro momento de auge durante el siglo XX cuando se usó principalmente para decoraciones teatrales y adornos de vestuario. Una vez que el tinte se hizo más comercialmente disponible, se asoció con la asequibilidad y la alegría.
Variantes de color
Sombras
Tintes
Tonos
Matices
Armonías de color
Complementario
Dividido
Monocromático
Análogo
Triádico
Cuadrado
Paletas personalizadas
Infusión Cítrica
Citrino Celestial
Renacer del Fénix
Verificador de contraste
Contraste 1,97
- Texto grande
#FFA500
- Texto normal
Tu forma de diseñar, alinear y crear importa. Hazlo todo con Figma.
| Categoría | ||
|---|---|---|
Desaprobado | Desaprobado | |
Desaprobado | Desaprobado | |
Desaprobado | Desaprobado |
Contraste 10,63
- Texto grande
#FFA500
- Texto normal
Tu forma de diseñar, alinear y crear importa. Hazlo todo con Figma.
| Categoría | ||
|---|---|---|
Aprobado | Aprobado | |
Aprobado | Aprobado | |
Aprobado | Aprobado |
Simulaciones de color
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
El color hexadecimal #ffa500, también conocido como Naranja, tiene valores RGB de R:255, G:165, B:0 y valores CMYK de C:0, M:35, Y:100, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #ffa500 | #ffa500 |
| RGB DECIMAL | 255, 165, 0 | RGB(255,165,0) |
| RGB PERCENTAGE | 100.0, 64.7, 0.0 | RGB(100.0%,64.7%,0.0%) |
| CMYK | 0, 35, 100, 0 | |
| HSL | HSL(38.8, 100.0%, 50.0%) | HSL(38.8, 100.0%, 50.0%) |
| HSV (OR HSB) | 38.8°, 100.0, 100.0 | |
| WEB SAFE | #2551530 | #2551530 |
| BINARY | 11111111, 10100101, 00000000 | |
| iOS - SwiftUI | Color(red: 1.000, green: 0.647, blue: 0.000) | |
| iOS - UIKit | UIColor(red: 1.000, green: 0.647, blue: 0.000, alpha: 1) | |
| Android - Compose | Color(0xFFFFA500) |
