Back to palettes

Palette

Sugar Sky Horizon

Soft and airy, reflecting the delicate blues and whites of a cloud-dotted, sugary sweet morning sky.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sugar Sky Horizon 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 Sugar Sky Horizon.

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

Data visualization

#F0F8FF#D7EEF8#C0E4F0#A0D7E7#80CADF

Palette guide

How to use Sugar Sky Horizon

Overview

The Sugar Sky Horizon palette captures the delicate and serene blues of a cloud-dotted morning sky, perfect for designs that aim to be calm, soft, and inviting. Ranging from the almost-white #F0F8FF (Alice Blue) to the deeper #80CADF (Light Sky Blue), this palette offers a harmonious gradient of cool tones. The intermediate shades, #D7EEF8 (Light Cyan), #C0E4F0 (Powder Blue), and #A0D7E7 (Sky Blue), provide excellent versatility for creating smooth transitions and subtle depth. This collection is ideal for projects that require a light, airy, and refreshing aesthetic, such as wellness brands, serene digital interfaces, or elegant nature-inspired designs.

Best used for

  • Wellness and spa brand identity
  • Cloud-based software UI/UX design
  • Relaxing bedroom or living space decor
  • Nature-inspired photography backdrops
  • Baby product branding and packaging
  • Serene website backgrounds and illustrations

Suggested color roles

primary

Utilize #80CADF as a calming primary for navigation or key brand elements, providing a stable yet gentle foundation.

secondary

Employ #A0D7E7 for subheadings, larger graphic elements, or sections that need a slightly richer blue without being overpowering.

accent

Apply #C0E4F0 or #D7EEF8 sparingly for interactive elements, hover states, or subtle decorative details to add a soft, airy touch.

background

Designate #F0F8FF or #D7EEF8 for clean, expansive backgrounds, offering a light canvas that ensures excellent readability for darker text.

text

For optimal readability on these light backgrounds, a deep charcoal or navy blue (#000080) is highly recommended. Avoid pure black for a softer aesthetic.

Accessibility notes

  • Ensure high contrast for text on #F0F8FF or #D7EEF8; dark text is essential for legibility.
  • Avoid using light-colored text on #C0E4F0 or #A0D7E7; always check contrast ratios.
  • When using #80CADF for backgrounds, white text (#FFFFFF) will provide good contrast, but dark blue also works well.
  • Be mindful of subtle differences between adjacent light blues, especially for users with color vision deficiencies.

Recommended combinations

Sky Gradient

Creates a seamless, ethereal background for websites or large graphic elements, evoking openness and calm.

#F0F8FF · #D7EEF8 · #C0E4F0

Horizon Depth

Ideal for layered designs or to add depth to UI elements, transitioning from mid-tone to deeper blues.

#A0D7E7 · #80CADF · #C0E4F0

Cloud Accent

Perfect for subtle accents, icons, or interactive elements that need to stand out gently against a lighter base.

#D7EEF8 · #F0F8FF · #80CADF

CSS variables

:root {
  --sugar-sky-horizon-1: #F0F8FF;
  --sugar-sky-horizon-2: #D7EEF8;
  --sugar-sky-horizon-3: #C0E4F0;
  --sugar-sky-horizon-4: #A0D7E7;
  --sugar-sky-horizon-5: #80CADF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sugar-sky-horizon": {
        1: "#F0F8FF",
        2: "#D7EEF8",
        3: "#C0E4F0",
        4: "#A0D7E7",
        5: "#80CADF",
      }
    }
  }
}

Related searches

soft blue pastel palettecalm sky colors designairy serene brandinglight blue UI schemedreamy horizon aesthetic

Palette colors

Hex values

Color 1#F0F8FF
·
Color 2#D7EEF8
·
Color 3#C0E4F0
·
Color 4#A0D7E7
·
Color 5#80CADF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.3:1Fail
1.5:1Fail
1.7:1Fail
2
1.1:1Fail
1.1:1Fail
1.3:1Fail
1.5:1Fail
3
1.3:1Fail
1.1:1Fail
1.2:1Fail
1.4:1Fail
4
1.5:1Fail
1.3:1Fail
1.2:1Fail
1.2:1Fail
5
1.7:1Fail
1.5:1Fail
1.4:1Fail
1.2:1Fail

Similar palettes

More like Sugar Sky Horizon

View all pastel
Cloud Dream Whisper
Cloud Cotton Sky
Cloudless Sky Wash
Dreamy Cloudscape
Dreamy Cloudscape Pastels
Dreamy Cotton