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
Las consideraciones de accesibilidad juegan un papel crucial en las elecciones de color en el diseño UX y UI. Figma ofrece plugins en la Comunidad para asegurarse de que tus diseños cumplan con las Pautas de Accesibilidad de Contenidos Web.
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 iconos. Su brillo natural capta la atención, lo que lo hace 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 el calor 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 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 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 el calor 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 un calor exótico.
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 el calor del amarillo.
- Verde azulado (#069494) fusiona tonos azules y verdes que equilibran maravillosamente con la exuberancia del amarillo.
- Blanco (#FFFFFF) crea un aspecto nítido y limpio que realza la ligereza y aireado del amarillo.
Colores adicionales a 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:
- Púrpura 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 chocante.
- Marrón oscuro (#654321) puede eclipsar el amarillo, haciéndolo parecer 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 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 fomentan 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
Tonalidades
Armonías de color
Complementaria
Complementaria dividida
Monocromática
Análoga
Triádica
Square
Paletas personalizadas
Mostaza Dijon
Prisma Iluminado
Cítrico Zesty
Comprobador de contraste
Contraste 1,34
- Texto largo
#FFDE21
- Texto normal
Cómo diseñas, alineas, y desarrollas importa. Hazlo con Figma.
| Categoría | ||
|---|---|---|
Desaprobar | Desaprobar | |
Desaprobar | Desaprobar | |
Desaprobar | Desaprobar |
Contraste 15,72
- Texto largo
#FFDE21
- 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 #ffde21, también llamado 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) |