Branco é uma cor acromática, o que significa que não possui matiz ou saturação. Na teoria das cores, ela combina todas as cores do espectro visível. Embora o branco não esteja incluído no círculo cromático, desempenha um papel importante na mistura de cores, criando tons mais claros e suaves. Branco cria contraste e equilíbrio em designs de UI enquanto promove uma estética limpa e minimalista.
Branco é definido pelos seguintes códigos e valores de cor para garantir consistência em várias plataformas e dispositivos digitais.
- Código HEX: #FFFFFF
- Valor RGB: 100% vermelho, 100% verde e 100% azul
Considerações de acessibilidade são fundamentais 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 incorporar o branco em seus designs de UI:
- Melhorar a legibilidade. Usar branco como cor de fundo pode ajudar a destacar textos e botões, melhorando a legibilidade e garantindo que os usuários possam facilmente absorver informações em uma página.
- Criar harmonia. O espaço em branco pode ajudar a criar equilíbrio em uma página e direcionar adequadamente o foco do usuário de um elemento para outro. Também cria uma interface limpa e harmoniosa, reduzindo a fadiga do usuário e proporcionando uma experiência agradável.
- Inspirar limpeza. Branco é frequentemente associado à limpeza e frescor, criando uma estética simples e minimalista. Transmite sensações de segurança, sendo ideal para designs na área médica e de saúde.
Dica: Ao projetar para um público global, pesquise o simbolismo da cor em diferentes culturas — o branco não significa o mesmo em todos os lugares.
Para variações dentro do mesmo espectro brilhante que o branco, considere:
- Off-white (#F2F0EF) tem um leve tom acinzentado, conferindo uma aparência suave e fria.
- Marfim (#FFFFE3) traz um toque mais quente com nuances de amarelo.
- Concha (#FFF1E7) possui um leve tom rosado, irradiando a delicadeza das conchas.
- Creme (#FDFBD4) adiciona um toque de calor com um tom amarelo pálido.
Para complementar o branco, considere combiná-lo com:
- Preto (#000000) oferece um visual clássico e atemporal quando combinado com branco.
- Verde menta (#ADEBB3) proporciona um toque de suavidade para criar uma sensação leve e delicada.
- Azul nevoeiro (#B5C7EB) incorpora tranquilidade, criando uma atmosfera calma e serena.
- Marrom (#895129) possui tons ricos que evocam uma paleta de cores quente e natural.
Outras cores que valem a pena considerar incluem verde sálvia para uma combinação de cores terrosas, lavanda para uma sensação lúdica, e azul bebê para equilibrar a frescura do branco.
Embora o branco seja limpo, ele pode entrar em conflito com:
- Cinza frio (#CBCBCB) tem um tom cinza claro, que pode parecer sem vida quando combinado com branco.
- Verde neon (#2CFF05) cria um contraste forte ao lado do branco, o que pode ser visualmente cansativo.
- Amarelo (#FFFF00) pode parecer muito brilhante ao lado do branco puro, criando um efeito chocante.
- Ciano (#00FFFF) pode parecer avassalador ao lado do branco devido ao seu contraste marcante.
Enquanto o branco comumente representa pureza e inocência em cerimônias ocidentais como casamentos e batismos, ele carrega significados de morte e renovação em tradições orientais.
Na psicologia das cores, o branco pode evocar sensações de paz e tranquilidade, criando uma atmosfera calmante. Em alguns contextos, o branco também pode desencadear sensações de vazio e isolamento, especialmente em ambientes totalmente brancos, como quartos de hospital vazios.
No design de UI, o branco é altamente versátil e eficaz para destacar informações. Ele traz harmonia às interfaces de design, guiando os usuários através do conteúdo visual e criando uma experiência de usuário visualmente agradável.
O branco foi uma das primeiras cores usadas em pinturas rupestres pré-históricas, onde os pigmentos eram feitos de minerais como giz, calcário, calcita e gesso. Por exemplo, a famosa caverna de Lascaux na França revelou desenhos de touros e outros animais usando esses materiais brancos.
Gregos, romanos e egípcios antigos também usavam pigmentos brancos em arte, escultura, cerâmica e arquitetura. Muitas dessas civilizações antigas associavam o branco à pureza, sacrifício e divindade, tornando-o uma cor proeminente para vestes de sacerdotes e togas. Hoje, o branco continua a ter o mesmo significado em muitas religiões e culturas ao redor do mundo.
O século 20 trouxe mais avanços em pigmentos brancos à medida que mais substâncias se tornaram acessíveis. O dióxido de titânio, por exemplo, revolucionou a produção de tinta branca e se tornou o pigmento principal usado. O branco também desempenha um papel crucial na mistura de cores hoje. Ele pode adicionar um toque de brilho a qualquer cor, combinar com preto para criar vários tons de cinza e adicionar suavidade às cores para produzir tons pastéis.
Variações de cor
Sombras
Tonalidades
Tons
Matizes
Harmonias de cores
Complementar
Dividida
Monocromática
Análoga
Triádica
Quadrado
Paletas personalizadas
Sal e Pimenta
Estilo Urbano
Suavidade Pastel
Verificador de contraste
Contraste 1
- Texto grande
#FFFFFF
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Reprovado | Reprovado | |
Reprovado | Reprovado | |
Reprovado | Reprovado |
Contraste 21
- Texto grande
#FFFFFF
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Aprovado | Aprovado | |
Aprovado | Aprovado | |
Aprovado | Aprovado |
Simulações de cor
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
A cor hexadecimal #ffffff, conhecida como Branco, tem valores RGB de R:255, G:255, B:255 e valores CMYK de C:0, M:0, Y:0, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #ffffff | #ffffff |
| RGB DECIMAL | 255, 255, 255 | RGB(255,255,255) |
| RGB PERCENTAGE | 100.0, 100.0, 100.0 | RGB(100.0%,100.0%,100.0%) |
| CMYK | 0, 0, 0, 0 | |
| HSL | HSL(0.0, 0.0%, 100.0%) | HSL(0.0, 0.0%, 100.0%) |
| HSV (OR HSB) | 0.0°, 0.0, 100.0 | |
| WEB SAFE | #255255255 | #255255255 |
| BINARY | 11111111, 11111111, 11111111 | |
| iOS - SwiftUI | Color(red: 1.000, green: 1.000, blue: 1.000) | |
| iOS - UIKit | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) | |
| Android - Compose | Color(0xFFFFFFFF) |
