Skip to content
ColorPlum

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

Alice blue color: hex code #F0F8FF, RGB and palettes

Alice blue is #F0F8FF (RGB 240, 248, 255), the CSS color aliceblue: an almost-white with a cool blue cast. Use dark text on it; black reaches 19.57:1, but the color itself is 1.07:1 on white.

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

Updated

ColorPlum swatchAlice bluevery pale, grayish blue
HEX
#F0F8FF
RGB
rgb(240, 248, 255)
HSL
hsl(208, 100%, 97%)

Best text on it: black at 19.57:1

Copy codes as
Build a paletteMake a gradientCheck contrastWallpaper

Every code for Alice blue

  • HEX#F0F8FF
  • RGBrgb(240, 248, 255)
  • HSLhsl(208, 100%, 97%)
  • HSV208°, 6%, 100%
  • CMYK6%, 3%, 0%, 0%
  • Lablab(97.1% -1.8 -4.3)
  • OKLCHoklch(97.5% 0.013 244.3)
  • Decimal15792383

Tints, shades and tones

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

  1. 90%#FEFEFF
  2. 80%#FCFEFF
  3. 70%#FBFDFF
  4. 60%#F9FCFF
  5. 50%#F8FCFF
  6. 40%#F6FBFF
  7. 30%#F5FAFF
  8. 20%#F3F9FF
  9. 10%#F2F9FF
  10. Base#F0F8FF
  11. 10%#D8DFE6
  12. 20%#C0C6CC
  13. 30%#A8AEB3
  14. 40%#909599
  15. 50%#787C80
  16. 60%#606366
  17. 70%#484A4D
  18. 80%#303233
  19. 90%#18191A

Tones (mixed with gray)

  1. 10%#E5ECF2
  2. 20%#DAE0E6
  3. 30%#CED4D9
  4. 40%#C3C8CC
  5. 50%#B8BCC0
  6. 60%#ADB0B3
  7. 70%#A2A4A6
  8. 80%#969899
  9. 90%#8B8C8D

Matching colors

Complementary
Analogous
Triadic
Split complementary
Tetradic (square)
Monochromatic
  • #57B1FF
  • #A4D4FF
  • #EBF5FF
  • #EBF5FF
  • #EBF5FF

Alice blue 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.

Alice blue with its complement, its triad and its tint and shade
  • Alice blue
  • Triad #FFF0F8
  • Triad #F8FFF0
  • Complement
  • 50% tint
  • 50% shade

Alice blue in use

New collectionAutumn edit

Card body text stays dark for reading; alice blue carries the header and the button.

Shop nowTag

Headline in Alice blue

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#F0F8FF
  • Protanopia (no red cones)#F5F8FF
  • Deuteranopia (no green cones)#F3F6FF
  • Tritanopia (no blue cones)#EDFAFA

Contrast and readability

PairingRatioWCAG 2.2
as text on white1.07:1AA AA large AAA
as text on black19.57:1AA AA large AAA
white text on it1.07:1AA AA large AAA
black text on it19.57:1AA AA large AAA
on your background1.06:1AA AA large AAA

Export

:root {
  --alice-blue: #f0f8ff;
  --alice-blue-rgb: 240 248 255;
  --alice-blue-on: #000000;
}
On this page

Alice blue is a CSS named color, written aliceblue, and its value is #F0F8FF. The name is usually linked to Alice Roosevelt, daughter of a US president, and a shade of blue associated with her. On a screen today it is simply the lightest of the cool tints: you may not notice it as blue until you put it beside pure white.

Understanding the code

The RGB values are 240, 248, 255, so each channel is within 15 steps of the maximum, with blue highest and red lowest. HSL says hue 208°, 100% saturation, 97% lightness. That saturation figure looks big, but at that lightness it only produces a very faint tint. CMYK is 6%, 3%, 0%, 0%, and the decimal value is 15792383.

Alice blue sits in a crowded corner of the CSS list. ghostwhite (#F8F8FF) is just 1.0 away in OKLab, whitesmoke is 1.4 and azure (#F0FFFF) is 1.8. In practice those four are difficult to tell apart without a side-by-side comparison, which is a good reason to choose one and use it consistently. Among the survey's names the closest are "pale grey" and "very light pink", plus plain white at 2.8, so the survey has no distinct name for it.

Contrast notes

Think of it as a background that is a shade off white.

  • Text on alice blue: nearly any dark color works. A navy such as #1A2B4C measures 13.10:1, and a mid blue like #0B5CAD still gives 6.21:1. A charcoal gray, #484A4D, gives 8.28:1.
  • Lighter gray text: #606366 reaches 5.63:1, near the lower end of what is comfortable for long reading.
  • As text: on white it is 1.07:1, which is invisible. White on alice blue is likewise 1.07:1, so a white card on an alice blue page needs a border or shadow to separate.
  • Its opposite: the complement is a pale cream, #FFF7F0.

Tints are almost indistinguishable, running from #F2F9FF to #FEFEFF. Shades go from #D8DFE6 to #18191A, and the 20% shade (#C0C6CC) works as a quiet border.

Worked example

Suppose you are building a settings dashboard for a small app. The page background is alice blue, cards are white, and the text is navy #1A2B4C at 13.10:1. Because white on alice blue is only 1.07:1, you give each card a one-pixel border in the 20% shade, #C0C6CC, so the edges appear. Secondary labels use #606366, which reaches 5.63:1 on the page. This keeps the interface light and calm while meeting the AA level everywhere, and it avoids the harsh look of black type on pure white.

For nearby pale tones see ghost white and ice blue. For a more purple version, look at lavender. You can test your own text and background in the contrast checker.

Sources

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