Welcome back to my CSS color series! In this comprehensive guide, we will be exploring the color dirty white – what it is, how to use it in CSS, and some examples of dirty white in design.
What is Dirty White?
Dirty white refers to a range of light greyish or beige off-white colors. It sits between pure white and light grey on the color spectrum. Dirty whites contain subtle warm undertones that give them a slightly yellowish, cream-like appearance.
The term “dirty” suggests these colors are not clean, bright whites. They have a muted, dusty, or dingy quality. You can imagine dirty white being the color of an old shirt that has become faded and discolored from many wash cycles.
Some common synonyms for dirty white include:
- Off-white
- Beige
- Ecru
- Cream
- Ivory
- Oatmeal
- Mushroom
- Linen
Dirty whites sit between white (#FFFFFF) and very light greys like #F5F5F5 on the hexadecimal color scale. They usually have hex values in the #F0F0F0 to #FAFAFA range.
Using Dirty White in CSS
There are a few different ways to utilize dirty white colors in CSS for web design:
- Use hexadecimal color values – For example, #F5F5F5 for a light greyish white.
- Use RGB values – Such as rgb(245, 245, 245).
- Use CSS color name – You can specify generic color names like “white” or “ivory”.
- Use HSL values – Specifying the hue, saturation, and lightness as hsl(60, 10%, 90%).
Here is an example CSS code block for setting a dirty white background:
.dirty-white-bg {
background-color: #F8F8F8;
}
To use a dirty white text color instead:
p {
color: rgb(250, 250, 248);
}
Dirty White Color Palette
There are many subtle variations of dirty white. Here is a palette of some popular dirty whites and their hex codes:
| Color Name | Hex Code |
|---|---|
| Cultured | #F5F5F5 |
| White Smoke | #F5F5F5 |
| Beige | #F5F5DC |
| Linen | #FAF0E6 |
| Antique White | #FAEBD7 |
| Champagne | #F7E7CE |
| Blanched Almond | #FFEBCD |
This gives you an idea of the range of subtle off-whites and light beiges that qualify as “dirty whites”. They can vary from greyish to peachy tones.
When to Use Dirty White
Here are some common use cases where dirty whites work well in designs:
- Backgrounds – Dirty whites make soft, neutral backgrounds that are gentler on the eyes than harsh bright whites.
- Text – Low contrast dirty whites can make stylish text colors that are still legible against darker backgrounds.
- Borders – Softer than black or grey borders, dirty white borders separate elements while maintaining a clean look.
- Shadows – Subtle dirty white shadows complement without overwhelming the foreground objects.
- Vintage/Retro themes – Dirty whites nod to aged, timeworn color palettes.
- Minimalist/Modern themes – Crisp dirty whites align with sparse, contemporary aesthetics.
In general, dirty whites work well when you want a soft neutral color that is brighter than grey but not as stark as pure white. They create natural, elegant backgrounds and accents.
Examples of Dirty White in Web Design
Let’s look at some examples of dirty white used effectively in websites:
The New York Times
The New York Times uses an off-white/eggshell background (#F4F5F6) on their content pages. This gives their text excellent contrast while maintaining a clean, uncluttered look:
Dribbble
The designer portfolio site Dribbble utilizes white smoke (#F5F5F5) in their main interface backgrounds. This is a very light grey that maintains a bright, airy feel while toning down the harshness of pure white:
Hyundai
The Hyundai auto website uses a pale putty color (#ECE9E1) prominently in their backgrounds. This gives their page a refined, luxurious look and feel:
As you can see, dirty whites lend an upscale, yet unobtrusive visual style to websites across sectors. The colors are legible, professional and let the content take center stage.
Common Uses of Dirty White in Design
Beyond web design, dirty whites show up across many design disciplines:
- Interior design – White Smoke is popular as a wall color. It brightens up rooms without being too stark.
- Fashion – Off-white and ivory shades complement natural fabrics like linen and cotton.
- Packaging – Unbleached kraft and cream cardboard give products an earthy, organic look.
- Photography – Lower white balance settings produce warm, vintage tones.
- Cosmetics – Makeup and nail polish favor softer ivories over bright white.
The muted yet refined nature of dirty whites make them widely adaptable across industries and applications.
Alternatives to Dirty White
Dirty white is not the only neutral off-white shade available. Some other options include:
- Cream – Warm peachy undertones, slightly darker than dirty white. Hex #FFFDD0.
- Eggshell – Slightly greyish and desaturated. Hex #F0EAD6.
- Natural White – Very soft warm tone without yellow. Hex #FEFCFF.
- Grey – Much cooler in temperature than dirty white. Hex #D3D3D3.
The right choice depends on the specific need. Cream and eggshell have similar softness as dirty white. Natural white is great for a super subtle background. Grey makes an alternate neutral.
Conclusion
So in summary, dirty white refers to a range of soft off-white colors with subtle warm undertones. It can provide backgrounds, accents, and contrasts with an airy, vintage, or minimalist feel. Dirty whites are widely used across UI design, branding, photography, interior design, and more.
Next time you need a neutral that is gentler than stark white, consider giving dirty white a try! Adjusting the exact tone and saturation will let you achieve the right muted, retro or modern look for your project.
I hope you enjoyed this CSS color tutorial! Let me know if you have any other questions about working with dirty white shades in your designs and code.
