Color Tools (126)
Monochromatic Shade Escalator Monochromatic Tint Escalator Color Shaker Cyberpunk Neon Palette Pastel Brand Palette Vintage Retro Palette Minimalist Corporate Palette Notion Dashboard Palette Indie Hacker SaaS Palette Cozy Gaming Setup Palette Old Money Aesthetic Palette GoodNotes Planner Hex Codes Boho-Chic Wedding Palette Cozy Autumn Aesthetic Luxury Apparel Brand Colors Retro 70s Psychedelic Sage Green Wedding Palette Sage Green & Terracotta Vintage Rose Palette Blush Rose Gradient Dusty Rose Complementary Antique White Pastels Midnight Cyberpunk Neon Retrowave Aesthetic Old-School Print Sepia Film Noir Monochrome Sage Green Harmony Terracotta Earth Tones Warm Cozy Autumn Color Schemes & Swatches High-End Fashion & Minimalist Brand Palettes Groovy 1970s Vintage Triadic Color Schemes Eucalyptus & Sage Green Wedding Stationary Palettes Earthy Sage Green & Terracotta Branding Schemes Pastel Lo-Fi & Cozy Gamer UI Color Schemes Classic Luxury & Heritage Branding Color Schemes Aesthetic iPad Digital Journaling Palette Swatches Tailwind CSS HSL Theme Config Builder for shadcn/ui Sage Green & Cream Palette Navy & Gold Palette Dusty Rose & Taupe Palette Terracotta & Sage Palette Midnight Blue & Coral Palette Mustard Yellow & Navy Palette Blush Pink & Gold Palette Forest & Cream Palette Burgundy & Blush Palette Teal & Coral Palette Charcoal & Mint Palette Lavender & Cream Palette Burnt Orange & Brown Palette Slate Blue & Cream Palette Olive & Terracotta Palette Peach & Sage Palette Aqua & White Palette Mauve & Gray Palette Rustic Kraft Palette Sky Blue & White Palette Camel & Navy Palette Emerald & Gold Palette Black & Cream Palette Coral & Teal Palette Lilac & Mint Palette Warm Stone Palette Electric Indigo Palette Glacier Blue Palette Butter & Slate Palette Digital Citrus Palette Coastal Mist Palette Concrete & Copper Palette Obsidian & Gold Palette Chocolate Brown Palette Peach Fuzz Palette E5A93B Color (Mustard Gold) D96B43 Color (Terracotta) 87A987 Color (Sage Green) 8C8275 Color (Warm Taupe) A2B59F Color (Sage Green) E6D7C3 Color (Warm Cream) Cloud Dancer Palette Mocha Mousse Palette Transformative Teal Palette Future Dusk Palette Luminous Blue Palette Eggshell Blue Palette Butter Yellow Palette Dusty Mauve Palette Papaya Palette Flamingo Pink Palette Graphite Palette Bordeaux Wine Palette Heritage Navy Palette Cambridge Green Palette Gilded Walnut Palette Opera Red Palette Midnight Espresso Palette Old Library Palette Ivy Hall Palette Oxford Study Palette Sepia Archive Palette Antique Gold Palette Muted Navy & Wine Palette Vintage Botanical Palette Amber Cabin Palette Cinnamon Oat Palette Amber Hearth Palette Cabin Hearth Ember Palette Autumn Plaid Palette Autumn Mug Warmth Palette Hygge Neutrals Palette Japandi Earth Palette Warm Oatmeal & Sage Palette Candlelit Parlor Palette Wildflower Meadow Palette Honey & Herb Palette Herb Garden Notebook Palette Baked Clay & Cream Palette Quiet Linen Palette Ivory Ink Palette Ghost Gray Palette Sage & Stone Palette Terracotta Minimal Palette Arctic Blue Palette Dusty Rose & Greige Palette Nordic Sofa Neutrals Palette Faded Teal Palette Sunfaded Postcard Palette
← Back to Tools

Sky Blue & White Palette

Design fresh baby and clean themes with this sky blue and white palette featuring #87CEEB sky blue, #FFFFFF pure white, #ADD8E6 light blue, and #F0F8FF alice blue.

Export

Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.

