HomeDevBeige color codes
Color tools

Beige color codes

Beige color codes for #F5F5DC — HEX, RGB, HSL, HSV, shades, named beiges, and copy-ready CSS.

Loading tool…

Loading Preparing tool…

How to use

Follow these steps for a clear answer.

1

Explore the base color

Review HEX, RGB, HSL, and HSV for beige, then browse shades, tints, tones, and hues.

2

Pick a variation or named shade

Click a generated strip or a CSS named beige shade to load codes and harmonies.

3

Copy for CSS

Copy HEX, rgb(), hsl(), or the keyword—and check contrast on white and black.

Color formulas

Core relationships used by this color tool.

CSS beige#F5F5DC = rgb(245, 245, 220) = hsl(60°, 56%, 91%)
Shadesame H/S, lower L (mix toward black)
Tintsame H/S, higher L (mix toward white)
ComplementH + 180° (soft blue-gray)
iHSV (or HSB) keeps hue with saturation and value; HSL uses lightness. Named shades in this family follow CSS Color Module keywords.

Example colors

Common picks with formula and result.

ϟ

Base beige

CSS keyword

color: beige;
#F5F5DC · rgb(245, 245, 220)
ϟ

Related shade

Family neighbor

antiquewhite
#FAEBD7
ϟ

UI accent

Background use

background-color: #F5F5DC;
Pair with readable text
ϟ

Complement direction

Harmony hint

H + 180°
Toward soft blue-gray

Beige color family specification

Version 1.0.0

Definition
Beige in CSS centers on the keyword beige (#F5F5DC / rgb(245, 245, 220) / hsl(60°, 56%, 91%)). Designers use beige families for minimal, natural, and soft on screens.
What it calculates
Beige family variations (shades, tints, tones, hues), named CSS shades, harmony sets, HEX/RGB/HSL/HSV codes, and contrast vs white/black.
Inputs
  • Selected variation chip, named shade, or harmony swatch
  • Section mode (variations, named shades, harmonies)
Outputs
  • HEX, RGB, HSL, HSV
  • Optional CSS keyword
  • Contrast ratios on white and black
Formula
Shades/tints/tones adjust HSL L or S from base H; harmonies offset H on the hue circle

Beige is a warm off-white for minimalist layouts and natural brand surfaces.

For full keyword search across all hues, use HTML color codes. For palette generation, try the color scheme generator or color wheel.

:root {
  --beige: #f5f5dc;
  --beige-deep: #d2b48c;
  --beige-ink: #3f3a2f;
}

.banner {
  background-color: var(--beige);
  color: #ffffff;
}
Popular CSS beiges
NameHEXRGBFeel
beige#F5F5DC245, 245, 220Base keyword
antiquewhite#FAEBD7250, 235, 215Named shade
linen#FAF0E6250, 240, 230Named shade
oldlace#FDF5E6253, 245, 230Named shade
cornsilk#FFF8DC255, 248, 220Named shade
wheat#F5DEB3245, 222, 179Named shade
tan#D2B48C210, 180, 140Named shade
ivory#FFFFF0255, 255, 240Named shade
seashell#FFF5EE255, 245, 238Named shade
aliceblue#F0F8FF240, 248, 255Named shade
azure#F0FFFF240, 255, 255Named shade
floralwhite#FFFAF0255, 250, 240Named shade
i Related hues may appear in Named shades when useful for beige-adjacent palettes.
Assumptions
  • Base keyword beige = #F5F5DC in sRGB.
  • Named list uses CSS Color Module keywords in/near the beige family.
  • Tool runs locally; nothing is uploaded.
Units
  • HEX: #RRGGBB
  • RGB: 0–255
  • HSL/HSV: hue degrees; S/L/V percent
Boundary conditions
  • Lightness/saturation steps stay within visible ranges (~0–100%).
  • Hue offsets wrap modulo 360°.
Example
beige → #F5F5DC; complementary toward soft blue-gray
Validation cases
  • beige → #F5F5DC
  • ivory → #FFFFF0
  • shade of beige → same hue, lower lightness
  • tint of beige → same hue, higher lightness
Sources
  • CSS Color Module named colors (beige family)
  • Classical shade/tint/tone and hue-harmony geometry
  • WCAG relative-luminance contrast
Calculation version
1.0.0
◉ Ivory color codes › ◉ Tan color codes › ◉ White color codes › # HTML color codes › ◌ Color wheel ›

Frequently asked questions

Key distinctions behind the tool.

What is the hex code for beige?

The CSS named color beige is #F5F5DC, equal to rgb(245, 245, 220) and hsl(60°, 56%, 91%).

What is the difference between beige and ivory?

Beige has a subtle warm yellow-green cast. Ivory is closer to white with a warm hint.

What colors go with beige?

Charcoal text, olive accents, and soft blues keep beige modern—not dusty. Always check text contrast.

Is beige good for body text?

Beige is for backgrounds. Use near-black text; beige text on white fails contrast.

How do I use beige in CSS?

Use color: beige;, color: #F5F5DC;, or color: rgb(245, 245, 220); on any property that accepts a <color> value, including background-color and border-color.