El amarillo oscuro es un tono rico y sutil que suaviza el brillo del amarillo con matices terrosos de marrón. Se encuentra en la parte rojo-naranja del círculo cromático y emana calidez y creatividad.
El amarillo oscuro se define por los siguientes códigos y valores de color para asegurar la consistencia en varias plataformas y dispositivos digitales.
- Código HEX: #BA8E23
- Valor RGB: 72.9% rojo, 55.7% verde y 13.7% 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 asegurarse de que tus diseños cumplan con las Pautas de Accesibilidad de Contenido Web.
Aquí hay algunas formas de usar el amarillo oscuro en tus diseños:
- Atraer la atención a detalles clave. El amarillo oscuro es una alternativa sutil a tonos más brillantes de amarillo. Úsalo para resaltar CTAs o información importante sin abrumar a los usuarios.
- Infundir energía. El amarillo oscuro fomenta la motivación y el optimismo durante procesos largos. Incorpora este color en botones y llamadas de atención en aplicaciones o formularios de varios pasos.
- Dar pistas visuales. Considera usar el amarillo oscuro para ayudar a los usuarios a entender qué hacer a continuación. Añade este color para enfatizar tooltips, efectos hover y barras de progreso.
Ten en cuenta que el color y su significado pueden cambiar de cultura a cultura, 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 cálido que el amarillo oscuro, considera:
- Bronceado (#D6B588) es un tono más claro en la parte rojo-naranja del círculo cromático, infundiendo a los diseños una calidad más calmada y sutil.
- Amarillo-naranja (#FFB343) es más brillante y saturado, irradiando felicidad y calidez.
- Oro (#EFBF04) tiene más matices amarillos, simbolizando estatus y riqueza.
- Bronce (#CE8946) comparte la terrosidad del amarillo oscuro con una mezcla de tonos marrones y naranja oscuro.
Para complementar el amarillo oscuro, considera emparejarlo con:
- Azul marino (#000080) contrasta con el amarillo oscuro, equilibrando sus tonos amarillos con un tono fresco y calmante.
- Gris frío (#CBCBCB) eleva la calidez del amarillo oscuro, haciéndolo resaltar.
- Rojo carmesí (#B22222) añade profundidad y crea una paleta energética.
- Índigo (#560591) contrasta audazmente con el amarillo oscuro para evocar sofisticación y lujo.
Otros colores que vale la pena considerar incluyen el verde azulado oscuro para un aspecto tranquilo, naranja oscuro para enfatizar la terrosidad del amarillo, y verde salvia para un ambiente relajado y natural.
Aunque el amarillo oscuro es terroso, puede chocar con:
- Magenta (#FD3DB5) tiene una saturación que choca con el tono sutil del amarillo oscuro.
- Blanco (#FFFFFF) puede hacer que el amarillo oscuro parezca apagado y deslucido.
- Naranja brillante (#FF991C) puede competir con el amarillo oscuro por su brillo.
- Verde neón (#2CFF05) crea un contraste fuerte con su vibrante intensidad.
El amarillo oscuro simboliza calidez y madurez. Su terrosidad connota comodidad y accesibilidad. El amarillo oscuro encarna creatividad pero también puede ejemplificar melancolía. Ten en cuenta el contexto para evitar temas contradictorios.
En la psicología del color, el amarillo oscuro es estimulante y ayuda en el trabajo creativo y la concentración. Su tono más profundo evoca sentimientos de suave aliento.
En diseño de UI, el amarillo oscuro es una alternativa suave a la vibrante energía de los amarillos más brillantes para resaltar información. Su tono natural crea un ambiente acogedor. Combina el amarillo oscuro con colores complementarios fríos para experiencias más sofisticadas.
El amarillo oscuro ha sido una elección popular para artistas de renombre. La pintura de 1665 de Johannes Vermeer “La joven de la perla” utilizó amarillo oscuro en el pañuelo y la chaqueta de la joven. La serie de Girasoles de Vincent van Gogh de 1887 y 1888 presentó girasoles de amarillo oscuro contrastados con fondos más claros.
Hoy en día, la sofisticación y calidez del amarillo oscuro se extienden más allá del arte fino. Su versatilidad lo convierte en una elección de color refinada para incluir en muchos tipos de paletas de colores.
Variantes de color
Sombras
Tintes
Tonos
Tonalidades
Armonías de color
Complementaria
Complementaria dividida
Monocromática
Análoga
Triádica
Square
Paletas personalizadas
Caramelo de Toffee
Mapa del Tesoro
Armonía Dorada
Comprobador de contraste
Contraste 3,01
- Texto largo
#BA8E23
- Texto normal
Cómo diseñas, alineas, y desarrollas importa. Hazlo con Figma.
| Categoría | ||
|---|---|---|
Desaprobar | Desaprobar | |
Aprobar | Desaprobar | |
Aprobar | Desaprobar |
Contraste 6,98
- Texto largo
#BA8E23
- Texto normal
Cómo diseñas, alineas, y desarrollas importa. Hazlo con Figma.
| Categoría | ||
|---|---|---|
Aprobar | Desaprobar | |
Aprobar | Aprobar | |
Aprobar | Aprobar |
Simulaciones de color
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
El color hexadecimal #ba8e23, también llamado Amarillo oscuro, tiene valores RGB de R:186, G:142, B:35 y valores CMYK de C:0, M:24, Y:81, K:27.
| VALUE | CSS | |
|---|---|---|
| HEX | #ba8e23 | #ba8e23 |
| RGB DECIMAL | 186, 142, 35 | RGB(186,142,35) |
| RGB PERCENTAGE | 72.9, 55.7, 13.7 | RGB(72.9%,55.7%,13.7%) |
| CMYK | 0, 24, 81, 27 | |
| HSL | HSL(42.5, 68.3%, 43.3%) | HSL(42.5, 68.3%, 43.3%) |
| HSV (OR HSB) | 42.5°, 81.2, 72.9 | |
| WEB SAFE | #20415351 | #20415351 |
| BINARY | 10111010, 10001110, 00100011 | |
| iOS - SwiftUI | Color(red: 0.729, green: 0.557, blue: 0.137) | |
| iOS - UIKit | UIColor(red: 0.729, green: 0.557, blue: 0.137, alpha: 1) | |
| Android - Compose | Color(0xFFBA8E23) |