Skip to content
ColorPlum

Colors · value from the CSS Color Module Level 4 (W3C)

Ghost white color: hex code #F8F8FF, RGB and shades

Ghost white is #F8F8FF (RGB 248, 248, 255), a CSS named color: an almost-white with a faint cool blue tint. Use dark text on it; black reaches 19.86:1, while white on it is only 1.05:1.

By Paul Gunder. Every value is computed from published standards; see how ColorPlum works.

Updated

ColorPlum swatchGhost whitevery pale white
HEX
#F8F8FF
RGB
rgb(248, 248, 255)
HSL
hsl(240, 100%, 99%)

Best text on it: black at 19.86:1

Copy codes as
Build a paletteMake a gradientCheck contrastWallpaper

Every code for Ghost white

  • HEX#F8F8FF
  • RGBrgb(248, 248, 255)
  • HSLhsl(240, 100%, 99%)
  • HSV240°, 3%, 100%
  • CMYK3%, 3%, 0%, 0%
  • Lablab(97.7% 0.9 -3.4)
  • OKLCHoklch(98.1% 0.009 286.2)
  • Decimal16316671

Tints, shades and tones

From white to black in 10% steps, with Ghost white in the middle. Tap a code to copy it.

  1. 90%#FEFEFF
  2. 80%#FEFEFF
  3. 70%#FDFDFF
  4. 60%#FCFCFF
  5. 50%#FCFCFF
  6. 40%#FBFBFF
  7. 30%#FAFAFF
  8. 20%#F9F9FF
  9. 10%#F9F9FF
  10. Base#F8F8FF
  11. 10%#DFDFE6
  12. 20%#C6C6CC
  13. 30%#AEAEB3
  14. 40%#959599
  15. 50%#7C7C80
  16. 60%#636366
  17. 70%#4A4A4D
  18. 80%#323233
  19. 90%#19191A

Tones (mixed with gray)

  1. 10%#ECECF2
  2. 20%#E0E0E6
  3. 30%#D4D4D9
  4. 40%#C8C8CC
  5. 50%#BCBCC0
  6. 60%#B0B0B3
  7. 70%#A4A4A6
  8. 80%#989899
  9. 90%#8C8C8D

Matching colors

Complementary
Analogous
Triadic
Split complementary
Tetradic (square)
Monochromatic
  • #5F5FFF
  • #ACACFF
  • #EBEBFF
  • #EBEBFF
  • #EBEBFF

Ghost white in 3D color space

OKLab, the space ColorPlum does its math in: lightness runs up the pole, hue goes around it and saturation grows outward. The faint shell is every color a screen can show (saturation is drawn wider than lightness so hues separate). Drag to turn it.

Ghost white with its complement, its triad and its tint and shade
  • Ghost white
  • Triad #FFF8F8
  • Triad #F8FFF8
  • Complement
  • 50% tint
  • 50% shade

Ghost white in use

New collectionAutumn edit

Card body text stays dark for reading; ghost white carries the header and the button.

Shop nowTag

Headline in Ghost white

A paragraph with a link in dark text, because this color is too light for text on white; use it for fills instead.

How it looks with color-vision deficiency

A simulation (Machado and colleagues, 2009) of how the color and its complement read without one type of cone.

  • Typical color vision#F8F8FF
  • Protanopia (no red cones)#F7F9FF
  • Deuteranopia (no green cones)#F6F8FF
  • Tritanopia (no blue cones)#F7F9FA

Contrast and readability

PairingRatioWCAG 2.2
as text on white1.05:1AA AA large AAA
as text on black19.86:1AA AA large AAA
white text on it1.05:1AA AA large AAA
black text on it19.86:1AA AA large AAA
on your background1.08:1AA AA large AAA

Export

:root {
  --ghost-white: #f8f8ff;
  --ghost-white-rgb: 248 248 255;
  --ghost-white-on: #000000;
}
On this page

Ghost white is one of the 148 named colors in the CSS color list, and its value is #F8F8FF. It is not pure white. The blue channel sits at the maximum while red and green stop just short of it, so the page has a barely visible cool cast. Put it next to #FFFFFF and you can see the difference; on its own, most people read it simply as "white".

What the codes mean

In RGB, ghost white is 248, 248, 255. In HSL it is hue 240°, 100% saturation and 99% lightness, which tells you the same story: a blue hue, but so close to the top of the lightness scale that almost no color is left. The CMYK estimate is 3%, 3%, 0%, 0%, a tiny trace of cyan and magenta that a printer would mostly round to bare paper.

Several named colors crowd around it. aliceblue (#F0F8FF) is only 1.0 away in OKLab distance, and snow (#FFFAFA) and whitesmoke (#F5F5F5) are 1.3 and 1.4 away. Those gaps are small enough that on many screens you would struggle to tell them apart without a reference swatch. If a design needs a visibly cool off-white, Alice blue is the next step along; for a warmer one, look at beige.

Using ghost white well

  • Text on it: black on ghost white measures 19.86:1, and dark gray works almost as well. White text on it fails badly at 1.05:1, so it is a background color, not a text color.
  • As a page background: it softens the glare of a pure white page while staying clean. Cards in true white can sit on top of it and still read as slightly lifted.
  • Borders and dividers: the 40% shade, #959599, and the 70% shade, #4A4A4D, give you neutral lines that keep the faint blue undertone.
  • Pairings: its complementary color is #FFFFF8, a near-white with a yellow cast, so strong pairings come from the colors you put on top of it: navy, charcoal, or a single saturated accent.

Worked example

Say you are laying out a documentation site and want the main reading area to feel calmer than stark white. Use #F8F8FF for the page and #FFFFFF for code panels. Body text in #333333 on the ghost white background measures 11.95:1, comfortably above the 7:1 AAA level. For secondary text such as timestamps, the 70% shade #4A4A4D gives 8.35:1, while a lighter gray like #6D6D70 gets 4.87:1, which clears the 4.5:1 AA minimum with little to spare. Enter each of those in the "Try a background" box above to confirm before you commit. The white panels will sit at only 1.05:1 against the page, so give them a thin border rather than relying on the color gap.

Ghost white versus white

The difference is small but real, and it shows most on large areas. Because the lift is so slight, ghost white rarely needs its own text rules: anything that works on white works on it. What changes is mood. A pure white page feels clinical, while this one feels a touch cooler and quieter. For a layered interface, see how to build a ladder of nearby lights with the shade and tint generator.

Sources

  1. W3C, CSS Color Module Level 4: named colors and color conversions (checked 2026-11-10) w3.org
  2. W3C, Web Content Accessibility Guidelines (WCAG) 2.2: contrast minimum (checked 2026-11-10) w3.org