Salty Ice to Black Power Color Palette

About this palette

Salty Ice to Black Power is a 5-color muted, earthy, vintage, gradient palette: #C6E0F1 (Salty Ice), #B4B6CE (Ethereal Mist), #838C65 (Crispy Crunch), #8A654F (Mocha Delight), #664A33 (Black Power). It mixes blue, gray, green, brown tones and feels balanced overall. The strongest text pairing is #C6E0F1 on #664A33 with a contrast ratio of 5.92:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Salty Ice	rgb(198, 224, 241)	hsl(204, 61%, 86%)
Ethereal Mist	rgb(180, 182, 206)	hsl(235, 21%, 76%)
Crispy Crunch	rgb(131, 140, 101)	hsl(74, 16%, 47%)
Mocha Delight	rgb(138, 101, 79)	hsl(22, 27%, 43%)
Black Power	rgb(102, 74, 51)	hsl(27, 33%, 30%)

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.

Aa5.92:1 Good#C6E0F1 on #664A33
Aa5.92:1 Good#664A33 on #C6E0F1
Aa4.06:1 Poor#B4B6CE on #664A33
Aa4.06:1 Poor#664A33 on #B4B6CE
Aa3.78:1 Poor#C6E0F1 on #8A654F
Aa3.78:1 Poor#8A654F on #C6E0F1

Color blindness preview

CSS variables

/* Salty Ice to Black Power — https://swatchly.xyz/palette/c6e0f1-b4b6ce-838c65-8a654f-664a33 */
:root {
  --salty-ice: #c6e0f1;
  --ethereal-mist: #b4b6ce;
  --crispy-crunch: #838c65;
  --mocha-delight: #8a654f;
  --black-power: #664a33;
}

Tailwind CSS v4

/* Salty Ice to Black Power — https://swatchly.xyz/palette/c6e0f1-b4b6ce-838c65-8a654f-664a33 */
@theme {
  --color-salty-ice: #c6e0f1;
  --color-salty-ice-50: #f1f9ff;
  --color-salty-ice-100: #e2f1fc;
  --color-salty-ice-200: #c6e0f1;
  --color-salty-ice-300: #b3c8d6;
  --color-salty-ice-400: #90a8b7;
  --color-salty-ice-500: #748c9b;
  --color-salty-ice-600: #5a717f;
  --color-salty-ice-700: #445966;
  --color-salty-ice-800: #334551;
  --color-salty-ice-900: #26353f;
  --color-salty-ice-950: #162128;
  --color-ethereal-mist: #b4b6ce;
  --color-ethereal-mist-50: #eeeffe;
  --color-ethereal-mist-100: #e2e4f4;
  --color-ethereal-mist-200: #cdcee2;
  --color-ethereal-mist-300: #b4b6ce;
  --color-ethereal-mist-400: #9798af;
  --color-ethereal-mist-500: #7d7f95;
  --color-ethereal-mist-600: #64667b;
  --color-ethereal-mist-700: #505164;
  --color-ethereal-mist-800: #3e4050;
  --color-ethereal-mist-900: #303140;
  --color-ethereal-mist-950: #1e1e28;
  --color-crispy-crunch: #838c65;
  --color-crispy-crunch-50: #f3f9e1;
  --color-crispy-crunch-100: #e9efd5;
  --color-crispy-crunch-200: #d5dcbd;
  --color-crispy-crunch-300: #bec6a3;
  --color-crispy-crunch-400: #9ea781;
  --color-crispy-crunch-500: #838c65;
  --color-crispy-crunch-600: #69714c;
  --color-crispy-crunch-700: #525a38;
  --color-crispy-crunch-800: #404629;
  --color-crispy-crunch-900: #31361d;
  --color-crispy-crunch-950: #1e220f;
  --color-mocha-delight: #8a654f;
  --color-mocha-delight-50: #fff2eb;
  --color-mocha-delight-100: #ffe6d8;
  --color-mocha-delight-200: #f0d1bf;
  --color-mocha-delight-300: #ddbaa6;
  --color-mocha-delight-400: #c09a84;
  --color-mocha-delight-500: #a57f68;
  --color-mocha-delight-600: #8a654f;
  --color-mocha-delight-700: #704f3b;
  --color-mocha-delight-800: #593c2b;
  --color-mocha-delight-900: #462e1f;
  --color-mocha-delight-950: #2d1b11;
  --color-black-power: #664a33;
  --color-black-power-50: #fff3e9;
  --color-black-power-100: #fce7d6;
  --color-black-power-200: #ead1be;
  --color-black-power-300: #d5b9a3;
  --color-black-power-400: #b79880;
  --color-black-power-500: #9b7c64;
  --color-black-power-600: #7e614a;
  --color-black-power-700: #664a33;
  --color-black-power-800: #4f3927;
  --color-black-power-900: #3e2c1c;
  --color-black-power-950: #271a0f;
}