Kelp to Creamy Berry Color Palette

About this palette

Kelp to Creamy Berry is a 5-color muted, cool palette: #564E3D (Kelp), #8E9EB6 (Moon Veil), #5E897E (Aloe Vera), #2E384F (Mediaeval Blue), #DCC0D3 (Creamy Berry). It mixes gray, blue, turquoise, pink tones and feels cool overall. The strongest text pairing is #2E384F on #DCC0D3 with a contrast ratio of 6.98:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Kelp	rgb(86, 78, 61)	hsl(41, 17%, 29%)
Moon Veil	rgb(142, 158, 182)	hsl(216, 22%, 64%)
Aloe Vera	rgb(94, 137, 126)	hsl(165, 19%, 45%)
Mediaeval Blue	rgb(46, 56, 79)	hsl(222, 26%, 25%)
Creamy Berry	rgb(220, 192, 211)	hsl(319, 29%, 81%)

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.

Aa6.98:1 Good#2E384F on #DCC0D3
Aa6.98:1 Good#DCC0D3 on #2E384F
Aa4.91:1 Good#564E3D on #DCC0D3
Aa4.91:1 Good#DCC0D3 on #564E3D
Aa4.30:1 Poor#8E9EB6 on #2E384F
Aa4.30:1 Poor#2E384F on #8E9EB6
Aa3.02:1 Poor#564E3D on #8E9EB6
Aa3.02:1 Poor#8E9EB6 on #564E3D

Color blindness preview

CSS variables

/* Kelp to Creamy Berry — https://swatchly.xyz/palette/564e3d-8e9eb6-5e897e-2e384f-dcc0d3 */
:root {
  --kelp: #564e3d;
  --moon-veil: #8e9eb6;
  --aloe-vera: #5e897e;
  --mediaeval-blue: #2e384f;
  --creamy-berry: #dcc0d3;
}

Tailwind CSS v4

/* Kelp to Creamy Berry — https://swatchly.xyz/palette/564e3d-8e9eb6-5e897e-2e384f-dcc0d3 */
@theme {
  --color-kelp: #564e3d;
  --color-kelp-50: #faf5e9;
  --color-kelp-100: #f0ebde;
  --color-kelp-200: #ddd6c7;
  --color-kelp-300: #c6bead;
  --color-kelp-400: #a69d8b;
  --color-kelp-500: #89816e;
  --color-kelp-600: #6d6554;
  --color-kelp-700: #564e3d;
  --color-kelp-800: #433d2f;
  --color-kelp-900: #342e23;
  --color-kelp-950: #201c14;
  --color-moon-veil: #8e9eb6;
  --color-moon-veil-50: #edf4ff;
  --color-moon-veil-100: #dfeafa;
  --color-moon-veil-200: #c8d5e9;
  --color-moon-veil-300: #b0bed4;
  --color-moon-veil-400: #8e9eb6;
  --color-moon-veil-500: #74839b;
  --color-moon-veil-600: #5b6a80;
  --color-moon-veil-700: #475468;
  --color-moon-veil-800: #364253;
  --color-moon-veil-900: #293341;
  --color-moon-veil-950: #19202a;
  --color-aloe-vera: #5e897e;
  --color-aloe-vera-50: #e1faf3;
  --color-aloe-vera-100: #d3f0e8;
  --color-aloe-vera-200: #badcd3;
  --color-aloe-vera-300: #9ec5bb;
  --color-aloe-vera-400: #7ba69a;
  --color-aloe-vera-500: #5e897e;
  --color-aloe-vera-600: #466f65;
  --color-aloe-vera-700: #345950;
  --color-aloe-vera-800: #25463f;
  --color-aloe-vera-900: #1b3730;
  --color-aloe-vera-950: #0e231e;
  --color-mediaeval-blue: #2e384f;
  --color-mediaeval-blue-50: #f1f5ff;
  --color-mediaeval-blue-100: #e3ebfe;
  --color-mediaeval-blue-200: #ced8ed;
  --color-mediaeval-blue-300: #b6c1d9;
  --color-mediaeval-blue-400: #97a3bd;
  --color-mediaeval-blue-500: #7c88a3;
  --color-mediaeval-blue-600: #636f88;
  --color-mediaeval-blue-700: #4f5970;
  --color-mediaeval-blue-800: #3e475c;
  --color-mediaeval-blue-900: #2e384f;
  --color-mediaeval-blue-950: #1e2331;
  --color-creamy-berry: #dcc0d3;
  --color-creamy-berry-50: #fff7fc;
  --color-creamy-berry-100: #fcebf7;
  --color-creamy-berry-200: #ecd8e6;
  --color-creamy-berry-300: #dcc0d3;
  --color-creamy-berry-400: #b9a0b1;
  --color-creamy-berry-500: #9c8394;
  --color-creamy-berry-600: #806778;
  --color-creamy-berry-700: #66505f;
  --color-creamy-berry-800: #503d4a;
  --color-creamy-berry-900: #3d2d38;
  --color-creamy-berry-950: #271b23;
}