:root {
  --sky-blue: #87CEEB;
  --sky-blue-50: #faffff;
  --sky-blue-100: #f6feff;
  --sky-blue-200: #edfbff;
  --sky-blue-300: #e2f8ff;
  --sky-blue-400: #d4f3fe;
  --sky-blue-500: #87CEEB;
  --sky-blue-600: #a0c4d1;
  --sky-blue-700: #6c8b96;
  --sky-blue-800: #3e565e;
  --sky-blue-900: #1a2a2f;
  --sky-blue-950: #03080a;
  --pure-white: #FFFFFF;
  --pure-white-50: #ffffff;
  --pure-white-100: #ffffff;
  --pure-white-200: #ffffff;
  --pure-white-300: #ffffff;
  --pure-white-400: #ffffff;
  --pure-white-500: #FFFFFF;
  --pure-white-600: #d7d7d7;
  --pure-white-700: #989898;
  --pure-white-800: #5d5d5d;
  --pure-white-900: #2e2e2e;
  --pure-white-950: #090909;
  --light-blue: #ADD8E6;
  --light-blue-50: #fcffff;
  --light-blue-100: #f9feff;
  --light-blue-200: #f4fcfe;
  --light-blue-300: #edf9fd;
  --light-blue-400: #e4f5fa;
  --light-blue-500: #ADD8E6;
  --light-blue-600: #b4c8ce;
  --light-blue-700: #7c8e93;
  --light-blue-800: #4a575b;
  --light-blue-900: #222a2d;
  --light-blue-950: #050809;
  --alice-blue: #F0F8FF;
  --alice-blue-50: #feffff;
  --alice-blue-100: #feffff;
  --alice-blue-200: #fdfeff;
  --alice-blue-300: #fcfeff;
  --alice-blue-400: #fafdff;
  --alice-blue-500: #F0F8FF;
  --alice-blue-600: #d1d5d8;
  --alice-blue-700: #939699;
  --alice-blue-800: #5a5c5e;
  --alice-blue-900: #2c2d2e;
  --alice-blue-950: #080909;
}
$sky-blue: #87CEEB;
$sky-blue-50: #faffff;
$sky-blue-100: #f6feff;
$sky-blue-200: #edfbff;
$sky-blue-300: #e2f8ff;
$sky-blue-400: #d4f3fe;
$sky-blue-500: #87CEEB;
$sky-blue-600: #a0c4d1;
$sky-blue-700: #6c8b96;
$sky-blue-800: #3e565e;
$sky-blue-900: #1a2a2f;
$sky-blue-950: #03080a;
$pure-white: #FFFFFF;
$pure-white-50: #ffffff;
$pure-white-100: #ffffff;
$pure-white-200: #ffffff;
$pure-white-300: #ffffff;
$pure-white-400: #ffffff;
$pure-white-500: #FFFFFF;
$pure-white-600: #d7d7d7;
$pure-white-700: #989898;
$pure-white-800: #5d5d5d;
$pure-white-900: #2e2e2e;
$pure-white-950: #090909;
$light-blue: #ADD8E6;
$light-blue-50: #fcffff;
$light-blue-100: #f9feff;
$light-blue-200: #f4fcfe;
$light-blue-300: #edf9fd;
$light-blue-400: #e4f5fa;
$light-blue-500: #ADD8E6;
$light-blue-600: #b4c8ce;
$light-blue-700: #7c8e93;
$light-blue-800: #4a575b;
$light-blue-900: #222a2d;
$light-blue-950: #050809;
$alice-blue: #F0F8FF;
$alice-blue-50: #feffff;
$alice-blue-100: #feffff;
$alice-blue-200: #fdfeff;
$alice-blue-300: #fcfeff;
$alice-blue-400: #fafdff;
$alice-blue-500: #F0F8FF;
$alice-blue-600: #d1d5d8;
$alice-blue-700: #939699;
$alice-blue-800: #5a5c5e;
$alice-blue-900: #2c2d2e;
$alice-blue-950: #080909;
colors: {
    'sky-blue': {
      50: '#faffff',
      100: '#f6feff',
      200: '#edfbff',
      300: '#e2f8ff',
      400: '#d4f3fe',
      500: '#87CEEB',
      600: '#a0c4d1',
      700: '#6c8b96',
      800: '#3e565e',
      900: '#1a2a2f',
      950: '#03080a',
      DEFAULT: '#87CEEB',
    },
    'pure-white': {
      50: '#ffffff',
      100: '#ffffff',
      200: '#ffffff',
      300: '#ffffff',
      400: '#ffffff',
      500: '#FFFFFF',
      600: '#d7d7d7',
      700: '#989898',
      800: '#5d5d5d',
      900: '#2e2e2e',
      950: '#090909',
      DEFAULT: '#FFFFFF',
    },
    'light-blue': {
      50: '#fcffff',
      100: '#f9feff',
      200: '#f4fcfe',
      300: '#edf9fd',
      400: '#e4f5fa',
      500: '#ADD8E6',
      600: '#b4c8ce',
      700: '#7c8e93',
      800: '#4a575b',
      900: '#222a2d',
      950: '#050809',
      DEFAULT: '#ADD8E6',
    },
    'alice-blue': {
      50: '#feffff',
      100: '#feffff',
      200: '#fdfeff',
      300: '#fcfeff',
      400: '#fafdff',
      500: '#F0F8FF',
      600: '#d1d5d8',
      700: '#939699',
      800: '#5a5c5e',
      900: '#2c2d2e',
      950: '#080909',
      DEFAULT: '#F0F8FF',
    },
  },
