Beige is a soft, warm neutral that sits between off-white and light brown. It's known for looking calm and understated, which makes it a reliable base color for both digital and physical design.
On this page you'll find beige's color codes, quick conversions, meanings, common pairings, shades, and practical tips for using it in palettes that feel modern, cozy, or minimal—without looking flat.
Beige Color: Codes & Values
If you're building a palette, styling a UI, or prepping a print file, these are the core beige color codes you'll reference most.
| Parameters | VALUE |
| HEX Code | #F5F5DC |
| RGB DECIMAL | 245, 245, 220 |
| RGB PERCENTAGE | 96.1%, 96.1%, 86.3% |
| CMYK | 0%,0%,10%,4% |
| HSL | 60°, 56%, 91% |
| HSV (HSB) | 60°, 10%, 96% |
| Web Safe | #FFFFCC |
Key Color Space Explanations:
- HEX is the most common way to specify beige in web design. It encodes the red, green, and blue channels into a single six-digit value.
- RGB describes beige as a mix of red, green, and blue light on screens. Higher channel values create a lighter, softer appearance.
- CMYK is used for printing and describes how much cyan, magenta, yellow, and black ink is needed. Beige typically uses very low ink coverage, with a small amount of yellow and black.
- HSL is useful for adjusting beige in a predictable way—changing lightness to make it brighter or deeper, and saturation to make it more muted or more colorful.
- Web Safe is the closest color from the classic 216-color palette. It's helpful for legacy constraints, though modern displays usually render the exact HEX accurately.
Use HEX/RGB for screen work (web, apps, video thumbnails), and CMYK for print—then fine-tune with HSL when you need lighter or more muted beige variations.
Want to generate beige color photos or posters? Try Media.io's AI Image Generator now!
Beige Color Conversions
Need beige in a different format for CSS, design tools, or color management? Use the conversion table below for quick copy-and-paste values.
| Parameters | VALUE | CSS |
| HEX | #f5f5dc | #f5f5dc |
| RGB DECIMAL | 245, 245, 220 | rgb(245,245,220) |
| RGB PERCENTAGE | 96.1%, 96.1%, 86.3% | rgb(96.1%,96.1%,86.3%) |
| CMYK | 0%,0%,10%,4% | cmyk(0%,0%,10%,4%) |
| HSL | 60°, 56%, 91% | hsl(60°,56%,91%) |
| HSV (or HSB) | 60°, 10%, 96% | -- |
| Web Safe | ffffcc | #ffffcc |
| CIE-LAB | 95.9, -5.0, 12.2 | -- |
| XYZ | 83.17, 89.92, 80.54 | -- |
| xyY | 0.3280, 0.3546, 89.92 | -- |
| CIE-LCH | 95.9, 13.2, 112.3° | -- |
| CIE-LUV | 95.9, 1.3, 19.1 | -- |
| Hunter-Lab | 94.8, -4.5, 11.8 | -- |
| Binary | 11110101, 11110101, 11011100 | -- |
Beige Color Meaning & Symbolism
Beige is often chosen when you want a design to feel grounded and easy to live with. Because it's subtle, it can support other colors without competing for attention.
Psychological Effects
As a warm neutral, beige tends to shape the "background feeling" of a design more than the spotlight.
- Calm Atmosphere - Beige softens visual intensity, which can make pages and layouts feel quieter and less demanding.
- Comfort & Familiarity - Its natural undertone often reads like everyday materials, creating an easy, lived-in mood.
- Grounded Stability - Beige can make a brand or interface feel steady and dependable without looking heavy.
- Supports Focus - Because it doesn't "shout," beige helps typography, imagery, and primary actions stand out more clearly.
- Risk Of Flatness - Without contrast, spacing, or texture, beige-heavy designs can feel bland or visually washed out.
Positive Associations
Beige works best when you're aiming for understated confidence rather than high drama.
- Quiet Confidence - Beige suggests calm, comfort, and a subtle premium feel instead of loud attention-grabbing color.
- Natural Materials - It commonly evokes sand, linen, paper, and light wood—great cues for organic or earthy aesthetics.
- Timeless Simplicity - Beige supports minimalism and classic layouts that don't feel tied to a specific trend.
- Soft Warmth - Compared with stark white, beige feels more welcoming while still keeping a clean look.
- Background Harmony - It plays well with many accents, helping other hues look intentional instead of competing.
Cultural Significance Across the World
Because it's close to common natural textures, beige often adapts to local style rather than carrying one fixed message.
- Modern Minimal Aesthetics - Beige is frequently used in pared-back design styles where calm neutrals and negative space matter.
- Craft & Heritage Cues - It's often chosen to echo paper, textiles, and raw materials in packaging and editorial layouts.
- Home & Lifestyle Visuals - Beige shows up widely in cozy, organic-themed imagery and interiors across many markets.
- Understated Premium - In branding, beige can signal restraint and refinement when paired with strong typography and a dark anchor.
Design Applications
Beige is a practical base color in UI, branding, and visual content because it keeps the canvas warm while staying neutral. It's especially useful when you want a "natural" look that still feels clean.
Graphic Design Tips
- Use beige for backgrounds and large surfaces when pure white feels too cold or glaring.
- Apply it to cards, panels, and section breaks to create softer separation than stark white/gray blocks.
- Pair beige with one darker anchor color for headings and key UI elements so the layout doesn't look faded.
- Add subtle texture cues (grain, gentle shadows, or low-contrast gradients) to keep beige from feeling flat.
- Keep accents limited to one or two hues to preserve the calm, minimal character and avoid visual noise.
Pro tip: Treat beige like a "surface" color, not your main contrast color—then let typography weight, spacing, and a dark neutral do the heavy lifting for hierarchy.
Beige Color in Photography & Video
- Use beige backdrops for lifestyle shots and product photography when you want a warm, non-distracting setting.
- Watch white balance: warm lighting can push beige toward yellow, while cool lighting can make it look gray.
- Lean into natural props (linen, paper, wood tones) to reinforce beige's organic feel.
- In color grading, keep saturation controlled so skin tones and highlights stay clean and not muddy.
- Build contrast with deeper neutrals in wardrobe, shadows, or set elements so the scene doesn't look washed out.
Recommended Tool for Image Enhancement: When incorporating beige color into your photography projects, Media.io's AI Image tools can help you achieve more refined results. With AI-powered color enhancement, photo colorization, image upscaling, and old photo restoration, you can easily enrich beige color tones, improve overall image quality, and highlight the color's elegant and sophisticated aesthetic.
Color Combinations
Beige is flexible: it can lean cozy and warm, or crisp and modern depending on the supporting colors. The palettes below show dependable ways to build contrast while keeping beige as the foundation.
Complementary Colors
A complementary palette adds a cool counterbalance to beige's warmth. This approach is great when you want beige to feel modern, not overly rustic.
Complementary Palette Example: Use Beige as the base, then add a blue complement for contrast and a deeper blue for structure in headings, buttons, or key accents.
Analogous Color Schemes
Analogous colors sit adjacent to each other on the color wheel, creating harmonious, cohesive palettes with subtle variation.
A soft yellow-green to yellow palette that feels natural and relaxed, like linen and dried grasses.
- Pale Olive: #DFE5B5
- Beige: #F5F5DC
- Warm Sand: #F2E1C2
A warmer analogous blend that stays light and airy, ideal for bright, minimal layouts.
- Ivory Cream: #FFF1D6
- Beige: #F5F5DC
- Light Khaki: #E6D8B5
Triadic & Tetradic Combinations
Triadic palettes keep strong variety while staying balanced.
Beige paired with a soft teal and a dusty lilac creates contrast that still feels gentle and contemporary.
- Beige: #F5F5DC
- Soft Teal: #6FB7A6
- Dusty Lilac: #B792C6
Colors to Avoid
While beige color is remarkably versatile, certain combinations can create problematic visual effects:
- Neon Green (#39FF14) - The intensity overwhelms beige's subtlety and can make the palette feel unbalanced or harsh.
- Pure Red (#FF0000) - High saturation creates a sharp, attention-grabbing contrast that can look abrupt against beige.
- Electric Blue (#0000FF) - Very strong chroma and deep value can make beige look dingy by comparison if not carefully managed.
- True Black (#000000) - The contrast can be too stark for soft, natural themes; a gentler dark tone often looks more refined.
Shades, Tints & Variations of Beige Color
Beige isn't just one "safe neutral"—it spans bright, creamy off-whites through deeper, grounded taupe tones. Having a few reliable beige variations makes it easier to build hierarchy (backgrounds, surfaces, borders, and accents) without breaking the warm, natural feel.
- Cream Beige (#FBF7E6) - A brighter, milkier beige that reads almost like an off-white but keeps a warm undertone. It's best used for Use for large backgrounds, whitespace, and airy layouts where pure white feels too cold..
- Classic Beige (#F5F5DC) - The reference beige: light, warm, and neutral enough to support many accent colors. It's best used for Use as a primary canvas color for websites, templates, and brand systems aiming for calm warmth..
- Sand Beige (#E7DFC3) - A slightly deeper beige with a sandy feel, adding presence without turning brown. It's best used for Use for cards, sections, and subtle separation between UI blocks..
- Khaki Beige (#CFC39B) - A muted, earthy beige that leans toward khaki and works well in nature-inspired palettes. It's best used for Use for secondary surfaces, borders, and understated fills where you want more definition..
- Taupe Beige (#A99676) - A darker beige with a taupe influence, adding depth and a more grounded tone. It's best used for Use for navigation bars, footers, typography accents, or as a warm neutral alternative to gray..
Industry Applications
Because beige is neutral, it adapts to many industries—especially where trust, comfort, and simplicity matter. The key is to assign it a clear role (base, surface, or accent) and support it with enough contrast.
Fashion & Beauty
- Use beige as a wardrobe-neutral base that pairs easily with both warm and cool accents.
- In beauty visuals, beige backgrounds help skin tones and product textures read more naturally.
- For lookbooks and e-commerce, beige surfaces reduce glare while keeping a clean, premium vibe.
- In packaging for skincare and cosmetics, beige can signal softness, simplicity, and "everyday" usability.
Interior Design & Decor
- Build neutral mood boards and room mockups around beige as a warm foundation.
- Show textiles and materials (linen, paper, wood-inspired visuals) with a natural, cohesive tone.
- Use beige as a non-distracting base in product visualization so shapes and shadows stay clear.
- Pair beige with deeper accents to define zones (walls vs. trim, upholstery vs. decor) without harsh contrast.
Branding & Marketing
- Create calm, premium-feeling labels and product wraps that don't compete with photography or icons.
- Use beige as a background tone for logos and marks that need breathing room.
- Support content-heavy editorial layouts with a warm canvas that keeps long reads comfortable.
- In social content, beige backdrops help products and headlines stand out while keeping the feed cohesive.
Conclusion
Beige color (#F5F5DC) is a dependable warm neutral that brings softness and calm to modern palettes—whether you're designing a website background, a brand system, or a lifestyle visual. The key to making beige look intentional (not plain) is structure: pick a darker anchor for readability, use one or two controlled accents for personality, and explore a few beige shades to create depth across surfaces and sections.
Design Smarter with AI: Media.io is an online AI studio that empowers creators with advanced image generation and enhancement tools. From text-to-image and image-to-image creation to AI upscaling and color optimization, it enables fast, creative, and professional results—all in your browser.
Frequently Asked Questions About Beige Color
A commonly used beige is #f5f5dc. It's a light, warm neutral that works well as a background and as a supporting color in palettes.
For #f5f5dc, the RGB decimal values are 245, 245, 220. This high RGB mix is why beige appears light and soft on screens.
Beige is typically warm because it often has a yellow or brown undertone. That warmth makes it feel more natural and cozy than many cool grays.
Beige pairs well with muted blues for contrast, gentle greens for an organic look, and soft purples for a modern, balanced palette. It also works nicely with deeper neutrals to create hierarchy.
Add structure: use a darker anchor color for key elements, introduce texture (subtle shadows or grain), and limit accents to one or two hues. This keeps the palette intentional and readable.
The closest web-safe match listed here is #ffffcc. While most modern devices can display #f5f5dc accurately, web-safe values can be helpful for legacy constraints.
