Figma color wheel
Want to find the perfect complementary or analogous colors to match off-white?
Off-white is a soft, slightly warm shade located next to pure white on the color wheel. Its calming, neutral quality makes it easy on the eyes. It exudes peace and comfort and pairs well with bright colors.
Color variations
Shades
Tints
Tones
Hues
Color Harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom Palettes
Blank Page
Yacht Club
Clean Aesthetic
Off-white is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #F2F0EF
- RGB value: 94.9% red, 94.1% green, 93.7% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
Here are some ways to use off-white in your designs:
- Highlight important information. Off-white’s plainness pairs well with bolder shades. Try it as a background for accents, CTA buttons, and icons.
- Create negative space. Use off-white to add negative space to a page or layout, decreasing clutter and establishing a sense of airiness.
- Lay a foundation for content. Off-white is an ideal shade to use as a light backdrop for text- or icon-heavy interfaces, ensuring readability and reducing eye strain.
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same bold spectrum as off-white, consider:
- White (#FFFFFF) is a brighter, purer shade than off-white.
- Ivory (#FFFFE3) adds a subtle tint of yellow for a slightly warmer appearance.
- Beige (#EDE8D0) is a similar neutral shade that’s a bit darker.
- Cream (#FDFBD4) offers higher saturation and a stronger yellow hue while still evoking feelings of comfort.
To complement off-white, consider pairing it with:
- Turquoise (#40E0D0) has a clear, breezy feel that blends well with off-white in tropical palettes.
- Navy blue (#000080) can be paired with off-white for a classy nautical combination.
- Scarlet (#ED2100) stands out boldly next to off-white, adding sophistication and vigor.
- Cognac (#A2574F) complements off-white’s neutral hues with richness, heartiness, and depth.
Off-white goes well with many colors, but others worth considering are olive green for an earthy vibe, black for punchy contrast, and maroon for a popular academic pairing.
Off-white symbolizes peace, elegance, and fresh starts. It also shares specific associations with pure white, such as goodness, spirituality, and innocence.
In color psychology, off-white evokes a sense of comfort, delicacy, and refinement. Its simplicity can also bring out feelings of clarity and ease, particularly when matched with other soothing colors.
In UI design, off-white can be used liberally without being overwhelming. It’s a great choice for pleasing, muted backdrops and other prominent design elements. It also pairs well with a wide range of bold shades, making it highly versatile.
Off-white is one of the earliest known pigments, dating back to the Paleolithic period, where it appeared in cave paintings. By the 1930s, off-white had become an established color in fashion and decor, complementing bold palettes or standing on its own. Today, it's as popular as ever, with some paint manufacturers offering hundreds of different off-white shades in their catalogs.
Contrast 1.14
- Large Text
#F2F0EF
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 18.49
- Large Text
#F2F0EF
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #F2F0EF, known as off-white, has RGB values of R:242, G:240, B:239 and CMYK values of C:0, M:0.01, Y:0.01, K:0.05.
| VALUE | CSS | |
|---|---|---|
| HEX | F2F0EF | #F2F0EF |
| RGB DECIMAL | 242, 240, 239 | RGB(242, 240, 239) |
| RGB PERCENTAGE | 94.9, 94.1, 93.7 | RBG(94.9%, 94.1%, 93.7%) |
| CMYK | 0, 1, 1, 5 | |
| HSL | 20°, 10.3, 94.3 | HSL(20°, 10.3%, 94.3%) |
| HSV (OR HSB) | 20°, 1.2, 94.9 | |
| WEB SAFE | FFFFFF | #FFFFFF |
| CIE-LAB | 94.92, 0.491, 0.709 | |
| XYZ | 83.355, 87.429, 94.141 | |
| xyY | 0.315, 0.33, 87.429 | |
| CIE-LCH | 94.92, 0.862, 55.316 | |
| CIE-LUV | 94.92, 1.177, 1.002 | |
| HUNTER-LAB | 93.504, -4.505, 5.759 | |
| BINARY | 11110010, 11110000, 11101111 | |
| iOS - SwiftUI | Color(red: 0.949, green: 0.941, blue: 0.937) | |
| iOS - UIKit | UIColor(red: 0.949, green: 0.941, blue: 0.937, alpha: 1) | |
| Android - Compose | Color(0xFFF2F0EF) |
