Palette

Cerulean Dream

Soothing blues, from soft sky to deep cerulean, create an ethereal and tranquil vision of endless skies.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cerulean Dream reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Cerulean Dream.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#6A5ACD#4169E1#1E90FF#87CEEB#B0C4DE

Palette guide

How to use Cerulean Dream

Overview

The "Cerulean Dream" palette offers soothing blues, from soft sky to deep cerulean, creating an ethereal and tranquil vision of endless skies. It features the rich #6A5ACD and the vibrant #4169E1, transitioning through the bold #1E90FF. The palette lightens to the airy #87CEEB, culminating in the soft #B0C4DE, reminiscent of clouds on the horizon. This collection is ideal for designers seeking to evoke serenity, dreamlike qualities, or peaceful natural themes. Developers can apply these hues to create inviting user interfaces for meditation apps, cloud services, or spiritual brands, ensuring a smooth and captivating visual experience that promotes calm and clarity.

Best used for

Meditation and wellness apps
Cloud computing services branding
Spiritual or mindfulness websites
Dream-themed art projects
Airy fashion editorials
Calm corporate presentations

Suggested color roles

primary

#4169E1 - A strong royal blue, ideal for main headings, navigation bars, or key interactive elements, conveying trust.

secondary

#1E90FF - A bright dodger blue, excellent for subheadings, active states, or graphical elements that need to pop.

accent

#87CEEB - A bright sky blue, perfect for subtle highlights, call-to-action buttons, or delicate decorative accents.

background

#B0C4DE - A soft blue-gray, serving as a clean, airy, and expansive canvas for content.

text

#6A5ACD - A rich slate blue, providing excellent contrast and readability for text on lighter backgrounds like #B0C4DE.

Accessibility notes

Ensure #6A5ACD text on #B0C4DE background meets WCAG contrast standards for optimal readability.
Avoid using #87CEEB or #B0C4DE for small text against similarly light backgrounds due to low contrast.
The darkest colors, #6A5ACD and #4169E1, provide good contrast for white or very light text.
For body text, prefer #6A5ACD against the lightest colors for optimal readability.

Recommended combinations

Sky Gradient

Creates a seamless deep-to-bright blue gradient, ideal for large backgrounds or hero sections.

#6A5ACD · #4169E1 · #1E90FF

Dreamy Horizon

Excellent for soft, airy designs, using the royal blue for accents or important information.

#87CEEB · #B0C4DE · #4169E1

Ethereal Contrast

Ideal for layered UI elements, where a vibrant blue is softened by a blue-gray background.

#1E90FF · #B0C4DE · #6A5ACD

CSS variables

:root {
  --cerulean-dream-1: #6A5ACD;
  --cerulean-dream-2: #4169E1;
  --cerulean-dream-3: #1E90FF;
  --cerulean-dream-4: #87CEEB;
  --cerulean-dream-5: #B0C4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cerulean-dream": {
        1: "#6A5ACD",
        2: "#4169E1",
        3: "#1E90FF",
        4: "#87CEEB",
        5: "#B0C4DE",
      }
    }
  }
}

Hex values

Color 1#6A5ACD

Color 2#4169E1

Color 3#1E90FF

Color 4#87CEEB

Color 5#B0C4DE

Accessibility

Contrast checker

1.1:1Fail

1.6:1Fail

3:1AA18

3:1Fail

1.1:1Fail

1.5:1Fail

2.8:1Fail

2.7:1Fail

1.6:1Fail

1.5:1Fail

1.9:1Fail

1.8:1Fail

3:1AA18

2.8:1Fail

1.9:1Fail

1:1Fail

3:1Fail

2.7:1Fail

1.8:1Fail

1:1Fail

Similar palettes

More like Cerulean Dream

Celestial Azure Drift

Celestial Glow

Cloudscape Serenity Blue