CSS Color: Beige
Named CSS color Beige — #F5F5DC in HEX, rgb(245, 245, 220) in RGB, hsl(60, 56%, 91%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Beige | color: Beige; |
| HEX | #F5F5DC | color: #F5F5DC; |
| RGB | rgb(245, 245, 220) | color: rgb(245, 245, 220); |
| HSL | hsl(60, 56%, 91%) | color: hsl(60, 56%, 91%); |
About Beige
Beige is a warm, sandy off-white that is noticeably warmer than Ivory. At hex `#F5F5DC`, it has equal red and green (245) with lower blue (220), sitting at 60 degrees hue with 56% saturation and 91% lightness.
In web design, Beige creates a warm, natural feel that is distinctly visible as a tinted background (unlike the nearly invisible tints of Snow or Ivory). It works well for nature-themed designs, organic brands, and vintage aesthetics. Beige backgrounds make content feel warmer and more personal than sterile white.
For accessibility, Beige provides slightly less contrast than white for dark text, but the difference is minimal. Dark text on Beige maintains excellent readability for all practical purposes.
Beige pairs beautifully with brown, olive, forest green, navy, and warm reds. It creates effortlessly elegant earth-toned palettes popular in interior design, fashion, and artisan brand websites. In Tailwind CSS, `amber-50` or `stone-100` provide similar warm neutral tones.
FAQ
What is the hex code for Beige?
The CSS named color Beige has the hex code #F5F5DC. You can use it in CSS as color: #F5F5DC; or simply color: Beige;.
What is Beige in RGB?
In RGB notation, Beige is rgb(245, 245, 220). Use it in CSS as color: rgb(245, 245, 220);.
What is Beige in HSL?
In HSL notation, Beige is hsl(60, 56%, 91%). Use it in CSS as color: hsl(60, 56%, 91%);.
What color category is Beige?
Beige belongs to the White/Black color family in the CSS named colors specification.
Can I use the name "Beige" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Beige; or background-color: Beige; directly in your stylesheet. Named colors are case-insensitive.
Try in Color Converter
Convert Beige to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →