El mandarina es un color vibrante, inspirado en los cítricos, que captura la esencia de la fruta homónima con cualidades brillantes y alegres. Se sitúa entre el amarillo y el rojo en el círculo cromático, irradiando una vibra juguetona y energética.
El mandarina se define por los siguientes códigos y valores de color para asegurar la consistencia en varias plataformas y dispositivos digitales.
- Código HEX: #FFA800
- Valor RGB: 100% rojo, 65.9% verde y 0% azul
Las consideraciones de accesibilidad juegan un papel crucial en las elecciones de color de diseño UX y UI. Figma ofrece plugins en la Comunidad para asegurar que tus diseños cumplan con las Pautas de Accesibilidad de Contenidos Web.
Aquí hay algunas formas de usar el mandarina en tus diseños:
- Crea un punto focal. La vibrancia del mandarina atrae la atención a áreas clave, como botones de CTA, guiando a los usuarios hacia información importante.
- Evoca positividad y diversión. Las cualidades alegres del mandarina mejoran la experiencia del usuario. Considéralo para fondos, encabezados o íconos asociados con la alegría o el júbilo.
- Establece jerarquía con contraste. Combina el mandarina con tonos fríos para un efecto impactante o contra fondos claros para resaltar de manera sutil pero efectiva.
- Usa acentos estratégicamente. El mandarina brilla como un acento, pero úsalo con moderación para lograr un impacto máximo sin abrumar el diseño.
Ten en cuenta que el color y su significado pueden cambiar de una cultura a otra, y en cualquier momento. Si estás diseñando para una audiencia global, investiga las consideraciones de color para tus regiones específicas.
Para variaciones dentro del mismo espectro energético que el mandarina, considera:
- Naranja (#FFA500) ofrece una sensación ligeramente menos intensa y más fresca.
- Amarillo-naranja (#FFB343) inyecta un poco más de amarillo en la mezcla, añadiendo un poco de sol extra con un toque de cítrico.
- Ámbar (#FFBF00) es un tono más profundo, ofreciendo un toque de sofisticación mientras retiene el calor.
- Mimosa (#F2B949) tiene una base naranja con un poco menos de vibrancia.
Para complementar el mandarina, considera combinarlo con:
- Espuma de mar (#8DDCDC) crea un contraste vibrante con el mandarina, como una playa tropical al atardecer.
- Azul real (#305CDE) hace que el mandarina resalte, creando una combinación dramática y energética.
- Rosa (#FF8DA1) añade un toque de fantasía y diversión al mandarina, perfecto para diseños femeninos o juveniles.
- Amarillo pastel (#FFEE8C) crea una combinación armoniosamente alegre con el mandarina.
Otros colores que vale la pena considerar son el negro y el blanco para una base limpia, lavanda para añadir un toque de fantasía, o topo para crear una sensación cálida y terrosa, perfecta para paletas inspiradas en el otoño.
Aunque el mandarina es cálido y brillante, puede chocar con:
- Verde neón (#2CFF05) choca con el mandarina, como un letrero de neón contra un atardecer: ambos son vibrantes pero no necesariamente armoniosos.
- Azul marino (#000080) puede eclipsar la calidez del mandarina, resultando en una sensación fría y poco acogedora.
- Rojo (#FF2C2C) es audaz y llamativo, lo que puede abrumar al mandarina, causando caos visual y dificultad para enfocarse.
- Púrpura (#9D00FF) crea un contraste incómodo con la calidez del mandarina, resultando en un aspecto desarticulado y desagradable.
El vibrante tono naranja del mandarina simboliza abundancia, prosperidad y buena suerte. La tradición del Año Nuevo Chino de regalar mandarinas refleja este simbolismo, ya que la forma redonda y el color brillante de la mandarina reflejan monedas y riqueza. El mandarina también puede representar energía, entusiasmo y creatividad. Su naturaleza juguetona y alegre refleja un entusiasmo juvenil por la vida.
En la psicología del color, los tonos cálidos del mandarina evocan sentimientos de felicidad, optimismo y estimulación. La exposición al mandarina puede crear una sensación de calidez y amabilidad, pero demasiado mandarina puede tener el efecto contrario, causando sobrestimulación o hiperactividad.
Para el diseño UI/UX, el mandarina puede crear una experiencia de usuario positiva y atractiva. Puede usarse para fomentar la interacción del usuario o promover la creatividad y el compromiso social. Sin embargo, ten en cuenta el potencial de sobreestimulación. Grandes áreas de mandarina o un uso mal equilibrado con colores que chocan pueden abrumar a los usuarios, dificultando la navegación por la interfaz.
El color vibrante mandarina toma su nombre de la fruta, que originalmente describía un tipo de mandarina de Tánger, Marruecos. El color heredó el nombre alrededor de 1710 cuando la fruta se hizo más disponible y popular en Europa.
En el antiguo Egipto, los tonos amarillo-naranja similares al mandarina se usaban en pinturas de tumbas, potencialmente simbolizando calidez y vida. En Asia, colores similares se han vinculado a la prosperidad y la buena fortuna.
Hoy en día, sigue siendo una elección de color popular por su capacidad para evocar una sensación de alegría y creatividad.
Variantes de color
Sombras
Tintes
Tonos
Tonalidades
Armonías de color
Complementaria
Complementaria dividida
Monocromática
Análoga
Triádica
Square
Paletas personalizadas
Cosecha Dorada
Sol del Mediodía
Calabaza Naranja
Comprobador de contraste
Contraste 1,93
- Texto largo
#FFA800
- Texto normal
Cómo diseñas, alineas, y desarrollas importa. Hazlo con Figma.
| Categoría | ||
|---|---|---|
Desaprobar | Desaprobar | |
Desaprobar | Desaprobar | |
Desaprobar | Desaprobar |
Contraste 10,85
- Texto largo
#FFA800
- Texto normal
Cómo diseñas, alineas, y desarrollas importa. Hazlo con Figma.
| Categoría | ||
|---|---|---|
Aprobar | Aprobar | |
Aprobar | Aprobar | |
Aprobar | Aprobar |
Simulaciones de color
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
El color hexadecimal #ffa800, también llamado Mandarina, tiene valores RGB de R:255, G:168, B:0 y valores CMYK de C:0, M:34, Y:100, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #ffa800 | #ffa800 |
| RGB DECIMAL | 255, 168, 0 | RGB(255,168,0) |
| RGB PERCENTAGE | 100.0, 65.9, 0.0 | RGB(100.0%,65.9%,0.0%) |
| CMYK | 0, 34, 100, 0 | |
| HSL | HSL(39.5, 100.0%, 50.0%) | HSL(39.5, 100.0%, 50.0%) |
| HSV (OR HSB) | 39.5°, 100.0, 100.0 | |
| WEB SAFE | #2551530 | #2551530 |
| BINARY | 11111111, 10101000, 00000000 | |
| iOS - SwiftUI | Color(red: 1.000, green: 0.659, blue: 0.000) | |
| iOS - UIKit | UIColor(red: 1.000, green: 0.659, blue: 0.000, alpha: 1) | |
| Android - Compose | Color(0xFFFFA800) |