Off-White design guide
HEX
#FAF9F6
RGB
250, 249, 246
HSL
45°, 29%, 97%
HSV
45°, 2%, 98%
A whisper of warmth keeps off-white from scanning as sterile clinic white. #FAF9F6 reads like natural paper fibers or limestone dust in morning light. Designers reach for it when they want cleanliness with a human temperature.
Best for
Product launches, promotional banners, and e-commerce storefronts.
Accessibility
Check contrast before using off-white for text-heavy layouts, especially on low-contrast backgrounds.
How does off-white compare to nearby colors?
What is the difference between off-white and ivory?
Off-White (#FAF9F6) feels more softened on screen, while Ivory (#FFFFF0) pushes the family in the opposite direction. Off-White is easier to live with across large areas, because it carries less chroma pressure than Ivory. Use off-white for the more restrained version of the idea, and move to ivory when the palette needs a brighter front-facing accent.
What color is off-white?
Off-white is standard in paint, wedding stationery, and gallery walls where pure white feels too clinical. The specific hex suggests a subtle cream direction.
What is the hex code for off-white?
| Format | Value |
|---|---|
| HEX | #FAF9F6 |
| RGB | rgb(250, 249, 246) |
| HSL | hsl(45°, 29%, 97%) |
| HSV / HSB | hsv(45°, 2%, 98%) |
| CMYK (approx.) | cmyk(0%, 0%, 2%, 2%) |
Convert Off-White to other color formats
Open the color converter with Off-White (#FAF9F6) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Off-White in the color converter →What does off-white mean in design?
Off-white is often associated with calm domesticity, approachable luxury, and soft minimalism. It tends to read warmer than snow and less yellow than alabaster.
How do I use off-white in code?
| CSS (hex) | color: #FAF9F6; |
| CSS (rgb) | color: rgb(250, 249, 246); |
| CSS (hsl) | color: hsl(45, 29%, 97%); |
| RGB % | rgb(98%, 98%, 96%) |
| Tailwind | text-[#FAF9F6] |
| SwiftUI | Color(red: 0.980, green: 0.976, blue: 0.965) |
| UIKit | UIColor(red: 0.980, green: 0.976, blue: 0.965, alpha: 1.0) |
| Android | Color.rgb(250, 249, 246) |
| Compose | Color(0xFFFAF9F6) |
| Web Safe | #FFFFFF |
Is off-white accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 1.05:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaBlack text on this color | 19.95:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaThis color as text on white | 1.05:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaThis color as text on black | 19.95:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.
How does off-white look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with off-white
Charcoal keeps very light off-white from disappearing into the canvas and adds the structure needed for documents, interfaces, and tables.
Because off-white already carries warmth, navy blue gives the pair a steadier backbone and keeps it closer to editorial systems than to one-note seasonal color.
Pairing off-white with white keeps the layout open and lets the color's sunlit yellow cast stay easy to read.
What colors clash with off-white
Magenta pushes off-white toward a nightclub or cosmetic register that is hard to square with calmer editorial or product work.
With off-white, cyan introduces a colder display-driven cast that strips away some of the source color's tactile character.
Light Gray sits too close to off-white in value, so the palette can wash out before it ever establishes a clear hierarchy.
How should I use off-white in design?
- •Off-White is subtle enough for full-page backgrounds, hover states, and delicate tinting effects — reserve it for atmosphere rather than emphasis.
- •Cool neutrals like charcoal and slate sharpen off-white's warm character, while warm companions like cream and gold amplify its inviting quality.
- •Off-White's lightness makes it a good candidate for email backgrounds, slide canvases, and page sections where you want atmosphere, not distraction.
What are good off-white palettes?
Daylight
Product launches, promotional banners, and e-commerce storefronts.
Sunlit warmth
Brand guidelines, design systems, and visual identity documents.
Design with off-white in Moda
Create a presentation or document using off-white as your accent color. Moda's AI applies your color palette automatically.
Create a design with off-white →What are the shades and tints of off-white?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for off-white?
Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.
Similar colors
Alabaster
Alabaster is nearly adjacent to off-white in hue; what separates them is intensity, with alabaster reading dustier and easier to extend across a layout.
Ivory
Ivory is nearly adjacent to off-white in hue; what separates them is intensity, with ivory reading cleaner and more assertive.
Platinum
Platinum stays very close to off-white in hue, but it lands darker, which makes it better for headlines, anchors, and darker sections than for lighter surfaces and more open applications.
Beige
Beige stays very close to off-white in hue, but it lands darker, which makes it better for headlines, anchors, and darker sections than for lighter surfaces and more open applications.
Champagne
Champagne stays very close to off-white in hue, but it lands darker, which makes it better for headlines, anchors, and darker sections than for lighter surfaces and more open applications.
Frequently asked questions
What is the hex code for off-white?
The hex code for off-white is #FAF9F6. In RGB, that's 250 red, 249 green, and 246 blue. The approximate CMYK equivalent is 0% cyan, 0% magenta, 2% yellow, and 2% key (black).
Is off-white a warm or cool color?
Off-White reads as warm. It feels most natural with creams, golds, rusts, and other warm accents, while cooler partners like navy or teal create sharper contrast.
Is off-white better for backgrounds or accents?
Off-White is usually stronger as a background, card tint, or section surface than as a sharp accent. It works best when darker typography or controls can sit on top and do the hierarchy work.
How should I use off-white in a design?
Off-White is light enough that it belongs on surfaces rather than in small text. Use it for backgrounds, soft section breaks, or gentle table shading and keep dark typography on top.
Can I use off-white for text or backgrounds?
Off-White works better with dark text than white text. Black text reaches 19.95:1 contrast on the swatch, which makes the color more usable as a background or highlight surface than as a dark panel.
More neutral colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Neutral colors
Compare off-white with other neutral tones.
Blue colors
Explore nearby color families to build stronger palettes and contrasts.
Brown colors
Explore nearby color families to build stronger palettes and contrasts.
Green colors
Explore nearby color families to build stronger palettes and contrasts.
Last updated April 6, 2026
Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.