Kelp to Icy Plains Color Palette

About this palette

Kelp to Icy Plains is a 5-color muted, cool, vintage, gradient palette: #52523B (Kelp), #477D96 (Cry Me a River), #9B8173 (Hemp), #8ABBC9 (Juvie), #DEDBFA (Icy Plains). It mixes brown, blue, orange, purple tones and feels cool overall. The strongest text pairing is #52523B on #DEDBFA with a contrast ratio of 5.94:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Kelp	rgb(82, 82, 59)	hsl(60, 16%, 28%)
Cry Me a River	rgb(71, 125, 150)	hsl(199, 36%, 43%)
Hemp	rgb(155, 129, 115)	hsl(21, 17%, 53%)
Juvie	rgb(138, 187, 201)	hsl(193, 37%, 66%)
Icy Plains	rgb(222, 219, 250)	hsl(246, 76%, 92%)

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.94:1 Good#52523B on #DEDBFA
Aa5.94:1 Good#DEDBFA on #52523B
Aa3.82:1 Poor#52523B on #8ABBC9
Aa3.82:1 Poor#8ABBC9 on #52523B
Aa3.36:1 Poor#477D96 on #DEDBFA
Aa3.36:1 Poor#DEDBFA on #477D96

Color blindness preview

CSS variables

/* Kelp to Icy Plains — https://swatchly.xyz/palette/52523b-477d96-9b8173-8abbc9-dedbfa */
:root {
  --kelp: #52523b;
  --cry-me-a-river: #477d96;
  --hemp: #9b8173;
  --juvie: #8abbc9;
  --icy-plains: #dedbfa;
}

Tailwind CSS v4

/* Kelp to Icy Plains — https://swatchly.xyz/palette/52523b-477d96-9b8173-8abbc9-dedbfa */
@theme {
  --color-kelp: #52523b;
  --color-kelp-50: #f6f6e7;
  --color-kelp-100: #eceddc;
  --color-kelp-200: #d8d8c4;
  --color-kelp-300: #c0c1aa;
  --color-kelp-400: #a0a188;
  --color-kelp-500: #84856c;
  --color-kelp-600: #696952;
  --color-kelp-700: #52523b;
  --color-kelp-800: #40402e;
  --color-kelp-900: #313122;
  --color-kelp-950: #1e1e13;
  --color-cry-me-a-river: #477d96;
  --color-cry-me-a-river-50: #eaf8ff;
  --color-cry-me-a-river-100: #d8f2ff;
  --color-cry-me-a-river-200: #bae2f6;
  --color-cry-me-a-river-300: #a0cee4;
  --color-cry-me-a-river-400: #7db1c9;
  --color-cry-me-a-river-500: #6197b0;
  --color-cry-me-a-river-600: #477d96;
  --color-cry-me-a-river-700: #31647b;
  --color-cry-me-a-river-800: #204e62;
  --color-cry-me-a-river-900: #143c4d;
  --color-cry-me-a-river-950: #082532;
  --color-hemp: #9b8173;
  --color-hemp-50: #fff2ec;
  --color-hemp-100: #f9e7de;
  --color-hemp-200: #e8d3c8;
  --color-hemp-300: #d4bcaf;
  --color-hemp-400: #b69c8e;
  --color-hemp-500: #9b8173;
  --color-hemp-600: #7f6759;
  --color-hemp-700: #675044;
  --color-hemp-800: #513e34;
  --color-hemp-900: #3f2f26;
  --color-hemp-950: #281c16;
  --color-juvie: #8abbc9;
  --color-juvie-50: #d5f3fc;
  --color-juvie-100: #c6e7f1;
  --color-juvie-200: #abd2de;
  --color-juvie-300: #8abbc9;
  --color-juvie-400: #6f9eab;
  --color-juvie-500: #568592;
  --color-juvie-600: #3f6d79;
  --color-juvie-700: #2e5863;
  --color-juvie-800: #214650;
  --color-juvie-900: #173841;
  --color-juvie-950: #0b2329;
  --color-icy-plains: #dedbfa;
  --color-icy-plains-50: #fafaff;
  --color-icy-plains-100: #f1f0ff;
  --color-icy-plains-200: #dedbfa;
  --color-icy-plains-300: #c6c4dd;
  --color-icy-plains-400: #a5a3be;
  --color-icy-plains-500: #8986a2;
  --color-icy-plains-600: #6d6a85;
  --color-icy-plains-700: #56536b;
  --color-icy-plains-800: #423f54;
  --color-icy-plains-900: #323042;
  --color-icy-plains-950: #1f1d2a;
}