Gentle Cold to Riverbed Color Palette

About this palette

Gentle Cold to Riverbed is a 4-color cool, monochromatic palette: #B7EDEE (Gentle Cold), #1A7B84 (Jade Jewel), #0D474C (Emerald Forest), #86BFBE (Riverbed). It mixes turquoise tones and feels cool overall. The strongest text pairing is #B7EDEE on #0D474C with a contrast ratio of 8.09:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Gentle Cold	rgb(183, 237, 238)	hsl(181, 62%, 83%)
Jade Jewel	rgb(26, 123, 132)	hsl(185, 67%, 31%)
Emerald Forest	rgb(13, 71, 76)	hsl(185, 71%, 17%)
Riverbed	rgb(134, 191, 190)	hsl(179, 31%, 64%)

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.

Aa8.09:1 Very good#B7EDEE on #0D474C
Aa8.09:1 Very good#0D474C on #B7EDEE
Aa5.05:1 Good#0D474C on #86BFBE
Aa5.05:1 Good#86BFBE on #0D474C
Aa3.89:1 Poor#B7EDEE on #1A7B84
Aa3.89:1 Poor#1A7B84 on #B7EDEE

Color blindness preview

CSS variables

/* Gentle Cold to Riverbed — https://swatchly.xyz/palette/b7edee-1a7b84-0d474c-86bfbe */
:root {
  --gentle-cold: #b7edee;
  --jade-jewel: #1a7b84;
  --emerald-forest: #0d474c;
  --riverbed: #86bfbe;
}

Tailwind CSS v4

/* Gentle Cold to Riverbed — https://swatchly.xyz/palette/b7edee-1a7b84-0d474c-86bfbe */
@theme {
  --color-gentle-cold: #b7edee;
  --color-gentle-cold-50: #f1ffff;
  --color-gentle-cold-100: #ddfafb;
  --color-gentle-cold-200: #b7edee;
  --color-gentle-cold-300: #a7d2d3;
  --color-gentle-cold-400: #81b2b3;
  --color-gentle-cold-500: #629596;
  --color-gentle-cold-600: #46797a;
  --color-gentle-cold-700: #316061;
  --color-gentle-cold-800: #214a4b;
  --color-gentle-cold-900: #16393a;
  --color-gentle-cold-950: #0a2424;
  --color-jade-jewel: #1a7b84;
  --color-jade-jewel-50: #defcff;
  --color-jade-jewel-100: #c3f6fc;
  --color-jade-jewel-200: #a7e5eb;
  --color-jade-jewel-300: #88d0d7;
  --color-jade-jewel-400: #5fb1ba;
  --color-jade-jewel-500: #3d969f;
  --color-jade-jewel-600: #1a7b84;
  --color-jade-jewel-700: #00626a;
  --color-jade-jewel-800: #004d53;
  --color-jade-jewel-900: #003b41;
  --color-jade-jewel-950: #002529;
  --color-emerald-forest: #0d474c;
  --color-emerald-forest-50: #defcff;
  --color-emerald-forest-100: #d1f3f6;
  --color-emerald-forest-200: #b8e0e4;
  --color-emerald-forest-300: #9ccace;
  --color-emerald-forest-400: #77aaaf;
  --color-emerald-forest-500: #598e93;
  --color-emerald-forest-600: #3f7377;
  --color-emerald-forest-700: #2b5a5f;
  --color-emerald-forest-800: #0d474c;
  --color-emerald-forest-900: #123639;
  --color-emerald-forest-950: #082124;
  --color-riverbed: #86bfbe;
  --color-riverbed-50: #d4f6f5;
  --color-riverbed-100: #c4eae9;
  --color-riverbed-200: #a8d6d5;
  --color-riverbed-300: #86bfbe;
  --color-riverbed-400: #6ba2a1;
  --color-riverbed-500: #518988;
  --color-riverbed-600: #3a706f;
  --color-riverbed-700: #295b5a;
  --color-riverbed-800: #1c4948;
  --color-riverbed-900: #123a3a;
  --color-riverbed-950: #082424;
}