Black Stallion to Cotton Ball color palette

0C1A20Black Stallion 1F4150Depths of the Nile 19698DSea Goddess 41A7D3Mystic Blue 97CCE2Fail Whale F0FAFFCotton Ball

Open in generator Export PNG, PDF, ASE…

About this palette

Black Stallion to Cotton Ball is a 6-color muted, cool, gradient palette: #0C1A20 (Black Stallion), #1F4150 (Depths of the Nile), #19698D (Sea Goddess), #41A7D3 (Mystic Blue), #97CCE2 (Fail Whale), #F0FAFF (Cotton Ball). It mixes black, blue, white tones and feels cool overall. The strongest text pairing is #0C1A20 on #F0FAFF with a contrast ratio of 16.74:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Stallion	rgb(12, 26, 32)	hsl(198, 45%, 9%)
Depths of the Nile	rgb(31, 65, 80)	hsl(198, 44%, 22%)
Sea Goddess	rgb(25, 105, 141)	hsl(199, 70%, 33%)
Mystic Blue	rgb(65, 167, 211)	hsl(198, 62%, 54%)
Fail Whale	rgb(151, 204, 226)	hsl(198, 56%, 74%)
Cotton Ball	rgb(240, 250, 255)	hsl(200, 100%, 97%)

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.

Aa16.74:1 Super#0C1A20 on #F0FAFF
Aa16.74:1 Super#F0FAFF on #0C1A20
Aa10.27:1 Very good#1F4150 on #F0FAFF
Aa10.27:1 Very good#F0FAFF on #1F4150
Aa10.18:1 Very good#0C1A20 on #97CCE2
Aa10.18:1 Very good#97CCE2 on #0C1A20
Aa6.50:1 Good#0C1A20 on #41A7D3
Aa6.50:1 Good#41A7D3 on #0C1A20

Color blindness preview

CSS variables

/* Black Stallion to Cotton Ball — https://swatchly.xyz/palette/0c1a20-1f4150-19698d-41a7d3-97cce2-f0faff */
:root {
  --black-stallion: #0c1a20;
  --depths-of-the-nile: #1f4150;
  --sea-goddess: #19698d;
  --mystic-blue: #41a7d3;
  --fail-whale: #97cce2;
  --cotton-ball: #f0faff;
}

Tailwind CSS v4

/* Black Stallion to Cotton Ball — https://swatchly.xyz/palette/0c1a20-1f4150-19698d-41a7d3-97cce2-f0faff */
@theme {
  --color-black-stallion: #0c1a20;
  --color-black-stallion-50: #edf7fc;
  --color-black-stallion-100: #e2edf3;
  --color-black-stallion-200: #cddae0;
  --color-black-stallion-300: #b5c4cb;
  --color-black-stallion-400: #94a5ac;
  --color-black-stallion-500: #77888f;
  --color-black-stallion-600: #5c6c73;
  --color-black-stallion-700: #45535a;
  --color-black-stallion-800: #333f44;
  --color-black-stallion-900: #242e32;
  --color-black-stallion-950: #0c1a20;
  --color-depths-of-the-nile: #1f4150;
  --color-depths-of-the-nile-50: #e9f8ff;
  --color-depths-of-the-nile-100: #d8f0fb;
  --color-depths-of-the-nile-200: #c1ddea;
  --color-depths-of-the-nile-300: #a5c5d5;
  --color-depths-of-the-nile-400: #82a5b6;
  --color-depths-of-the-nile-500: #65899a;
  --color-depths-of-the-nile-600: #4b6d7d;
  --color-depths-of-the-nile-700: #365563;
  --color-depths-of-the-nile-800: #1f4150;
  --color-depths-of-the-nile-900: #1b313b;
  --color-depths-of-the-nile-950: #0e1e25;
  --color-sea-goddess: #19698d;
  --color-sea-goddess-50: #ebf7ff;
  --color-sea-goddess-100: #d1eeff;
  --color-sea-goddess-200: #a5dcfb;
  --color-sea-goddess-300: #85c4e7;
  --color-sea-goddess-400: #5ca3c9;
  --color-sea-goddess-500: #3c86ab;
  --color-sea-goddess-600: #19698d;
  --color-sea-goddess-700: #0a5372;
  --color-sea-goddess-800: #00415c;
  --color-sea-goddess-900: #003348;
  --color-sea-goddess-950: #00202f;
  --color-mystic-blue: #41a7d3;
  --color-mystic-blue-50: #e4f6ff;
  --color-mystic-blue-100: #cceeff;
  --color-mystic-blue-200: #99ddff;
  --color-mystic-blue-300: #73c7ef;
  --color-mystic-blue-400: #41a7d3;
  --color-mystic-blue-500: #1c8cb7;
  --color-mystic-blue-600: #007197;
  --color-mystic-blue-700: #005a79;
  --color-mystic-blue-800: #004760;
  --color-mystic-blue-900: #00374c;
  --color-mystic-blue-950: #002332;
  --color-fail-whale: #97cce2;
  --color-fail-whale-50: #ebf9ff;
  --color-fail-whale-100: #d4f2ff;
  --color-fail-whale-200: #bae0f0;
  --color-fail-whale-300: #97cce2;
  --color-fail-whale-400: #7aabc0;
  --color-fail-whale-500: #5c90a4;
  --color-fail-whale-600: #427488;
  --color-fail-whale-700: #2e5d6f;
  --color-fail-whale-800: #1f4858;
  --color-fail-whale-900: #143845;
  --color-fail-whale-950: #09232c;
  --color-cotton-ball: #f0faff;
  --color-cotton-ball-50: #f0faff;
  --color-cotton-ball-100: #e9eff2;
  --color-cotton-ball-200: #d4dbde;
  --color-cotton-ball-300: #bcc4c8;
  --color-cotton-ball-400: #9ba4a8;
  --color-cotton-ball-500: #7f888d;
  --color-cotton-ball-600: #656d72;
  --color-cotton-ball-700: #4f575a;
  --color-cotton-ball-800: #3d4447;
  --color-cotton-ball-900: #2e3437;
  --color-cotton-ball-950: #1c2022;
}