Black text 18.9:1
Beige is the soft, warm neutral of sand, linen and oatmeal.
This page lists 24 named shades of beige - from Almond and Bone to Desert Sand and Tumbleweed - with HEX, RGB, HSL and CMYK codes.
Click to copy any code, or download the whole set for your design app.
Beige - lightest24 shades sorted light to darkdarkest - Pale Taupe
Download all 24 shades of beige
Photoshop, Illustrator, InDesign, AffinityA Tailwind-style scale built from Beige (#F5F5DC), evenly spaced in OKLCH lightness, with the darker steps turned 30° warmer so they read as warm browns rather than olive. Paste any other beige to build its own scale, or click a swatch for its codes and contrast.
Something went wrong. Please try again.
Still having trouble? Please contact us and we'll be happy to help!
Hmm, that doesn't look like a color yet. Try #3399cc, rgb(51, 153, 204), hsl(200, 60%, 50%) or a name like Cobalt.
#F5F5DCrgb(245, 245, 220)hsl(60, 56%, 91%)cmyk(0%, 0%, 10%, 4%)Tints mixed with white
Shades mixed with black
Tones mixed with gray
Click any swatch to see its codes and contrast. Tints, shades and tones are simple RGB mixes, the classic way painters and print designers make them.
:root {
--brand-50: #f5f5dc;
--brand-100: #eae8c5;
--brand-200: #dad6b1;
--brand-300: #c4be98;
--brand-400: #a8a07c;
--brand-500: #918767;
--brand-600: #7a6f55;
--brand-700: #655c47;
--brand-800: #524a3b;
--brand-900: #433c30;
--brand-950: #2a261f;
}Next: blend 50 into 950 in the Gradient Generator, test every pair in the Accessible Color Palette, check 900 on 100 with the Contrast Checker or find matching colors on the Color Wheel.
Using the same color wheel maths as our Color Wheel, these are the harmonies for Beige (#F5F5DC). Click a group to open it on the wheel.
#DCDCF5 Lavender (web)
Analogous
Next-door neighbors - calm and harmonious
#F5E9DC Alabaster#E9F5DC Beige
Triadic
Three evenly spaced hues - bold and balanced
#DCF5F5 Light Cyan#F5DCF5 Pink Lace
Split complementary
The two neighbors of the opposite - contrast with less tension
#DCE9F5 Lavender (web)#E9DCF5 Lavender (web)
Beige feels calm, cozy and understated. It is a background color by nature: it warms up a space without competing with anything placed on it.
The word comes from French, where it described natural wool that had not been bleached or dyed. That origin still shows in how beige reads - natural, simple, unprocessed.
Interior designers lean on beige and its cousins, such as greige and taupe, because they work with almost any accent color, from navy to terracotta.
See beige in complete, ready-made palettes - each one with codes and downloads.
Want a palette built around one exact beige? Start from it in the AI Color Palette Generator or pull colors from a photo with the Image Color Picker.
Beige is #F5F5DC, which is rgb(245, 245, 220) and hsl(60, 56%, 91%). For print it is about 0% cyan, 0% magenta, 10% yellow and 4% black. It is also a CSS color keyword, so you can simply write beige in your stylesheet.
There is no fixed number - any beige can be made lighter, darker or more muted. This page lists 24 named shades, from Beige (#F5F5DC) to Pale Taupe (#BC987E). The generator on this page makes a full 50-950 scale and unlimited tints, shades and tones from any beige.
Beige (#F5F5DC) has a contrast ratio of 1.10:1 on white and 18.97:1 on black, so it reads best on dark backgrounds or with dark text on top of it. None of the named beige shades here reach the 4.5:1 minimum on white, so use beige as a background with dark text instead. Test any pair with the Contrast Checker.
Beige (#F5F5DC) is a pale, slightly grayish yellow-brown. Cream (#FFFDD0) is brighter and more yellow, like dairy cream. Beige feels more neutral, cream feels warmer.
Tan (#D2B48C) is darker and more brown than beige. Think of beige as a very light tan - both sit on the same warm, yellow-orange hue.
Beige works with almost anything. Navy, olive and burgundy give contrast; sage, blush and terracotta keep it soft and warm.