El ámbar es un color cálido y acogedor que combina el resplandor dorado del amarillo con la riqueza del naranja. Emana una vibra soleada y alegre que captura la esencia de su homónimo, la resina de árbol fosilizada. Se sitúa entre el amarillo y el naranja en la rueda de colores, lo que lo hace perfecto para añadir un toque de calidez y luminosidad a los diseños y mejorar los visuales con su atractivo radiante y acogedor.
El ámbar se define por los siguientes códigos y valores de color para asegurar la consistencia en varias plataformas y dispositivos digitales.
- Código HEX: #FFBF00
- Valor RGB: 100% rojo, 74.9% verde y 0% 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.
Los tonos ricos y dorados del ámbar aportan calidez y vitalidad al diseño de interfaces. Aquí te mostramos cómo aprovechar su potencial de manera efectiva:
- Crea contraste y jerarquía. El ámbar sobresale al establecer una jerarquía visual clara, destacándose sobre fondos claros y oscuros. Úsalo para títulos, botones u otros elementos clave para mejorar la legibilidad y guiar la mirada del usuario a través de tu contenido.
- Evoca emociones positivas. El resplandor cálido del ámbar crea una atmósfera acogedora e invitante en interfaces web y de aplicaciones. Imagina una plataforma de reservas de viajes que use acentos de ámbar para evocar la calidez y emoción de unas vacaciones soñadas.
- Guía la interacción del usuario. Como color de acento, el ámbar es una excelente opción para resaltar elementos interactivos. Úsalo para atraer la atención del usuario y fomentar la interacción, como un botón de Reservar Ahora.
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 radiante y cálido que el ámbar, considera:
- Goldenrod (#DAA520) captura la esencia del ámbar con una luminosidad ligeramente más atenuada, evocando la calidez natural de los campos a finales del verano.
- Marigold (#FBE870) es más claro y brillante, ofreciendo un tono soleado y alegre que comparte la calidez invitante y la energía vibrante del ámbar.
- Saffron (#F4C430) introduce un toque de naranja, reflejando el resplandor dorado del ámbar con un matiz ligeramente más exótico y especiado.
- Mustard (#FFDB58) es una versión más apagada, reteniendo la calidez del ámbar mientras añade un toque de terrosidad para un atractivo más discreto.
Para complementar los tonos resplandecientes del ámbar, considera emparejarlo con:
- Teal profundo (#00585E) proporciona un fondo rico y contrastante que hace resaltar el brillo del ámbar, evocando la profundidad de las aguas oceánicas contra un atardecer.
- Gris carbón (#4A4A4A) ofrece un equilibrio neutral y sofisticado a la vibrancia del ámbar, equilibrando la paleta con elegancia moderna.
- Marfil (#FFFFE3) es suave y ligero, creando un contraste sutil que realza la calidez del ámbar para una atmósfera acogedora e invitante.
- Ciruela (#8E4585) añade un complemento profundo y lujoso, emparejándose bellamente con el ámbar para un ambiente otoñal rico.
- Verde bosque (#2E6F40) ancla la paleta con su tono profundo y natural, reflejando los colores de un bosque iluminado por el sol y destacando las cualidades terrosas del ámbar.
Otros colores que vale la pena considerar incluyen azul marino para un aspecto clásico y digno, crema para una mezcla suave y armoniosa, y burdeos para un contraste audaz y dramático.
Aunque el ámbar es versátil, puede chocar con:
- Rosa brillante (#FF69B4) puede ser demasiado fuerte y vibrante, eclipsando el resplandor natural del ámbar con un contraste que puede sentirse discordante.
- Verde lima (#89F336), con su alta intensidad, podría restar calidez al ámbar, creando una combinación visualmente inquietante.
- Azul eléctrico (#00F0FF) ofrece un contraste fresco y vívido que puede eclipsar la sutileza y calidez del ámbar, llevando a un choque de energías.
- Naranja neón (#FFA500), aunque cercano en el espectro, puede competir demasiado directamente con el ámbar, resultando en una paleta que carece de distinción y equilibrio.
- Púrpura brillante (#800080), aunque regio, puede dominar el resplandor dorado del ámbar con su predominio, potencialmente creando un efecto visual discordante.
Con su belleza natural y resplandor similar al sol, el ámbar representa calidez, confort y nostalgia. Sus aspectos amarillos aportan brillo y optimismo, y sus tonos naranjas inspiran creatividad. A través de las culturas, el valor del ámbar varía: en la antigua Grecia, se veía como un regalo divino de Apolo, simbolizando la vida eterna; en la cultura china, representa coraje y fuerza. En la tradición nativa americana, es un talismán protector.
En la psicología del color, el tono alegre del ámbar promueve energía, estimulando los sentidos y despertando entusiasmo y emoción.
En el diseño de UI/UX, el ámbar hace que las interfaces de usuario sean más atractivas. Destaca características importantes como CTAs y notificaciones, mejorando el compromiso del usuario. El ámbar puede crear una atmósfera cálida y acogedora, utilizando sus efectos psicológicos para mejorar la experiencia del usuario. Esto puede hacer que la marca parezca amigable y animada.
El nombre ámbar se origina del material conocido como ámbar, una resina de árbol fosilizada admirada durante siglos por su belleza natural y resplandor cálido. El uso de "ámbar" como nombre de color se documentó por primera vez en inglés en 1500.
Históricamente, el ámbar se asoció con la magia, la espiritualidad e incluso la curación. Las civilizaciones antiguas elaboraban ámbar en joyas, amuletos y objetos decorativos, que a menudo eran símbolos de riqueza y estatus.
Variantes de color
Sombras
Tintes
Tonos
Matices
Armonías de color
Complementario
Dividido
Monocromático
Análogo
Triádico
Cuadrado
Paletas personalizadas
Panal
Día soleado
Recién exprimido
Verificador de contraste
Contraste 1,65
- Texto grande
#FFBF00
- Texto normal
Tu forma de diseñar, alinear y crear importa. Hazlo todo con Figma.
| Categoría | ||
|---|---|---|
Desaprobado | Desaprobado | |
Desaprobado | Desaprobado | |
Desaprobado | Desaprobado |
Contraste 12,7
- Texto grande
#FFBF00
- 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 #ffbf00, también conocido como Ámbar, tiene valores RGB de R:255, G:191, B:0 y valores CMYK de C:0, M:25, Y:100, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #ffbf00 | #ffbf00 |
| RGB DECIMAL | 255, 191, 0 | RGB(255,191,0) |
| RGB PERCENTAGE | 100.0, 74.9, 0.0 | RGB(100.0%,74.9%,0.0%) |
| CMYK | 0, 25, 100, 0 | |
| HSL | HSL(44.9, 100.0%, 50.0%) | HSL(44.9, 100.0%, 50.0%) |
| HSV (OR HSB) | 44.9°, 100.0, 100.0 | |
| WEB SAFE | #2552040 | #2552040 |
| BINARY | 11111111, 10111111, 00000000 | |
| iOS - SwiftUI | Color(red: 1.000, green: 0.749, blue: 0.000) | |
| iOS - UIKit | UIColor(red: 1.000, green: 0.749, blue: 0.000, alpha: 1) | |
| Android - Compose | Color(0xFFFFBF00) |
