Start generating

Sky to Sea of Stars color palette

79DDFFSky00C6FCTropical TurquoiseCC5D00Tomato BisqueA25728Spicy Cinnamon732F0DChestnut00364DSea of Stars
Open in generator Export PNG, PDF, ASE…

About this palette

Sky to Sea of Stars is a 6-color palette: #79DDFF (Sky), #00C6FC (Tropical Turquoise), #CC5D00 (Tomato Bisque), #A25728 (Spicy Cinnamon), #732F0D (Chestnut), #00364D (Sea of Stars). It mixes blue, orange, brown tones and feels balanced overall. The strongest text pairing is #79DDFF on #00364D with a contrast ratio of 8.32:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Skyrgb(121, 221, 255)hsl(195, 100%, 74%)
Tropical Turquoisergb(0, 198, 252)hsl(193, 100%, 49%)
Tomato Bisquergb(204, 93, 0)hsl(27, 100%, 40%)
Spicy Cinnamonrgb(162, 87, 40)hsl(23, 60%, 40%)
Chestnutrgb(115, 47, 13)hsl(20, 80%, 25%)
Sea of Starsrgb(0, 54, 77)hsl(198, 100%, 15%)

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.

  • Aa8.32:1 Very good#79DDFF on #00364D
  • Aa8.32:1 Very good#00364D on #79DDFF
  • Aa6.41:1 Good#00C6FC on #00364D
  • Aa6.41:1 Good#00364D on #00C6FC
  • Aa6.35:1 Good#79DDFF on #732F0D
  • Aa6.35:1 Good#732F0D on #79DDFF
  • Aa4.90:1 Good#00C6FC on #732F0D
  • Aa4.90:1 Good#732F0D on #00C6FC

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Sky to Sea of Stars — https://swatchly.xyz/palette/79ddff-00c6fc-cc5d00-a25728-732f0d-00364d */
:root {
  --sky: #79ddff;
  --tropical-turquoise: #00c6fc;
  --tomato-bisque: #cc5d00;
  --spicy-cinnamon: #a25728;
  --chestnut: #732f0d;
  --sea-of-stars: #00364d;
}

Tailwind CSS v4

/* Sky to Sea of Stars — https://swatchly.xyz/palette/79ddff-00c6fc-cc5d00-a25728-732f0d-00364d */
@theme {
  --color-sky: #79ddff;
  --color-sky-50: #d7f4ff;
  --color-sky-100: #b9ecff;
  --color-sky-200: #79ddff;
  --color-sky-300: #70c6e4;
  --color-sky-400: #46a9c9;
  --color-sky-500: #1e8faf;
  --color-sky-600: #007491;
  --color-sky-700: #005d75;
  --color-sky-800: #004a5d;
  --color-sky-900: #003949;
  --color-sky-950: #00242e;
  --color-tropical-turquoise: #00c6fc;
  --color-tropical-turquoise-50: #daf3ff;
  --color-tropical-turquoise-100: #bcebff;
  --color-tropical-turquoise-200: #81daff;
  --color-tropical-turquoise-300: #00c6fc;
  --color-tropical-turquoise-400: #00a6d4;
  --color-tropical-turquoise-500: #008bb2;
  --color-tropical-turquoise-600: #007191;
  --color-tropical-turquoise-700: #005a75;
  --color-tropical-turquoise-800: #00485e;
  --color-tropical-turquoise-900: #00394b;
  --color-tropical-turquoise-950: #002330;
  --color-tomato-bisque: #cc5d00;
  --color-tomato-bisque-50: #fff1ea;
  --color-tomato-bisque-100: #ffe3d5;
  --color-tomato-bisque-200: #ffc7aa;
  --color-tomato-bisque-300: #ffa573;
  --color-tomato-bisque-400: #ea7c38;
  --color-tomato-bisque-500: #cc5d00;
  --color-tomato-bisque-600: #a54a00;
  --color-tomato-bisque-700: #843a00;
  --color-tomato-bisque-800: #692c00;
  --color-tomato-bisque-900: #522100;
  --color-tomato-bisque-950: #361300;
  --color-spicy-cinnamon: #a25728;
  --color-spicy-cinnamon-50: #fff2eb;
  --color-spicy-cinnamon-100: #ffe6d8;
  --color-spicy-cinnamon-200: #ffccb0;
  --color-spicy-cinnamon-300: #f6b088;
  --color-spicy-cinnamon-400: #db8e62;
  --color-spicy-cinnamon-500: #bf7144;
  --color-spicy-cinnamon-600: #a25728;
  --color-spicy-cinnamon-700: #854214;
  --color-spicy-cinnamon-800: #6b3105;
  --color-spicy-cinnamon-900: #552300;
  --color-spicy-cinnamon-950: #371400;
  --color-chestnut: #732f0d;
  --color-chestnut-50: #fff2ed;
  --color-chestnut-100: #ffe5da;
  --color-chestnut-200: #ffcab4;
  --color-chestnut-300: #f4af93;
  --color-chestnut-400: #d88e6f;
  --color-chestnut-500: #bd7253;
  --color-chestnut-600: #a0593a;
  --color-chestnut-700: #864427;
  --color-chestnut-800: #732f0d;
  --color-chestnut-900: #57260f;
  --color-chestnut-950: #3a1605;
  --color-sea-of-stars: #00364d;
  --color-sea-of-stars-50: #ebf7ff;
  --color-sea-of-stars-100: #d6f0ff;
  --color-sea-of-stars-200: #b9def3;
  --color-sea-of-stars-300: #9ec8e0;
  --color-sea-of-stars-400: #7aa8c3;
  --color-sea-of-stars-500: #5d8ca7;
  --color-sea-of-stars-600: #43718a;
  --color-sea-of-stars-700: #2f5a70;
  --color-sea-of-stars-800: #204659;
  --color-sea-of-stars-900: #00364d;
  --color-sea-of-stars-950: #0a212d;
}

Similar palettes