Saltar al contenido principal

Chocolate

Todo lo que necesitas saber sobre el chocolate para inspirar tu próximo diseño.

Crear paleta de colores

Elige un color

Hex

RGB

HSB

HSL

Selecciona la paleta

Paletas personalizadas

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, emana comodidad y estabilidad.

color Chocolatecolor Chocolate

El chocolate se define por los siguientes códigos y valores de color para asegurar la consistencia en diversas plataformas y dispositivos digitales.

- Código HEX: #713600

- Valor RGB: 44.3% rojo, 21.2% 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.

Aquí hay algunas formas de usar el chocolate en tus diseños:

  • Añade profundidad. La riqueza del marrón chocolate es ideal para crear sombras y realces en elementos de UI, generando una sensación de dimensión y separación del fondo.
  • Infunde 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.
  • Crea una interfaz 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 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 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 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) ofrece 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) ofrece un fondo neutral y calmante que permite que el chocolate resalte.
  • 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.
  • Durazno (#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 vibración que puede crear un contraste fuerte junto al chocolate.
  • Gris plomo (#353E43) puede parecer turbio, interrumpiendo la vibra cálida e invitante del chocolate.
  • Amarillo verdoso (#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 de chocolate decadente o una taza de cacao caliente, también evoca sentimientos de placer. Debido a su conexión con tonos naturales, el chocolate también genera sensaciones de paz y tranquilidad.

En el diseño de interfaces, 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 interfaz.

El nombre del color “Chocolate” se registró en 1734, inspirado en 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

Matices

Armonías de color

Complementario

Dividido

Monocromático

Análogo

Triádico

Cuadrado

Paletas personalizadas

Pastel de Chocolate

Piedra Marrón

Encanto Rústico

Verificador de contraste

Contraste 9,42

Texto grande

#713600

Texto normal

Tu forma de diseñar, alinear y crear importa. Hazlo todo con Figma.

Este es el texto #713600 en un fondo #FFFFFF.
Categoría
Aprobado
Aprobado
Aprobado
Aprobado
Aprobado
Aprobado

Contraste 2,23

Texto grande

#713600

Texto normal

Tu forma de diseñar, alinear y crear importa. Hazlo todo con Figma.

Este es el texto #713600 en un fondo #000000.
Categoría
Desaprobado
Desaprobado
Desaprobado
Desaprobado
Desaprobado
Desaprobado

Simulaciones de color

Protanopia

Deuteranopia

Tritanopia

Acromatopsia

El color hexadecimal #713600, también conocido como Chocolate, tiene valores RGB de R:113, G:54, B:0 y valores CMYK de C:0, M:52, Y:100, K:56.

VALUECSS
HEX#713600#713600
RGB DECIMAL113, 54, 0RGB(113,54,0)
RGB PERCENTAGE44.3, 21.2, 0.0RGB(44.3%,21.2%,0.0%)
CMYK0, 52, 100, 56
HSLHSL(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
BINARY01110001, 00110110, 00000000
iOS - SwiftUIColor(red: 0.443, green: 0.212, blue: 0.000)
iOS - UIKitUIColor(red: 0.443, green: 0.212, blue: 0.000, alpha: 1)
Android - ComposeColor(0xFF713600)
Crear paleta de colores