Pastel Blue#A8C8E5
Lavender Mist#D3D9F1
Slate Blue#9EB1CB
Muted Periwinkle#B0B8D3
Soft Gray Blue#C7CBDD
Palette direction

Celestial Pastel Creative Color Palette

This palette captures the soft pastel blues and subtle grays of a dreamy, celestial theme with gentle contrasts to create a harmonious and calming brand identity. The main colors evoke a sense of tranquility and whimsy, while the support colors add depth and balance without overwhelming the gentle mood. The neutrals provide clean, readable foundations that complement the airy palette.

MonochromaticCreativepastelbluecelestialdreamy
palette-preview.example
Creative color direction

Celestial Pastel Creative Color Palette

This palette captures the soft pastel blues and subtle grays of a dreamy, celestial theme with gentle contrasts to create a harmonious and calming brand identity. The main colors evoke a sense of tranquility and whimsy, while the support colors add depth and balance without overwhelming the gentle mood. The neutrals provide clean, readable foundations that complement the airy palette.

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Charcoal #3A3C4Eon Lavender Mist #D3D9F17.7:1 Excellent
Logo Charcoal #3A3C4Eon Pastel Blue #A8C8E56.2:1 Strong
Logo Charcoal #3A3C4Eon Slate Blue #9EB1CB5.0:1 Strong
Logo Charcoal #3A3C4Eon Ivory White #FFFFFF10.8:1 Excellent
Icon color
BackgroundPastel Blue#A8C8E5TextCharcoal#3A3C4E
Primary Button6.23:1
AA

Best for the main action users should notice first.

BackgroundLavender Mist#D3D9F1TextCharcoal#3A3C4E
Secondary Button7.73:1
AAA

Useful for softer choices and secondary paths.

BackgroundIvory White#FFFFFFTextLavender Mist#D3D9F1
Outlined Button1.40:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundIvory White#FFFFFFTextPastel Blue#A8C8E5
Text Button1.74:1
Low

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsMonochromatic color relationship
9:41Celestial Pastel Creative Color Palette Color role balance
Monochromatic system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CCelestial Pastel Creative Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors harmonize soft pastel blues with delicate lavender undertones to create a light, airy, and harmonious system representative of a celestial and dreamy vibe.

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Pastel Blue #A8C8E5
HeadlineUsed for main titles and key messages.Pastel Blue #A8C8E5
LinkUsed for links and interactive text.Pastel Blue #A8C8E5

Buttons

Primary Button
BackgroundPastel Blue #A8C8E5
TextCharcoal #3A3C4E
Secondary Button
BackgroundLavender Mist #D3D9F1
TextCharcoal #3A3C4E
Outlined Button
BackgroundLavender Mist #D3D9F1
TextLavender Mist #D3D9F1

Interface

TextDefault readable body text.Charcoal #3A3C4E
Bg LightLight page or section background.Ivory White #FFFFFF
Bg DarkDark page or section background.Quartz Gray #F1F2F6
IconSmall interface icons and marks.Muted Periwinkle #B0B8D3
BorderCards, inputs, and component borders.Muted Periwinkle #B0B8D3
DividerSubtle separators between content.Muted Periwinkle #B0B8D3
OutlineFocus rings and emphasis outlines.Muted Periwinkle #B0B8D3

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

The main colors harmonize soft pastel blues with delicate lavender undertones to create a light, airy, and harmonious system representative of a celestial and dreamy vibe.

PrimaryPastel Blue

RolesLogo, Link, Btn Primary Bg, Headline

Pastel Blue conveys tranquility and openness, forming the calming heart of the palette.

HEX#A8C8E5
RGB168, 200, 229
HSL209, 54, 78
CMYK27, 13, 0, 10
SecondaryLavender Mist

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Lavender Mist adds a gentle, whimsical touch that complements the primary blue for secondary functions.

HEX#D3D9F1
RGB211, 217, 241
HSL228, 52, 89
CMYK12, 10, 0, 5
TertiarySlate Blue

Slate Blue grounds the lighter tones by providing a deeper blue with soft maturity, ideal for button text balance.

HEX#9EB1CB
RGB158, 177, 203
HSL215, 30, 71
CMYK22, 13, 0, 20

Support Colors

Support colors extend the main palette with soft grays and muted blues to reinforce the gentle, airy aesthetic while ensuring practical use of icons, borders, and outlines.

Muted Periwinkle

RolesIcon, Border, Divider, Outline

Muted Periwinkle complements the blues by offering a subtle, subdued accent that supports visual structure without distraction.

HEX#B0B8D3
RGB176, 184, 211
HSL226, 28, 76
CMYK17, 13, 0, 17
Soft Gray Blue

Soft Gray Blue balances warmth and coolness, quietly reinforcing the palette’s harmony and usability.

HEX#C7CBDD
RGB199, 203, 221
HSL229, 24, 82
CMYK10, 8, 0, 13

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

Ivory White

RolesBg Light

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Quartz Gray

RolesBg Dark

HEX#F1F2F6
RGB241, 242, 246
HSL228, 22, 95
CMYK2, 2, 0, 4
Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#3A3C4E
RGB58, 60, 78
HSL234, 15, 27
CMYK26, 23, 0, 69

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.

Use when: you need the actual colors.
:root {
  --color-pastel-blue: #A8C8E5;
  --color-lavender-mist: #D3D9F1;
  --color-slate-blue: #9EB1CB;
  --color-muted-periwinkle: #B0B8D3;
  --color-soft-gray-blue: #C7CBDD;
  --color-ivory-white: #FFFFFF;
  --color-quartz-gray: #F1F2F6;
  --color-charcoal: #3A3C4E;
}

Role tokens

Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.

Use when: you need UI roles, not just swatches.
:root {
  --role-logo: #A8C8E5;
  --role-link: #A8C8E5;
  --role-btn-primary-bg: #A8C8E5;
  --role-headline: #A8C8E5;
  --role-btn-secondary-bg: #D3D9F1;
  --role-btn-outlined-border: #D3D9F1;
  --role-btn-outlined-text: #D3D9F1;
  --role-icon: #B0B8D3;
  --role-border: #B0B8D3;
  --role-divider: #B0B8D3;
  --role-outline: #B0B8D3;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #F1F2F6;
  --role-text: #3A3C4E;
  --role-btn-primary-text: #3A3C4E;
  --role-btn-secondary-text: #3A3C4E;
}

JSON

Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.

Use when: a developer or app needs data.
{
    "pastel-blue": "#A8C8E5",
    "lavender-mist": "#D3D9F1",
    "slate-blue": "#9EB1CB",
    "muted-periwinkle": "#B0B8D3",
    "soft-gray-blue": "#C7CBDD",
    "ivory-white": "#FFFFFF",
    "quartz-gray": "#F1F2F6",
    "charcoal": "#3A3C4E"
}
Press Space to load new palette