Chocolate é um tom quente de marrom, situado entre o vermelho e o amarelo no círculo cromático. Seu tom rico, que lembra o chocolate ao leite, exala conforto e estabilidade.
Chocolate é definido pelos seguintes códigos e valores de cor para garantir consistência em várias plataformas e dispositivos digitais.
- Código HEX: #713600
- Valor RGB: 44,3% vermelho, 21,2% verde e 0% azul
Considerações de acessibilidade desempenham um papel fundamental na escolha de cores no design de UX e UI. Figma oferece plugins na Comunidade para garantir que seus designs atendam às Diretrizes de Acessibilidade de Conteúdo da Web.
Aqui estão algumas maneiras de usar chocolate em seus designs:
- Adicione profundidade. A riqueza do marrom chocolate é excelente para criar sombras e destaques em elementos de UI, criando uma sensação de dimensão e separação do fundo.
- Infunda calor. As qualidades acolhedoras do chocolate criam uma atmosfera aconchegante e convidativa—perfeita para cafeterias ou padarias. Use-o como cor de destaque em botões, textos ou ícones, combinado com cores claras e arejadas como creme ou bege para um visual equilibrado.
- Crie uma UI inspirada na natureza. Para marcas ao ar livre que promovem atividades como camping, caminhadas ou jardinagem, o marrom chocolate cria uma sensação de conexão com a terra. É ótimo como cor primária ou secundária, combinado com outros tons de verde e neutros para complementar a estética natural.
Lembre-se de que a cor e seu significado podem mudar de cultura para cultura—e a qualquer momento. Se você está projetando para um público global, pesquise considerações de cor para suas regiões específicas.
Para variações dentro do mesmo espectro rico que o chocolate, considere:
- Mocha (#6D3B07) é um pouco mais escuro, lembrando a infusão de café e chocolate.
- Marrom (#895129) traz um toque ligeiramente mais claro com o mesmo calor.
- Taupe (#54463A) parece mais frio devido aos seus tons de cinza.
- Bordô (#550000) compartilha uma riqueza semelhante, inclinando-se mais para o vermelho com sutis toques de marrom.
Para complementar o chocolate, considere combiná-lo com:
- Azul marinho (#000080) oferece uma combinação de cores atemporal e sofisticada.
- Creme (#FDFBD4) fornece um fundo neutro e calmante que permite que o chocolate se destaque.
- Verde floresta (#2E6F40) cria uma paleta harmoniosa com um toque natural.
- Laranja queimado (#BE5103) acrescenta ao calor do chocolate para criar uma paleta de cores inspirada no outono.
- Pêssego (#FFD3AC) oferece um contraste suave e delicado ao lado do marrom chocolate.
Outras cores que valem a pena considerar incluem azul claro para uma sensação relaxante, tangerina para um toque de vivacidade e sálvia para uma paleta de cores terrosas.
Embora o chocolate seja quente, ele pode entrar em conflito com:
- Azul real (#305CDE) tem uma vivacidade que pode criar um contraste forte ao lado do chocolate.
- Cinza chumbo (#353E43) pode parecer turvo, interrompendo a vibração quente e convidativa do chocolate.
- Amarelo-esverdeado (#CCFF00) falta harmonia com o chocolate devido ao seu apelo vibrante.
- Violeta (#7F00FF) é frio e pode criar uma combinação de cores desequilibrada.
Chocolate simboliza estabilidade, força e resiliência. Também carrega conotações de luxo e indulgência.
Na psicologia das cores, o chocolate promove calor e conforto. Semelhante a um pedaço decadente de chocolate ou uma xícara de chocolate quente, também evoca sensações de prazer. Devido à sua conexão com tons naturais, o chocolate também traz sensações de paz e tranquilidade.
No design de UI, o chocolate cria uma atmosfera quente e convidativa, ideal para aplicativos de cafeterias ou padarias. Sua riqueza também é útil para adicionar profundidade e textura aos elementos, o que ajuda a adicionar interesse visual a qualquer UI.
O nome da cor “Chocolate” foi registrado em 1734, inspirado pelo tom de seu homônimo. No entanto, a palavra “chocolate” entrou na língua inglesa por volta de 1600, após os espanhóis introduzirem o chocolate no resto da Europa.
Na Roma antiga, tons de marrom eram associados à classe baixa. Essa conexão mudou quando o chocolate se tornou um bem de luxo na Europa, conectando a cor à exclusividade. Isso provavelmente contribui para a percepção atual do marrom chocolate como uma cor que simboliza indulgência e sofisticação.
Além de sua conexão com o doce, os tons terrosos do chocolate são encontrados em toda a natureza. Por exemplo, as Montanhas de Chocolate no sul da Califórnia foram nomeadas por causa da cor, pois pareciam montes de chocolate durante as estações secas. Hoje, a versatilidade do chocolate se estende além de sua conexão natural e é usada na moda, design, cosméticos e arte.
Variações de cor
Sombras
Tonalidades
Tons
Matizes
Harmonias de cores
Complementar
Dividida
Monocromática
Análoga
Triádica
Quadrado
Paletas personalizadas
Bolo de Chocolate
Brownstone
Charme Rústico
Verificador de contraste
Contraste 9,42
- Texto grande
#713600
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Aprovado | Aprovado | |
Aprovado | Aprovado | |
Aprovado | Aprovado |
Contraste 2,23
- Texto grande
#713600
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Reprovado | Reprovado | |
Reprovado | Reprovado | |
Reprovado | Reprovado |
Simulações de cor
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
A cor hexadecimal #713600, conhecida como Chocolate, tem valores RGB de R:113, G:54, B:0 e 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) |
