Cor Bege: código #F5F5DC

Bege

#F5F5DC

Códigos da cor

  • HEX#F5F5DC
  • RGBrgb(245, 245, 220)
  • HSLhsl(60, 56%, 91%)
  • HSVhsv(60, 10%, 96%)
  • CMYKcmyk(0%, 0%, 10%, 4%)
  • LABlab(96% -4.2 12.1)
  • OKLCHoklch(96.4% 0.033 107)

Sobre a cor Bege

Bege tem o código HEX #F5F5DC, que corresponde a rgb(245, 245, 220) no modelo RGB. No círculo cromático, seu matiz fica em 60°, com 56% de saturação e 91% de luminosidade (hsl(60, 56%, 91%)).

Pelo matiz, é percebida como uma cor quente: tende a transmitir energia e proximidade e a “avançar” visualmente na composição.

Como fundo, pede texto escuro: o preto atinge contraste de 18,97:1 sobre ela, contra 1,10:1 do branco.

Para impressão, a conversão aproximada é cmyk(0%, 0%, 10%, 4%). Confirme sempre com o perfil de cor da gráfica, porque o resultado depende do papel e da tinta.

Tons mais claros

Tons mais escuros

Combinações com Bege

Complementar

#F5F5DC · #DBDBF5

Análoga

#F5E8DB · #F5F5DC · #E8F5DB

Tríade

#F5F5DC · #DBF5F5 · #F5DBF5

Tetrádica

#F5F5DC · #DBF5E8 · #DBDBF5 · #F5DBE8

Complementar dividida

#F5F5DC · #DBE8F5 · #E8DBF5

Monocromática

#D9D978 · #EAEAB3 · #F5F5DC · #FFFFFF · #FFFFFF

Bege com texto branco e preto

Texto branco Aa Bb Cc 123
1,10:1 · não passa na WCAG
Texto preto Aa Bb Cc 123
18,97:1 · AAA

Testar outras combinações no verificador de contraste

Se você chegou aqui procurando “o bege da parede da sala”, vale um aviso: o bege das especificações web, #F5F5DC, é bem mais claro e levemente esverdeado do que o bege que a maioria das pessoas imagina. Ele nasceu como cor nomeada do sistema X11 e foi herdado pelo CSS, onde beige é exatamente esse tom de papel antigo. O bege do dia a dia, de tecidos de linho, areia e caixas de papelão, costuma ser mais quente e mais escuro, algo na faixa de #D8C3A5 ou do tan do CSS (#D2B48C).

Um neutro com temperatura

O bege é lido quase sempre como neutro, discreto e acolhedor. Em moda e decoração, é sinônimo de estilo clássico, “minimalismo quente” e tecidos naturais como linho e algodão cru. Para algumas pessoas, porém, o bege evoca algo sem graça ou antiquado: a percepção depende da geração, da cultura e do quanto a cor aparece sozinha. Com texturas e materiais naturais, ele ganha profundidade; em uma tela chapada, pode parecer apenas um branco sujo.

Usos que funcionam

Com o que combinar

Contraste: sempre texto escuro

Com luminância altíssima, #F5F5DC tem contraste de só 1,1:1 com o branco, ou seja, texto branco sobre bege é praticamente invisível. Use texto preto, cinza-chumbo ou marrom escuro. E atenção: bege sobre branco também quase não se distingue, então separe as áreas com bordas ou sombras. No modo escuro, troque o fundo bege por um marrom acinzentado profundo e reserve o bege para o texto. Confira as combinações no verificador de contraste e leia a diferença para o nude e o creme nas respectivas páginas.

Como usar em CSS

:root {
  --color-beige: #F5F5DC;
  --color-beige-rgb: 245, 245, 220;
}

.elemento {
  background-color: var(--color-beige);
  color: #000000;
}

Cores parecidas

Use Bege nas ferramentas