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 amarillo y rojo en el círculo cromático, irradiando una vibra juguetona y energética.
Mandarina se define por los siguientes códigos y valores de color para asegurar la consistencia en diversas 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 la elección de colores en el diseño de UX y UI. Figma ofrece plugins en la Comunidad para asegurarte de que tus diseños cumplan con las Web Content Accessibility Guidelines.
Aquí hay algunas formas de usar mandarina en tus diseños:
- Crea un punto focal. La vibrante 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 de mandarina mejoran la experiencia del usuario. Considéralo para fondos, encabezados o íconos asociados con la alegría.
- Establece jerarquía con contraste. Combina mandarina con tonos fríos para un efecto impactante o sobre fondos claros para resaltar de manera sutil pero efectiva.
- Usa acentos estratégicamente. 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 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 mandarina, considera:
- Naranja (#FFA500) ofrece una sensación ligeramente menos intensa y más fresca.
- Amarillo anaranjado (#FFB343) inyecta un poco más de amarillo en la mezcla, añadiendo un poco más de sol 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 vibración.
Para complementar mandarina, considera combinarlo con:
- Espuma de mar (#8DDCDC) crea un contraste vibrante con mandarina, como una playa tropical al atardecer.
- Azul real (#305CDE) hace que mandarina resalte, creando una combinación dramática y energética.
- Rosa (#FF8DA1) añade un toque de fantasía y diversión a mandarina, perfecto para diseños femeninos o juveniles.
- Amarillo pastel (#FFEE8C) crea una combinación armoniosamente alegre con mandarina.
Otros colores que vale la pena considerar son negro y 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 mandarina es cálido y brillante, puede chocar con:
- Verde neón (#2CFF05) choca con mandarina, como un letrero de neón contra un atardecer: ambos son vibrantes pero no necesariamente armoniosos.
- Azul marino (#000080) puede eclipsar el calor de mandarina, resultando en una sensación fría y poco acogedora.
- Rojo (#FF2C2C) es audaz y llamativo, lo que puede abrumar a mandarina, causando caos visual y dificultad para enfocarse.
- Morado (#9D00FF) crea un contraste incómodo con el calor de mandarina, resultando en un aspecto desarticulado y desagradable.
El vibrante tono naranja de 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. 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 de mandarina evocan sentimientos de felicidad, optimismo y estimulación. La exposición a 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 de UI/UX, 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 cuidado con 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 vibrante color mandarina toma su nombre de la fruta, que originalmente describía un tipo de naranja 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-anaranjados similares a 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
Matices
Armonías de color
Complementario
Dividido
Monocromático
Análogo
Triádico
Cuadrado
Paletas personalizadas
Cosecha dorada
Sol del mediodía
Calabaza naranja
Verificador de contraste
Contraste 1,93
- Texto grande
#FFA800
- 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,85
- Texto grande
#FFA800
- 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 #ffa800, también conocido como 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) |
