What color is 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.
What does off-white look like on digital screens?
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.
How should I effectively use off-white in UI design?
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.
What are similar colors to off-white?
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.
What colors go with off-white?
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.
What colors conflict with off-white?
While off-white is clean and simple, it may clash with:
- Magenta (#FD3DB5) is incredibly vivid and may overwhelm the mild warmth of off-white.
- Silver (#C4C4C4) and off-white wash each other out due to their shared neutral quality.
- Indigo (#560591) can make off-white appear dingy.
What does off-white symbolize?
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.
What’s the history of off-white?
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.
Color variations
Shades
Tints
Tones
Hues
Color Harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom Palettes
Blank Page
Yacht Club
Clean Aesthetic
Accessibility: Contrast Checker
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
1.14:1
WCAG 2.2 Simple Contrast
Normal Text
- Fail
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Fail
- AA
- 3:1
- Fail
- AAA
- 4.5:1
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
18.49:1
WCAG 2.2 Simple Contrast
Normal Text
- Pass
- AA
- 4.5:1
- Pass
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Pass
- AAA
- 4.5:1
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
Color conversion
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) |
