Start generating

Breaking the Ice to Pastel Purple color palette

C0E4F5Breaking the Ice121C15Twilight Zone6B8BA6Treasure Map Waters594435Espresso BarB59FB2Pastel Purple
Open in generator Export PNG, PDF, ASE…

About this palette

Breaking the Ice to Pastel Purple is a 5-color muted palette: #C0E4F5 (Breaking the Ice), #121C15 (Twilight Zone), #6B8BA6 (Treasure Map Waters), #594435 (Espresso Bar), #B59FB2 (Pastel Purple). It mixes blue, black, brown, pink tones and feels balanced overall. The strongest text pairing is #C0E4F5 on #121C15 with a contrast ratio of 13.02:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Breaking the Icergb(192, 228, 245)hsl(199, 73%, 86%)
Twilight Zonergb(18, 28, 21)hsl(138, 22%, 9%)
Treasure Map Watersrgb(107, 139, 166)hsl(207, 25%, 54%)
Espresso Barrgb(89, 68, 53)hsl(25, 25%, 28%)
Pastel Purplergb(181, 159, 178)hsl(308, 13%, 67%)

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.

  • Aa13.02:1 Super#C0E4F5 on #121C15
  • Aa13.02:1 Super#121C15 on #C0E4F5
  • Aa7.12:1 Very good#121C15 on #B59FB2
  • Aa7.12:1 Very good#B59FB2 on #121C15
  • Aa6.80:1 Good#C0E4F5 on #594435
  • Aa6.80:1 Good#594435 on #C0E4F5
  • Aa4.88:1 Good#121C15 on #6B8BA6
  • Aa4.88:1 Good#6B8BA6 on #121C15

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Breaking the Ice to Pastel Purple — https://swatchly.xyz/palette/c0e4f5-121c15-6b8ba6-594435-b59fb2 */
:root {
  --breaking-the-ice: #c0e4f5;
  --twilight-zone: #121c15;
  --treasure-map-waters: #6b8ba6;
  --espresso-bar: #594435;
  --pastel-purple: #b59fb2;
}

Tailwind CSS v4

/* Breaking the Ice to Pastel Purple — https://swatchly.xyz/palette/c0e4f5-121c15-6b8ba6-594435-b59fb2 */
@theme {
  --color-breaking-the-ice: #c0e4f5;
  --color-breaking-the-ice-50: #f2fbff;
  --color-breaking-the-ice-100: #dff4fe;
  --color-breaking-the-ice-200: #c0e4f5;
  --color-breaking-the-ice-300: #aecbd9;
  --color-breaking-the-ice-400: #8aabba;
  --color-breaking-the-ice-500: #6d8f9e;
  --color-breaking-the-ice-600: #537382;
  --color-breaking-the-ice-700: #3d5b68;
  --color-breaking-the-ice-800: #2d4652;
  --color-breaking-the-ice-900: #203640;
  --color-breaking-the-ice-950: #122229;
  --color-twilight-zone: #121c15;
  --color-twilight-zone-50: #f0f7f2;
  --color-twilight-zone-100: #e5eee7;
  --color-twilight-zone-200: #d0dad3;
  --color-twilight-zone-300: #b9c4bc;
  --color-twilight-zone-400: #99a59c;
  --color-twilight-zone-500: #7c897f;
  --color-twilight-zone-600: #616d64;
  --color-twilight-zone-700: #4a554d;
  --color-twilight-zone-800: #37403a;
  --color-twilight-zone-900: #28302a;
  --color-twilight-zone-950: #121c15;
  --color-treasure-map-waters: #6b8ba6;
  --color-treasure-map-waters-50: #edf7ff;
  --color-treasure-map-waters-100: #dbeeff;
  --color-treasure-map-waters-200: #c2dcf1;
  --color-treasure-map-waters-300: #a9c5de;
  --color-treasure-map-waters-400: #87a6c1;
  --color-treasure-map-waters-500: #6b8ba6;
  --color-treasure-map-waters-600: #52708a;
  --color-treasure-map-waters-700: #3d5970;
  --color-treasure-map-waters-800: #2d455a;
  --color-treasure-map-waters-900: #213546;
  --color-treasure-map-waters-950: #12212d;
  --color-espresso-bar: #594435;
  --color-espresso-bar-50: #fff2ea;
  --color-espresso-bar-100: #f8e8dc;
  --color-espresso-bar-200: #e7d3c6;
  --color-espresso-bar-300: #d3beaf;
  --color-espresso-bar-400: #b69f8f;
  --color-espresso-bar-500: #9c8574;
  --color-espresso-bar-600: #826b5c;
  --color-espresso-bar-700: #6b5648;
  --color-espresso-bar-800: #594435;
  --color-espresso-bar-900: #443429;
  --color-espresso-bar-950: #2c2018;
  --color-pastel-purple: #b59fb2;
  --color-pastel-purple-50: #fff3fd;
  --color-pastel-purple-100: #f7e9f5;
  --color-pastel-purple-200: #e6d5e4;
  --color-pastel-purple-300: #d2bfcf;
  --color-pastel-purple-400: #b59fb2;
  --color-pastel-purple-500: #988395;
  --color-pastel-purple-600: #7c6879;
  --color-pastel-purple-700: #635161;
  --color-pastel-purple-800: #4e3e4c;
  --color-pastel-purple-900: #3c2f3a;
  --color-pastel-purple-950: #251c24;
}

Similar palettes