Guía de color
Color Naranja
#F97316
Códigos del color naranja
Qué significa el naranja
El naranja mezcla la energía del rojo con la amabilidad del amarillo. Transmite entusiasmo y creatividad sin la agresividad del rojo puro.
Cómo usarlo en diseño
Funciona bien en CTAs, marcas de comida y fitness, y flujos de onboarding cercanos.
Combinaciones de color con el naranja
Armonías calculadas con teoría del color para el matiz base 25°.
Complementario
Contraste máximo: #F97316 + #159AF9
Análogo
Armonía a ±30°: #F91528 · #F97316 · #F9E615
Triádico
Separación de 120°: #F97316 · #15F974 · #7415F9
Tonos del color naranja (escala 50–900)
Escala estilo Tailwind generada a partir de #F97316.
Colores que combinan con el naranja
Preguntas frecuentes sobre el color naranja
¿Cuál es el código HEX del color naranja?
Un valor HEX muy usado para el color naranja es #F97316, equivalente a rgb(249, 115, 22). Según el tono que busques, puedes ajustar saturación y luminosidad manteniendo el mismo matiz (25°).
¿Qué colores combinan con el naranja?
El naranja combina muy bien con white, navy, teal, charcoal. Su color complementario es #159AF9, y una combinación triádica clásica añade #15F974 y #7415F9.
¿Es el naranja accesible para textos y fondos?
Depende del ratio de contraste frente al otro color. Usa el verificador de contraste de NanoPalettes para comprobar el cumplimiento WCAG AA (4.5:1) y AAA (7:1) antes de usar el naranja en textos o elementos de interfaz.
Crea tu propia paleta en naranja
Genera combinaciones armónicas a partir de #F97316 en segundos.
Abrir el generador de paletas