[
  {
    "name": "sky-blue",
    "harmony": "Palette",
    "hex": "#87CEEB",
    "rgb": {
      "r": 135,
      "g": 206,
      "b": 235
    },
    "hsl": {
      "h": 197,
      "s": 71,
      "l": 73
    },
    "value": "#87CEEB",
    "tonalScale": {
      "50": {
        "hex": "#faffff",
        "rgb": {
          "r": 250,
          "g": 255,
          "b": 255
        }
      },
      "100": {
        "hex": "#f6feff",
        "rgb": {
          "r": 246,
          "g": 254,
          "b": 255
        }
      },
      "200": {
        "hex": "#edfbff",
        "rgb": {
          "r": 237,
          "g": 251,
          "b": 255
        }
      },
      "300": {
        "hex": "#e2f8ff",
        "rgb": {
          "r": 226,
          "g": 248,
          "b": 255
        }
      },
      "400": {
        "hex": "#d4f3fe",
        "rgb": {
          "r": 212,
          "g": 243,
          "b": 254
        }
      },
      "500": {
        "hex": "#87CEEB",
        "rgb": {
          "r": 135,
          "g": 206,
          "b": 235
        }
      },
      "600": {
        "hex": "#a0c4d1",
        "rgb": {
          "r": 160,
          "g": 196,
          "b": 209
        }
      },
      "700": {
        "hex": "#6c8b96",
        "rgb": {
          "r": 108,
          "g": 139,
          "b": 150
        }
      },
      "800": {
        "hex": "#3e565e",
        "rgb": {
          "r": 62,
          "g": 86,
          "b": 94
        }
      },
      "900": {
        "hex": "#1a2a2f",
        "rgb": {
          "r": 26,
          "g": 42,
          "b": 47
        }
      },
      "950": {
        "hex": "#03080a",
        "rgb": {
          "r": 3,
          "g": 8,
          "b": 10
        }
      }
    }
  },
  {
    "name": "pure-white",
    "harmony": "Palette",
    "hex": "#FFFFFF",
    "rgb": {
      "r": 255,
      "g": 255,
      "b": 255
    },
    "hsl": {
      "h": 0,
      "s": 0,
      "l": 100
    },
    "value": "#FFFFFF",
    "tonalScale": {
      "50": {
        "hex": "#ffffff",
        "rgb": {
          "r": 255,
          "g": 255,
          "b": 255
        }
      },
      "100": {
        "hex": "#ffffff",
        "rgb": {
          "r": 255,
          "g": 255,
          "b": 255
        }
      },
      "200": {
        "hex": "#ffffff",
        "rgb": {
          "r": 255,
          "g": 255,
          "b": 255
        }
      },
      "300": {
        "hex": "#ffffff",
        "rgb": {
          "r": 255,
          "g": 255,
          "b": 255
        }
      },
      "400": {
        "hex": "#ffffff",
        "rgb": {
          "r": 255,
          "g": 255,
          "b": 255
        }
      },
      "500": {
        "hex": "#FFFFFF",
        "rgb": {
          "r": 255,
          "g": 255,
          "b": 255
        }
      },
      "600": {
        "hex": "#d7d7d7",
        "rgb": {
          "r": 215,
          "g": 215,
          "b": 215
        }
      },
      "700": {
        "hex": "#989898",
        "rgb": {
          "r": 152,
          "g": 152,
          "b": 152
        }
      },
      "800": {
        "hex": "#5d5d5d",
        "rgb": {
          "r": 93,
          "g": 93,
          "b": 93
        }
      },
      "900": {
        "hex": "#2e2e2e",
        "rgb": {
          "r": 46,
          "g": 46,
          "b": 46
        }
      },
      "950": {
        "hex": "#090909",
        "rgb": {
          "r": 9,
          "g": 9,
          "b": 9
        }
      }
    }
  },
  {
    "name": "light-blue",
    "harmony": "Palette",
    "hex": "#ADD8E6",
    "rgb": {
      "r": 173,
      "g": 216,
      "b": 230
    },
    "hsl": {
      "h": 195,
      "s": 53,
      "l": 79
    },
    "value": "#ADD8E6",
    "tonalScale": {
      "50": {
        "hex": "#fcffff",
        "rgb": {
          "r": 252,
          "g": 255,
          "b": 255
        }
      },
      "100": {
        "hex": "#f9feff",
        "rgb": {
          "r": 249,
          "g": 254,
          "b": 255
        }
      },
      "200": {
        "hex": "#f4fcfe",
        "rgb": {
          "r": 244,
          "g": 252,
          "b": 254
        }
      },
      "300": {
        "hex": "#edf9fd",
        "rgb": {
          "r": 237,
          "g": 249,
          "b": 253
        }
      },
      "400": {
        "hex": "#e4f5fa",
        "rgb": {
          "r": 228,
          "g": 245,
          "b": 250
        }
      },
      "500": {
        "hex": "#ADD8E6",
        "rgb": {
          "r": 173,
          "g": 216,
          "b": 230
        }
      },
      "600": {
        "hex": "#b4c8ce",
        "rgb": {
          "r": 180,
          "g": 200,
          "b": 206
        }
      },
      "700": {
        "hex": "#7c8e93",
        "rgb": {
          "r": 124,
          "g": 142,
          "b": 147
        }
      },
      "800": {
        "hex": "#4a575b",
        "rgb": {
          "r": 74,
          "g": 87,
          "b": 91
        }
      },
      "900": {
        "hex": "#222a2d",
        "rgb": {
          "r": 34,
          "g": 42,
          "b": 45
        }
      },
      "950": {
        "hex": "#050809",
        "rgb": {
          "r": 5,
          "g": 8,
          "b": 9
        }
      }
    }
  },
  {
    "name": "alice-blue",
    "harmony": "Palette",
    "hex": "#F0F8FF",
    "rgb": {
      "r": 240,
      "g": 248,
      "b": 255
    },
    "hsl": {
      "h": 208,
      "s": 100,
      "l": 97
    },
    "value": "#F0F8FF",
    "tonalScale": {
      "50": {
        "hex": "#feffff",
        "rgb": {
          "r": 254,
          "g": 255,
          "b": 255
        }
      },
      "100": {
        "hex": "#feffff",
        "rgb": {
          "r": 254,
          "g": 255,
          "b": 255
        }
      },
      "200": {
        "hex": "#fdfeff",
        "rgb": {
          "r": 253,
          "g": 254,
          "b": 255
        }
      },
      "300": {
        "hex": "#fcfeff",
        "rgb": {
          "r": 252,
          "g": 254,
          "b": 255
        }
      },
      "400": {
        "hex": "#fafdff",
        "rgb": {
          "r": 250,
          "g": 253,
          "b": 255
        }
      },
      "500": {
        "hex": "#F0F8FF",
        "rgb": {
          "r": 240,
          "g": 248,
          "b": 255
        }
      },
      "600": {
        "hex": "#d1d5d8",
        "rgb": {
          "r": 209,
          "g": 213,
          "b": 216
        }
      },
      "700": {
        "hex": "#939699",
        "rgb": {
          "r": 147,
          "g": 150,
          "b": 153
        }
      },
      "800": {
        "hex": "#5a5c5e",
        "rgb": {
          "r": 90,
          "g": 92,
          "b": 94
        }
      },
      "900": {
        "hex": "#2c2d2e",
        "rgb": {
          "r": 44,
          "g": 45,
          "b": 46
        }
      },
      "950": {
        "hex": "#080909",
        "rgb": {
          "r": 8,
          "g": 9,
          "b": 9
        }
      }
    }
  }
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950
sky-blue,Palette,#87CEEB,"rgb(135, 206, 235)","hsl(197, 71%, 73%)",#87CEEB,#faffff,#f6feff,#edfbff,#e2f8ff,#d4f3fe,#87CEEB,#a0c4d1,#6c8b96,#3e565e,#1a2a2f,#03080a
pure-white,Palette,#FFFFFF,"rgb(255, 255, 255)","hsl(0, 0%, 100%)",#FFFFFF,#ffffff,#ffffff,#ffffff,#ffffff,#ffffff,#FFFFFF,#d7d7d7,#989898,#5d5d5d,#2e2e2e,#090909
light-blue,Palette,#ADD8E6,"rgb(173, 216, 230)","hsl(195, 53%, 79%)",#ADD8E6,#fcffff,#f9feff,#f4fcfe,#edf9fd,#e4f5fa,#ADD8E6,#b4c8ce,#7c8e93,#4a575b,#222a2d,#050809
alice-blue,Palette,#F0F8FF,"rgb(240, 248, 255)","hsl(208, 100%, 97%)",#F0F8FF,#feffff,#feffff,#fdfeff,#fcfeff,#fafdff,#F0F8FF,#d1d5d8,#939699,#5a5c5e,#2c2d2e,#080909
GIMP Palette
Name: PocketSwiss analogous
Columns: 4
#
135 206 235   sky-blue
250 255 255   sky-blue-50
246 254 255   sky-blue-100
237 251 255   sky-blue-200
226 248 255   sky-blue-300
212 243 254   sky-blue-400
135 206 235   sky-blue-500
160 196 209   sky-blue-600
108 139 150   sky-blue-700
 62  86  94   sky-blue-800
 26  42  47   sky-blue-900
  3   8  10   sky-blue-950
255 255 255   pure-white
255 255 255   pure-white-50
255 255 255   pure-white-100
255 255 255   pure-white-200
255 255 255   pure-white-300
255 255 255   pure-white-400
255 255 255   pure-white-500
215 215 215   pure-white-600
152 152 152   pure-white-700
 93  93  93   pure-white-800
 46  46  46   pure-white-900
  9   9   9   pure-white-950
173 216 230   light-blue
252 255 255   light-blue-50
249 254 255   light-blue-100
244 252 254   light-blue-200
237 249 253   light-blue-300
228 245 250   light-blue-400
173 216 230   light-blue-500
180 200 206   light-blue-600
124 142 147   light-blue-700
 74  87  91   light-blue-800
 34  42  45   light-blue-900
  5   8   9   light-blue-950
240 248 255   alice-blue
254 255 255   alice-blue-50
254 255 255   alice-blue-100
253 254 255   alice-blue-200
252 254 255   alice-blue-300
250 253 255   alice-blue-400
240 248 255   alice-blue-500
209 213 216   alice-blue-600
147 150 153   alice-blue-700
 90  92  94   alice-blue-800
 44  45  46   alice-blue-900
  8   9   9   alice-blue-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.

What is Sky Blue & White Palette?

Design fresh baby and clean themes with this sky blue and white palette featuring #87CEEB sky blue, #FFFFFF pure white, #ADD8E6 light blue, and #F0F8FF alice blue. This free sky blue & white palette tool runs entirely in your browser — no sign-up, no uploads, and no data leaves your device.

Why use the Sky Blue & White Palette tool?

Browse by mood: Pastel & Soft Color Palettes · Blue Color Palettes