Skip to content
ColorPlum

Palettes · color combination

Light blue and white color palettes: hex codes for coastal and clean UI

Four light blue and white palettes with hex codes, from coastal light blue (#A7D3F2) and ocean (#4A90C2) to nursery, a clean interface scale and porcelain. Ratios for readable pairs are listed, with copy and PNG export.

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

Updated

Coastal

  1. #A7D3F2Light blue
  2. #FFFFFFWhite
  3. #E8F4FBSea foam white
  4. #4A90C2Ocean
  5. #D8C8A8Sand
  • #A7D3F2Light blue
  • #FFFFFFWhite
  • #E8F4FBSea foam white
  • #4A90C2Ocean
  • #D8C8A8Sand

Preview

Coastal

Body text in black on white, with ocean as the accent.

Button

No two colors here reach 4.5:1, so use it for decoration and set text in black or white.

Nursery

  1. #C6E2F5Baby blue
  2. #FDFDFDWhite
  3. #F4E9D8Cream
  4. #9EC5E8Sky
  5. #B9CFB4Sage
  • #C6E2F5Baby blue
  • #FDFDFDWhite
  • #F4E9D8Cream
  • #9EC5E8Sky
  • #B9CFB4Sage

Preview

Nursery

Body text in black on white, with sky as the accent.

Button

No two colors here reach 4.5:1, so use it for decoration and set text in black or white.

Clean interface

  1. #FFFFFFWhite
  2. #EAF4FFBlue 50
  3. #9CCAF7Blue 200
  4. #1E6FD9Blue 600
  5. #13294BNavy text
  • #FFFFFFWhite
  • #EAF4FFBlue 50
  • #9CCAF7Blue 200
  • #1E6FD9Blue 600
  • #13294BNavy text

Preview

Clean interface

Body text in navy text on white, with blue 600 as the accent.

Button

Readable text pairs (WCAG AA, 4.5:1 or more): Navy text on White 14.51:1; Navy text on Blue 50 13.05:1; Navy text on Blue 200 8.43:1; Blue 600 on White 4.84:1

Porcelain

  1. #F7FBFFPorcelain
  2. #CFE3F6Glaze
  3. #2B5C9ECobalt
  4. #7FA6D1Delft
  5. #E9EEF3Mist
  • #F7FBFFPorcelain
  • #CFE3F6Glaze
  • #2B5C9ECobalt
  • #7FA6D1Delft
  • #E9EEF3Mist

Preview

Porcelain

Body text in cobalt on porcelain, with delft as the accent.

Button

Readable text pairs (WCAG AA, 4.5:1 or more): Cobalt on Porcelain 6.45:1; Cobalt on Mist 5.75:1; Cobalt on Glaze 5.10:1

Every palette here in 3D color space

Lightness runs up the pole and hue goes around it, so palettes that share a mood sit in the same region. Drag to turn it.

The 20 colors on this page in OKLab
  • Light blue
  • White
  • Sea foam white
  • Ocean
  • Sand
  • Baby blue
  • White
  • Cream
  • Sky
  • Sage
  • White
  • Blue 50
  • Blue 200
  • Blue 600
  • Navy text
  • Porcelain
  • Glaze
  • Cobalt
  • Delft
  • Mist
On this page

Light blue and white is the color scheme of clear skies, fresh sheets, hospitals and bank apps. It is calming, but it is also one of the easiest pairs to make unreadable: light blue on white has very little contrast, so the palette has to bring a deeper blue to do the work.

The four palettes

  • Coastal uses light blue (#A7D3F2), white, sea foam white (#E8F4FB), ocean (#4A90C2) and sand (#D8C8A8). It suits a beach rental site.
  • Nursery is the gentlest: baby blue (#C6E2F5), near white, cream, sky (#9EC5E8) and sage (#B9CFB4).
  • Clean interface is a working scale: white, blue 50 (#EAF4FF), blue 200 (#9CCAF7), blue 600 (#1E6FD9) and navy text (#13294B).
  • Porcelain is inspired by blue-and-white ceramics, with porcelain (#F7FBFF), glaze, cobalt (#2B5C9E), delft (#7FA6D1) and mist.

What passes

Coastal and nursery list no readable pairs. Light blue, sky and ocean are mid or pale, so none of them separate enough from white to carry sentences. The clean interface set is the opposite, because it contains a navy: navy text on white is 14.51:1, on blue 50 13.05:1 and on blue 200 8.43:1. Blue 600 on white is 4.84:1, so it clears the line for button labels and links. Porcelain gives cobalt on porcelain at 6.45:1, on mist 5.75:1 and on glaze 5.10:1.

The lesson is that a "light blue and white" design usually needs one deeper blue for text, even if the rest of the layout stays pale.

Keeping pale designs lively

When a layout is mostly pale, shape and spacing do the work that color usually does. Leave generous white space, round the corners of cards, and let one deeper blue appear in only a few places, such as a link, an icon or a button. Cream and sand, as in the coastal and nursery sets, warm up the blue and stop the page from feeling clinical, which is helpful for a baby shower invitation or a vacation rental listing.

Worked example

You are designing the settings page of a small web app. Use the clean interface set. Page background white, section cards in blue 50, body text in navy text. The primary "Save changes" button is blue 600 with white text; since the pair is 4.84:1, the label passes, but only just, so make it 16px and medium weight instead of thin. Secondary buttons can be blue 200 with navy text at 8.43:1. For hover states, use the shade and tint generator on blue 600 to get a slightly darker step. Press Copy CSS to hand over all five colors as variables.

Browse the ice blue and alice blue pages for single colors, the spring palettes for soft pastels, and the blue and silver palettes.

Sources

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