Sky Dancer to Way Beyond the Blue color palette

26A5FFSky Dancer 032C41Nordic Noir F8D2ADRoyal Milk Tea 824800Milk Chocolate 008BCDWay Beyond the Blue

Open in generator Export PNG, PDF, ASE…

About this palette

Sky Dancer to Way Beyond the Blue is a 5-color cool palette: #26A5FF (Sky Dancer), #032C41 (Nordic Noir), #F8D2AD (Royal Milk Tea), #824800 (Milk Chocolate), #008BCD (Way Beyond the Blue). It mixes blue, orange, brown tones and feels cool overall. The strongest text pairing is #032C41 on #F8D2AD with a contrast ratio of 10.28:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sky Dancer	rgb(38, 165, 255)	hsl(205, 100%, 57%)
Nordic Noir	rgb(3, 44, 65)	hsl(200, 91%, 13%)
Royal Milk Tea	rgb(248, 210, 173)	hsl(30, 84%, 83%)
Milk Chocolate	rgb(130, 72, 0)	hsl(33, 100%, 25%)
Way Beyond the Blue	rgb(0, 139, 205)	hsl(199, 100%, 40%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa10.28:1 Very good#032C41 on #F8D2AD
Aa10.28:1 Very good#F8D2AD on #032C41
Aa5.49:1 Good#26A5FF on #032C41
Aa5.49:1 Good#032C41 on #26A5FF
Aa5.15:1 Good#F8D2AD on #824800
Aa5.15:1 Good#824800 on #F8D2AD
Aa3.87:1 Poor#032C41 on #008BCD
Aa3.87:1 Poor#008BCD on #032C41

Color blindness preview

CSS variables

/* Sky Dancer to Way Beyond the Blue — https://swatchly.xyz/palette/26a5ff-032c41-f8d2ad-824800-008bcd */
:root {
  --sky-dancer: #26a5ff;
  --nordic-noir: #032c41;
  --royal-milk-tea: #f8d2ad;
  --milk-chocolate: #824800;
  --way-beyond-the-blue: #008bcd;
}

Tailwind CSS v4

/* Sky Dancer to Way Beyond the Blue — https://swatchly.xyz/palette/26a5ff-032c41-f8d2ad-824800-008bcd */
@theme {
  --color-sky-dancer: #26a5ff;
  --color-sky-dancer-50: #ebf5ff;
  --color-sky-dancer-100: #d8ecff;
  --color-sky-dancer-200: #b2daff;
  --color-sky-dancer-300: #83c5ff;
  --color-sky-dancer-400: #26a5ff;
  --color-sky-dancer-500: #0089db;
  --color-sky-dancer-600: #006eb2;
  --color-sky-dancer-700: #00588f;
  --color-sky-dancer-800: #004471;
  --color-sky-dancer-900: #003559;
  --color-sky-dancer-950: #00213b;
  --color-nordic-noir: #032c41;
  --color-nordic-noir-50: #ebf7ff;
  --color-nordic-noir-100: #d7efff;
  --color-nordic-noir-200: #bedcf1;
  --color-nordic-noir-300: #a4c6dd;
  --color-nordic-noir-400: #81a7c0;
  --color-nordic-noir-500: #678ea7;
  --color-nordic-noir-600: #4f758d;
  --color-nordic-noir-700: #3c5f75;
  --color-nordic-noir-800: #2d4d61;
  --color-nordic-noir-900: #223f50;
  --color-nordic-noir-950: #032c41;
  --color-royal-milk-tea: #f8d2ad;
  --color-royal-milk-tea-50: #fff5eb;
  --color-royal-milk-tea-100: #ffe9d4;
  --color-royal-milk-tea-200: #f8d2ad;
  --color-royal-milk-tea-300: #dcbc9e;
  --color-royal-milk-tea-400: #be9c7a;
  --color-royal-milk-tea-500: #a2805d;
  --color-royal-milk-tea-600: #866544;
  --color-royal-milk-tea-700: #6c4f30;
  --color-royal-milk-tea-800: #563c21;
  --color-royal-milk-tea-900: #432e17;
  --color-royal-milk-tea-950: #2b1b0b;
  --color-milk-chocolate: #824800;
  --color-milk-chocolate-50: #fff3e9;
  --color-milk-chocolate-100: #ffe6d2;
  --color-milk-chocolate-200: #ffcda3;
  --color-milk-chocolate-300: #edb585;
  --color-milk-chocolate-400: #d2945e;
  --color-milk-chocolate-500: #b77940;
  --color-milk-chocolate-600: #9a5f24;
  --color-milk-chocolate-700: #824800;
  --color-milk-chocolate-800: #673800;
  --color-milk-chocolate-900: #502a00;
  --color-milk-chocolate-950: #341900;
  --color-way-beyond-the-blue: #008bcd;
  --color-way-beyond-the-blue-50: #ebf6ff;
  --color-way-beyond-the-blue-100: #d6edff;
  --color-way-beyond-the-blue-200: #addcff;
  --color-way-beyond-the-blue-300: #78c8ff;
  --color-way-beyond-the-blue-400: #3ea8e9;
  --color-way-beyond-the-blue-500: #008bcd;
  --color-way-beyond-the-blue-600: #0070a6;
  --color-way-beyond-the-blue-700: #005985;
  --color-way-beyond-the-blue-800: #004569;
  --color-way-beyond-the-blue-900: #003653;
  --color-way-beyond-the-blue-950: #002136;
}