Ice Climber to Black Stallion color palette

3CE0BDIce Climber ED7E9DEmbarrassed 957500Glazed Chestnut 0F4385Pacific Depths 041714Black Stallion

About this palette

Ice Climber to Black Stallion is a 5-color palette: #3CE0BD (Ice Climber), #ED7E9D (Embarrassed), #957500 (Glazed Chestnut), #0F4385 (Pacific Depths), #041714 (Black Stallion). It mixes turquoise, pink, yellow, blue, black tones and feels balanced overall. The strongest text pairing is #3CE0BD on #041714 with a contrast ratio of 11.06:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ice Climber	rgb(60, 224, 189)	hsl(167, 73%, 56%)
Embarrassed	rgb(237, 126, 157)	hsl(343, 76%, 71%)
Glazed Chestnut	rgb(149, 117, 0)	hsl(47, 100%, 29%)
Pacific Depths	rgb(15, 67, 133)	hsl(214, 80%, 29%)
Black Stallion	rgb(4, 23, 20)	hsl(171, 70%, 5%)

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.

Aa11.06:1 Very good#3CE0BD on #041714
Aa11.06:1 Very good#041714 on #3CE0BD
Aa7.09:1 Very good#ED7E9D on #041714
Aa7.09:1 Very good#041714 on #ED7E9D
Aa5.82:1 Good#3CE0BD on #0F4385
Aa5.82:1 Good#0F4385 on #3CE0BD
Aa4.24:1 Poor#957500 on #041714
Aa4.24:1 Poor#041714 on #957500

Color blindness preview

CSS variables

/* Ice Climber to Black Stallion — https://swatchly.xyz/palette/3ce0bd-ed7e9d-957500-0f4385-041714 */
:root {
  --ice-climber: #3ce0bd;
  --embarrassed: #ed7e9d;
  --glazed-chestnut: #957500;
  --pacific-depths: #0f4385;
  --black-stallion: #041714;
}

Tailwind CSS v4

/* Ice Climber to Black Stallion — https://swatchly.xyz/palette/3ce0bd-ed7e9d-957500-0f4385-041714 */
@theme {
  --color-ice-climber: #3ce0bd;
  --color-ice-climber-50: #ddfff4;
  --color-ice-climber-100: #b2ffe9;
  --color-ice-climber-200: #8bf0d5;
  --color-ice-climber-300: #3ce0bd;
  --color-ice-climber-400: #05be9e;
  --color-ice-climber-500: #009e83;
  --color-ice-climber-600: #007f69;
  --color-ice-climber-700: #006553;
  --color-ice-climber-800: #004f40;
  --color-ice-climber-900: #003d31;
  --color-ice-climber-950: #00261e;
  --color-embarrassed: #ed7e9d;
  --color-embarrassed-50: #fff3f6;
  --color-embarrassed-100: #ffe6ec;
  --color-embarrassed-200: #ffcbd6;
  --color-embarrassed-300: #ffa8be;
  --color-embarrassed-400: #ed7e9d;
  --color-embarrassed-500: #cd6281;
  --color-embarrassed-600: #ad4666;
  --color-embarrassed-700: #8f3150;
  --color-embarrassed-800: #73203d;
  --color-embarrassed-900: #5b142e;
  --color-embarrassed-950: #3b091b;
  --color-glazed-chestnut: #957500;
  --color-glazed-chestnut-50: #fff2d0;
  --color-glazed-chestnut-100: #fbe5ac;
  --color-glazed-chestnut-200: #e8ce8a;
  --color-glazed-chestnut-300: #d2b565;
  --color-glazed-chestnut-400: #b39336;
  --color-glazed-chestnut-500: #957500;
  --color-glazed-chestnut-600: #785e00;
  --color-glazed-chestnut-700: #604a00;
  --color-glazed-chestnut-800: #4c3a00;
  --color-glazed-chestnut-900: #3c2d00;
  --color-glazed-chestnut-950: #261c00;
  --color-pacific-depths: #0f4385;
  --color-pacific-depths-50: #eff6ff;
  --color-pacific-depths-100: #dfecff;
  --color-pacific-depths-200: #bfdaff;
  --color-pacific-depths-300: #9ac4ff;
  --color-pacific-depths-400: #72a4eb;
  --color-pacific-depths-500: #5589d1;
  --color-pacific-depths-600: #3c6eb3;
  --color-pacific-depths-700: #295796;
  --color-pacific-depths-800: #0f4385;
  --color-pacific-depths-900: #113463;
  --color-pacific-depths-950: #062042;
  --color-black-stallion: #041714;
  --color-black-stallion-50: #ebf9f6;
  --color-black-stallion-100: #e0efec;
  --color-black-stallion-200: #cadcd8;
  --color-black-stallion-300: #b2c6c2;
  --color-black-stallion-400: #91a7a3;
  --color-black-stallion-500: #728985;
  --color-black-stallion-600: #576c68;
  --color-black-stallion-700: #40534f;
  --color-black-stallion-800: #2d3d3a;
  --color-black-stallion-900: #1e2b28;
  --color-black-stallion-950: #041714;
}