El chocolate es un tono cálido de marrón ubicado entre el rojo y el amarillo en la rueda de colores. Su tono rico, que se asemeja al chocolate con leche, exuda comodidad y estabilidad.
El chocolate se define por los siguientes códigos y valores de color para asegurar la consistencia en varias plataformas y dispositivos digitales.
- Código HEX: #713600
- Valor RGB: 44.3% rojo, 21.2% verde, y 0% 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 chocolate en tus diseños:
- Añadir profundidad. La riqueza del marrón chocolate es ideal para crear sombras y luces en elementos de UI, creando una sensación de dimensión y separación del fondo.
- Infundir calidez. Las cualidades reconfortantes del chocolate crean una atmósfera acogedora e invitante, perfecta para cafeterías o panaderías. Úsalo como color de acento en botones, texto o íconos, combinado con colores claros y aireados como crema o beige para un aspecto equilibrado.
- Crear una UI inspirada en la naturaleza. Para marcas al aire libre que promueven actividades como acampar, hacer senderismo o jardinería, el marrón chocolate crea una sensación de conexión con la tierra. Es excelente como color primario o secundario combinado con otros tonos verdes y neutros para complementar la estética natural.
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 rico que el chocolate, considera:
- Moca (#6D3B07) es un poco más oscuro, asemejándose a la infusión de café y chocolate.
- Marrón (#895129) aporta un toque ligeramente más claro con la misma calidez.
- Topo (#54463A) aparece más frío debido a sus matices grises.
- Granate (#550000) comparte una riqueza similar, inclinándose más hacia el rojo con sutiles toques de marrón.
Para complementar el chocolate, considera combinarlo con:
- Azul marino (#000080) proporciona una combinación de colores atemporal y sofisticada.
- Crema (#FDFBD4) proporciona un fondo neutral y calmante que permite que el chocolate destaque.
- Verde bosque (#2E6F40) crea una paleta armoniosa con un toque natural.
- Naranja quemado (#BE5103) añade calidez al chocolate para crear una paleta de colores inspirada en el otoño.
- Melocotón (#FFD3AC) ofrece un contraste suave y delicado junto al marrón chocolate.
Otros colores que vale la pena considerar incluyen azul claro para una sensación relajada, mandarina para un toque de vitalidad, y salvia para una paleta de colores terrosos.
Aunque el chocolate es cálido, puede chocar con:
- Azul real (#305CDE) tiene una vitalidad que puede crear un contraste fuerte junto al chocolate.
- Gris metalizado (#353E43) puede parecer turbio, interrumpiendo la vibra cálida e invitante del chocolate.
- Amarillo-verde (#CCFF00) carece de armonía con el chocolate debido a su atractivo vibrante.
- Violeta (#7F00FF) es frío y puede crear una combinación de colores desequilibrada.
El chocolate simboliza estabilidad, fuerza y resiliencia. También lleva connotaciones de lujo e indulgencia.
En la psicología del color, el chocolate promueve calidez y comodidad. Similar a un trozo decadente de chocolate o una taza de cacao caliente, también evoca sentimientos de placer. Debido a su conexión con tonos naturales, el chocolate también trae sentimientos de paz y tranquilidad.
En el diseño de UI, el chocolate crea una atmósfera cálida e invitante, ideal para aplicaciones de cafeterías o panaderías. Su riqueza también es útil para añadir profundidad y textura a los elementos, lo que ayuda a añadir interés visual a cualquier UI.
El nombre del color “Chocolate” se registró en 1734, inspirado por el tono de su homónimo. Sin embargo, la palabra “chocolate” entró en el idioma inglés alrededor de 1600 después de que los españoles introdujeran el chocolate al resto de Europa.
En la antigua Roma, los tonos de marrón se asociaban con la clase baja. Esta conexión cambió cuando el chocolate se convirtió en un bien de lujo en Europa, conectando el color con la exclusividad. Esto probablemente contribuye a la percepción actual del marrón chocolate como un color que simboliza indulgencia y sofisticación.
Aparte de su conexión con el dulce, los tonos marrones terrosos del chocolate se encuentran en toda la naturaleza. Por ejemplo, las Montañas de Chocolate en el sur de California fueron nombradas por el color, ya que parecían montículos de chocolate durante las estaciones secas. Hoy en día, la versatilidad del chocolate se extiende más allá de su conexión natural y se utiliza en moda, diseño, cosméticos y arte.
Variantes de color
Sombras
Tintes
Tonos
Tonalidades
Armonías de color
Complementaria
Complementaria dividida
Monocromática
Análoga
Triádica
Square
Paletas personalizadas
Pastel de Chocolate
Piedra Marrón
Encanto Rústico
Comprobador de contraste
Contraste 9,42
- Texto largo
#713600
- Texto normal
Cómo diseñas, alineas, y desarrollas importa. Hazlo con Figma.
| Categoría | ||
|---|---|---|
Aprobar | Aprobar | |
Aprobar | Aprobar | |
Aprobar | Aprobar |
Contraste 2,23
- Texto largo
#713600
- Texto normal
Cómo diseñas, alineas, y desarrollas importa. Hazlo con Figma.
| Categoría | ||
|---|---|---|
Desaprobar | Desaprobar | |
Desaprobar | Desaprobar | |
Desaprobar | Desaprobar |
Simulaciones de color
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
El color hexadecimal #713600, también llamado Chocolate, tiene valores RGB de R:113, G:54, B:0 y valores CMYK de C:0, M:52, Y:100, K:56.
| VALUE | CSS | |
|---|---|---|
| HEX | #713600 | #713600 |
| RGB DECIMAL | 113, 54, 0 | RGB(113,54,0) |
| RGB PERCENTAGE | 44.3, 21.2, 0.0 | RGB(44.3%,21.2%,0.0%) |
| CMYK | 0, 52, 100, 56 | |
| HSL | HSL(28.7, 100.0%, 22.2%) | HSL(28.7, 100.0%, 22.2%) |
| HSV (OR HSB) | 28.7°, 100.0, 44.3 | |
| WEB SAFE | #102510 | #102510 |
| BINARY | 01110001, 00110110, 00000000 | |
| iOS - SwiftUI | Color(red: 0.443, green: 0.212, blue: 0.000) | |
| iOS - UIKit | UIColor(red: 0.443, green: 0.212, blue: 0.000, alpha: 1) | |
| Android - Compose | Color(0xFF713600) |
