El amarillo es un color brillante y alegre que irradia felicidad y energía. Posicionado entre el verde y el naranja en el círculo cromático, es un tono llamativo (y un matiz puro) que energiza con su atractivo vívido.
El amarillo se define por los siguientes códigos y valores de color para asegurar la consistencia en varias plataformas y dispositivos digitales.
- Código HEX: #FFDE21
- Valor RGB: 100% rojo, 87.1% verde y 12.9% azul
La accesibilidad juega un papel clave en la elección de colores en el diseño UX y UI. La comunidad de Figma ofrece plugins para ayudarte a cumplir con las Web Content Accessibility Guidelines.
Aquí hay algunas formas de usar el amarillo en los diseños:
- Atraer atención. Usa el amarillo para hacer que los elementos destaquen, como botones, alertas o íconos. Su brillo natural capta la atención, haciéndolo perfecto para puntos de navegación importantes.
- Estimular positividad. Incorpora el amarillo para crear un ambiente amigable y acogedor. Su asociación con la felicidad y la calidez puede hacer que los usuarios se sientan más optimistas y comprometidos.
- Mejorar la visibilidad. El amarillo ofrece un excelente contraste contra tonos más oscuros para la legibilidad y el resaltado.
- Comunicar energía. Aplica el amarillo en entornos dinámicos o creativos para transmitir energía e inspirar acción. Es ideal para plataformas que promueven la innovación, la creatividad o la juventud.
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 vibrante y energizante que el amarillo, considera:
- Limón (#FFF44F) ofrece un amarillo brillante y puro que comparte la esencia soleada y alegre del amarillo.
- Ámbar (#FFBF00) introduce un toque de naranja, proporcionando un tono dorado más profundo que retiene la vibrancia del amarillo.
- Mostaza (#FFDB58) presenta un amarillo terroso y apagado que refleja la calidez del amarillo con una intensidad moderada.
- Azafrán (#F4C430) ofrece un amarillo ligeramente teñido de naranja, capturando el rico tono de la especia y añadiendo calidez exótica.
Para complementar los tonos brillantes del amarillo, considera emparejarlo con:
- Azul marino (#000080) ofrece un contraste profundo y rico que resalta el brillo del amarillo.
- Gris (#898989) proporciona un fondo neutral que permite que el amarillo destaque vívidamente.
- Lavanda (#D3D3FF) es un color suave y delicado que armoniza sutilmente con la calidez del amarillo.
- Verde petróleo (#069494) fusiona tonos azules y verdes que equilibran maravillosamente la exuberancia del amarillo.
- Blanco (#FFFFFF) crea un aspecto nítido y limpio que realza la ligereza y aireado del amarillo.
Colores adicionales que vale la pena considerar incluyen verde oscuro para un ambiente natural, rojo para un impacto llamativo y negro para una combinación audaz y clásica.
Aunque el amarillo es versátil, puede chocar con:
- Morado oscuro (#800080) puede abrumar la ligereza del amarillo, llevando a un impacto visual discordante.
- Verde oliva (#808000) a veces apaga la vibrancia del amarillo debido a su terrosidad apagada.
- Rosa fuerte (#FF69B4) compite con el amarillo por la atención, creando potencialmente una combinación visualmente discordante.
- Marrón oscuro (#654321) puede eclipsar el amarillo, haciendo que parezca deslavado.
- Rojo brillante (#FF0000) puede dominar el amarillo, haciendo que la combinación sea demasiado agresiva para los ojos.
El amarillo simboliza la alegría y el optimismo y evoca calidez. Está culturalmente vinculado a la riqueza, la prosperidad y la sabiduría, ofreciendo un amplio espectro de significados emocionales y culturales.
Psicológicamente, el amarillo aumenta la actividad mental y la energía, atrayendo la atención y estimulando la comunicación. Su tono vibrante puede mejorar el enfoque y elevar los ánimos, sirviendo como un estimulante efectivo en muchos entornos.
En el diseño de UI/UX, la presencia animada del amarillo puede mejorar el compromiso del usuario, haciendo que las interfaces sean acogedoras y energéticas. Apoya la imagen de una marca como innovadora y amigable para el usuario, utilizando su brillo para crear diseños destacados que fomenten la interacción y la positividad.
El amarillo ha sido utilizado a lo largo de los siglos para capturar la esencia de la luz y la vida. En tiempos antiguos, las personas extraían pigmento amarillo de la arcilla ocre para pintar el sol y las estrellas en las paredes de las cuevas, representando la luz guía del día. Los egipcios veneraban el amarillo como el color del sol, el oro y la inmortalidad. Las tumbas y tesoros adornados con amarillo eran un testimonio de la vida eterna.
Durante el Renacimiento, artistas como Vermeer y Rembrandt usaron el amarillo para simbolizar la iluminación y la innovación en sus pinturas. En China, el amarillo estaba reservado para el Emperador y su palacio, representando autoridad, honor y una conexión con los cielos.
A finales del siglo XIX, la serie "Girasoles" de Vincent van Gogh, pintada en la década de 1880, capturó la esencia de la alegría y la naturaleza de la vida, ilustrando la capacidad del amarillo para comunicar emociones profundas y belleza.
Variantes de color
Sombras
Tintes
Tonos
Matices
Armonías de color
Complementario
Dividido
Monocromático
Análogo
Triádico
Cuadrado
Paletas personalizadas
Mostaza Dijon
Prisma Iluminado
Cítrico Zesty
Verificador de contraste
Contraste 1,34
- Texto grande
#FFDE21
- Texto normal
Tu forma de diseñar, alinear y crear importa. Hazlo todo con Figma.
| Categoría | ||
|---|---|---|
Desaprobado | Desaprobado | |
Desaprobado | Desaprobado | |
Desaprobado | Desaprobado |
Contraste 15,72
- Texto grande
#FFDE21
- 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 #ffde21, también conocido como Amarillo, tiene valores RGB de R:255, G:222, B:33 y valores CMYK de C:0, M:13, Y:87, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #ffde21 | #ffde21 |
| RGB DECIMAL | 255, 222, 33 | RGB(255,222,33) |
| RGB PERCENTAGE | 100.0, 87.1, 12.9 | RGB(100.0%,87.1%,12.9%) |
| CMYK | 0, 13, 87, 0 | |
| HSL | HSL(51.1, 100.0%, 56.5%) | HSL(51.1, 100.0%, 56.5%) |
| HSV (OR HSB) | 51.1°, 87.1, 100.0 | |
| WEB SAFE | #25520451 | #25520451 |
| BINARY | 11111111, 11011110, 00100001 | |
| iOS - SwiftUI | Color(red: 1.000, green: 0.871, blue: 0.129) | |
| iOS - UIKit | UIColor(red: 1.000, green: 0.871, blue: 0.129, alpha: 1) | |
| Android - Compose | Color(0xFFFFDE21) |
