What does the color Beige mean?

Yellow

Beige

#f5f5dc

#f7f7e3

#f9f9ea

#fbfbf1

#fdfdf8

#dedeca

Meaning

Optimism, attention, and warmth. Ideal for highlights, warnings, and cheerful brands.

History

Beige is a standard CSS/SVG named color used across browsers since early web standards.

Usage

Use Beige (#f5f5dc) in CSS as color: beige; or as #f5f5dc.

Preview

Beige

#f5f5dc

Overview

Family: Yellow

Accessibility on this swatch:

AAA

(18.98:1)

Contrast vs white: 1.11:1 · vs black: 18.98:1

Formats

HEX

#f5f5dc

RGB

rgb(245, 245, 220)

RGBA

rgba(245, 245, 220, 1)

HSL

hsl(60, 56%, 91%)

HSV

hsv(60, 10%, 96%)

LAB

lab(95.95% -4.19 12.05)

LCH

lch(95.95% 12.76 109.17)

OKLAB

oklab(0.9636 -0.0096 0.0314)

OKLCH

oklch(0.9636 0.0328 107)

XYZ

xyz(83.23, 89.89, 80.66)

CMYK

cmyk(0%, 0%, 10%, 4%)

CSS

color: #f5f5dc;

CSS variable

--color-f5f5dc: #f5f5dc;

SCSS

$color-f5f5dc: #f5f5dc;

Tailwind

amber-50

Export

Developer code

:root {
  --beige-1: #f5f5dc;
}

Color psychology

Optimism, attention, and warmth. Ideal for highlights, warnings, and cheerful brands.

Usage examples: primary buttons, chart series, status badges, marketing gradients, and brand accents in the Yellow family.

Tints

Shades

Tones

Complementary

Analogous

Triadic

Split complementary

Monochromatic

Related shades & tints

#f7f7e3

#f9f9ea

#fbfbf1

#fdfdf8

#dedeca

#c6c6b7

#afafa5

#979792

Similar colors

#fff8dc

#ffffe0

#fdf5e6

#ffefd5

#fffff0

#faebd7

#fafad2

#f0fff0

Browse more in the color name library.