Off white carries the hex code #FAF9F6, which resolves to rgb(250, 249, 246) and hsl(45, 29%, 97%). The three channels sit within four points of each other, which makes it a near-neutral with just enough warmth to read as cream rather than as white.
At 97% lightness it reaches 1.05:1 against pure white, a difference the eye barely registers, and 19.95:1 against black, which clears AAA with room to spare. You’ll get every code format, the palettes that work when a color has almost no hue, and the four elements where off white outperforms the pure white most interfaces default to.
What Is the Color Off White?
Off white sits at 97% lightness on a very faintly warm axis. No CSS keyword maps to #FAF9F6, and the term describes a family of near-whites rather than one specified value.
The full code set for #FAF9F6:
- HEX: #FAF9F6
- RGB: rgb(250, 249, 246)
- RGBA: rgba(250, 249, 246, 1)
- HSL: hsl(45, 29%, 97%)
- HSB: 45, 2, 98
- CMYK: 0, 0, 2, 2
The hue reading of 45° is technically real and practically meaningless. With a four-point spread between the highest and lowest channel, the color behaves as a neutral, which is why rotating the color wheel around it returns values indistinguishable from the base.
HSB gives the honest reading. Saturation at 2% tells you there’s almost no color here, while HSL’s 29% is an artifact of measuring saturation at extreme lightness.
Warm and cool off whites are the real distinction. #FAF9F6 leans warm because red and green run ahead of blue, while a cool off white like #F8F9FA reverses that, and mixing the two families in one interface reads as a mistake.
Why Use Off White Instead of Pure White?
Pure white is the brightest value a display can produce, and that’s the problem. On a bright monitor #FFFFFF at full screen output causes measurable eye strain during long reading sessions, and off white cuts that output by a few percent without any perceptible loss of brightness.
Three practical reasons drive the choice:
- Reduced glare: a small luminance reduction that adds up over hours of reading
- Perceived warmth: off white reads as paper while pure white reads as screen
- Layering headroom: a white card on an off white canvas separates without a border
That third point is the one that matters most in product work. If your page background is #FFFFFF, a white card has nowhere to sit, so you need a shadow or a stroke to define it.
Off white gives you that separation for free. At 1.05:1 the difference is subtle enough to feel like depth rather than like a color change, which is exactly the register a layered interface wants.
The trade is that off white can look dirty next to true white. Ship one or the other consistently, because a stray #FFFFFF panel on an off white page looks like a rendering bug.
How Does Off White Appear on Digital Screens?
Off white renders as almost-white everywhere, and its behavior depends entirely on what sits next to it. The measured values are lopsided in a way that shapes every decision:
- #FAF9F6 on white: 1.05:1, no perceptible boundary
- #FAF9F6 on black: 19.95:1, passes AAA
- Black text on #FAF9F6: 19.95:1, passes AAA
- Dark variant #BCBBB8 on white: 1.92:1, fails
- #7D7C7B on #FAF9F6: 4.9:1, passes AA
Off white as dark-mode text is its most underrated use. At 19.95:1 on black it holds essentially all of pure white’s contrast while removing the halation that #FFFFFF produces around letterforms.
Display calibration is the main risk. A cool-calibrated monitor renders #FAF9F6 as plain white and a warm one exaggerates the cream, so the warmth you designed may not be the warmth users see.
Ambient light does the rest. Under daylight the warm cast reads as intentional, and under fluorescent office lighting it can read as a yellowed screen.
Test against pure white side by side. If your off white isn’t visibly distinct from #FFFFFF on a mid-range monitor, it isn’t doing the job you chose it for.
What Are the Shades of Off White?
Shades come from mixing black into #FAF9F6, and the ramp drops fast because there’s so much lightness to lose:
- #DBDAD7
- #BCBBB8
- #9C9C9A
- #7D7C7B
- #5E5D5C
- #3E3E3E
- #1F1F1F
Notice how quickly the warmth drains. By #3E3E3E the channels have converged and the color is a plain dark gray, because reducing lightness on a near-neutral removes the small hue signal before it removes the lightness.
Two steps carry the work. #7D7C7B at 4.9:1 on an off white surface is the first that passes AA for secondary text, and #1F1F1F is where your primary text lives.
Tints barely exist. The computed ramp runs from #FAF9F6 to #F1EEE5 across nine steps, and the entire range is visually one color, which means off white has almost nowhere to go but down.
Named neighbors sit within a few points and all fail against white:
- Snow (#FFFAFA): the nearest, cool-leaning, 1.03:1 on white
- Floral white (#FFFAF0): warmer, 1.04:1
- Ivory (#FFFFF0): yellow-leaning, 1.01:1
- Seashell (#FFF5EE): pink-leaning, 1.07:1
- Linen (#FAF0E6): the warmest, 1.12:1
What UI Elements Work Best with Off White?
Off white belongs on the largest surfaces in an interface, which is the opposite of every other color in this cluster. Nothing about it draws attention, and that’s precisely its value.
At 1.05:1 against white it can’t be a foreground, a border, or an icon on a light background. Four element types are where off white genuinely performs.
Page Backgrounds and Canvases
Canvases are off white’s primary job. A #FAF9F6 page background with near-black text holds 19.95:1 and cuts the glare that a pure white page produces over long reading sessions.
Documentation, editorial, and reading-heavy products benefit most. The effect is small per minute and substantial per hour, which is why so many long-form publishers moved off pure white.
Keep the whole surface consistent. Mixing off white and pure white regions on one page reads as a defect rather than as a design decision.
Card and Sheet Surfaces
Layering is where off white pays for itself. A white card on an off white canvas separates cleanly at 1.05:1, giving you depth without a shadow, a border, or an elevation token.
Reverse the usual contrast instinct. You want the separation barely perceptible, because a strong boundary between page and card makes the layout feel chopped up.
Modals and sheets work the same way. A pure white sheet over an off white page reads as raised without any additional treatment.
Text on Dark Surfaces
Dark mode is where off white does its most valuable work. Setting body copy in #FAF9F6 rather than #FFFFFF holds 19.95:1 on black while removing the bloom that pure white produces around letterforms for readers with astigmatism.
That single substitution improves dark-mode readability more than most typography changes. Nothing else in the stack has to move.
Secondary text steps down to #BCBBB8. At 10.6:1 on black it stays comfortably above AAA while giving you a clear hierarchy level.
Form Fields and Input Surfaces
Forms use the off white and white pairing to mark what’s editable. An off white page with white input fields tells the user where to type without a single label or instruction.
Borders still need real contrast. The field outline has to clear 3:1 to satisfy the non-text requirement, so use #9C9C9A or darker rather than a light neutral.
Focus states need a saturated color. Off white can’t carry a focus ring, so pair it with an accent that clears 3:1 against both the field and the page.
What Are the Best Off White Color Palettes for UI?
Off white has almost no saturation, so rotating the color wheel around it returns values within a few points of the base and the five classic schemes collapse. The working method is to anchor off white as the neutral and derive the harmony from an accent hue.
Every palette below uses deep rust #7C2D12 as that accent, chosen because it holds 8.9:1 against off white and shares its warm cast rather than fighting it.
Monochromatic
Monochromatic is the one scheme off white computes natively, running on lightness alone: #FAF9F6, #F1EEE5, #DBDAD7, #7D7C7B, and #1F1F1F. This is the complete neutral system most content-first interfaces need.
The five values map to canvas, surface, border, muted text, and primary text in order. No hue decisions required.
Analogous
Analogous pulls the accent’s neighbors 30° in each direction, anchored on off white. Three warm earth tones that stay distinguishable because the neutral sits between them.
Off white does the separating. Deep warm tones that would muddy against each other hold their edges when a near-white divides them.
Complementary
The complementary scheme pairs rust with its opposite, over an off white base. Warm against cool with the neutral keeping them from clashing directly.
Rust’s complement lands in the teal family, which reads well as an accent and needs darkening before it carries text on a light surface.
Triadic
Triadic gives you three evenly spaced hues on the off white anchor. Useful for categorical charts where each series needs identity against a warm neutral background.
Test each series against your actual canvas rather than white. Off white raises the floor slightly for every series, and a palette tuned on #FFFFFF can lose a member on #FAF9F6.
Split-Complementary
Split-complementary softens the direct opposition and adds a third value for secondary actions. This is the most flexible of the five for a full product interface.
Anchor everything with #1F1F1F text. Visily’s theme tools can generate the tint and shade ladder for each accent so hover and active states come out accessible rather than hand-mixed.
Which Colors Are Similar to Off White?
Five named near-whites sit close enough to #FAF9F6 to substitute for it, and the difference between them is entirely about which channel leads:
- Snow (#FFFAFA): the nearest, faintly cool and pink
- Floral white (#FFFAF0): warm and yellow-leaning
- Ivory (#FFFFF0): the most yellow of the group
- Seashell (#FFF5EE): warm and pink-leaning
- Linen (#FAF0E6): the warmest and most saturated
None of them differ from each other by more than about 1.1:1, so the choice is aesthetic rather than functional. What matters is picking one family and holding to it.
Alice blue (#F0F8FF) is the cool counterpart worth knowing. It sits at the same lightness with a blue lean, and putting it beside #FAF9F6 makes both look wrong, which is the clearest demonstration of the warm-cool rule from the section above.
Which Colors Pair Best with Off White?
Near-black is the essential partner. At 19.95:1 against #1F1F1F, off white gives you the highest-contrast reading surface available short of pure white, without the glare.
Warm accents belong with it. Rust, terracotta, deep amber, and warm browns share off white’s cast and read as one family, which is why editorial and craft brands pair them so often.
Deep green is the strongest jewel-tone option. A forest green at high contrast against off white produces the natural, considered register that a cool gray palette can’t reach.
Pure white is a partner, not a competitor. Using #FFFFFF for cards and #FAF9F6 for the canvas is the layering technique described above, and it’s the single most useful thing off white does.
Apply the 60-30-10 split:
- 60% off white: page canvases and large surfaces
- 30% near-black and white: text, cards, and structural elements
- 10% warm accent: buttons, links, and interactive elements
Off white holds the 60% slot better than any other color, because it never asks for attention. That’s the entire argument for it.
Which Colors Should You Avoid Pairing with Off White?
Pure white as an adjacent surface at the same elevation is the main failure. At 1.05:1 there’s no perceptible boundary, so two panels sitting side by side read as one continuous region.
Cool near-whites are the specific trap. Alice blue and other blue-leaning whites at matched lightness make off white look yellowed and dirty, and the effect is obvious even though neither color is wrong alone.
Other warm near-whites cause a subtler version of the same problem. Ivory and linen sit within 1.1:1 of the base, so stacking them and expecting a visible step produces nothing.
Pale pastels lose their identity against it. A pastel at 90% lightness on a 97% canvas has almost no separation, so the pastel reads as a smudge rather than as a surface.
Does Off White Meet Accessibility Standards?
Off white fails as a foreground on white and passes as a background at the highest level. The 1.05:1 measurement against white falls far below the 3:1 non-text floor set by the W3C, while dark text on it clears AAA.
Where off white lands across the common pairings:
- #FAF9F6 on white: 1.05:1, fails AA and the 3:1 non-text floor
- Black on #FAF9F6: 19.95:1, passes AAA
- #FAF9F6 on black: 19.95:1, passes AAA
- #7D7C7B on #FAF9F6: 4.9:1, passes AA
- #9C9C9A on #FAF9F6: 3.2:1, non-text and large text only
Off white is the easiest color in this cluster to use accessibly, because its only real job is hosting dark content and it does that at AAA. The failures only appear when someone tries to make it a foreground.
Color vision deficiency doesn’t affect it. With effectively no chroma, off white renders identically under protanopia, deuteranopia, and tritanopia.
Contrast sensitivity is the consideration that actually favors it. Readers with low vision and astigmatism often find an off white canvas easier than pure white, so the choice helps the group most affected by glare.
How Can You Convert Off White Between HEX, RGB, HSL, CMYK, and Other Color Formats?
Off white converts predictably across formats, with one caveat worth knowing:
- HEX #FAF9F6: the default in design files and CSS
- RGB rgb(250, 249, 246): the three channels in decimal, four points apart
- RGBA rgba(250, 249, 246, 1): adds alpha for overlays and scrims
- HSL hsl(45, 29%, 97%): hue and saturation are both unreliable at this lightness
- HSB 45, 2, 98: the honest saturation reading
- CMYK 0, 0, 2, 2: almost no ink at all
The HSL saturation figure is the caveat. At 97% lightness the HSL model reports 29% saturation for a color with a four-point channel spread, and copying that number into another tool produces a visibly yellow result.
Use HSB or the raw RGB values when precision matters. The channel spread is the truest description of a near-neutral, and it tells you immediately whether the color is warm or cool.
CMYK effectively means “leave the paper alone.” At 0, 0, 2, 2 nothing meaningful prints, so an off white in a print job comes from the stock rather than the ink, which is why paper choice matters more than the color value.
Wrapping Up
Off white is the color you use for everything that shouldn’t be noticed. Set your page canvas to #FAF9F6 with #1F1F1F text for a 19.95:1 reading surface without the glare, float pure white cards on top for elevation without shadows, switch to #7D7C7B for secondary copy, and substitute #FAF9F6 for pure white in dark mode to cut halation at no cost in contrast.
Stop hand-checking each of those steps. Open Visily and use its AI-powered design tools to generate your neutral ramp, layered surface tokens, and matched warm accents across the entire design in one pass.
