Futon to Rich Black Color Palette

About this palette

Futon to Rich Black is a 4-color cool, gradient palette: #E8FFDE (Futon), #9ABB93 (Norway), #007D6D (Wizards Orb), #003E41 (Rich Black). It mixes white, green, turquoise tones and feels cool overall. The strongest text pairing is #E8FFDE on #003E41 with a contrast ratio of 11.21:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Futon	rgb(232, 255, 222)	hsl(102, 100%, 94%)
Norway	rgb(154, 187, 147)	hsl(110, 23%, 65%)
Wizards Orb	rgb(0, 125, 109)	hsl(172, 100%, 25%)
Rich Black	rgb(0, 62, 65)	hsl(183, 100%, 13%)

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.

Aa11.21:1 Very good#E8FFDE on #003E41
Aa11.21:1 Very good#003E41 on #E8FFDE
Aa5.61:1 Good#9ABB93 on #003E41
Aa5.61:1 Good#003E41 on #9ABB93
Aa4.76:1 Good#E8FFDE on #007D6D
Aa4.76:1 Good#007D6D on #E8FFDE

Color blindness preview

CSS variables

/* Futon to Rich Black — https://swatchly.xyz/palette/e8ffde-9abb93-007d6d-003e41 */
:root {
  --futon: #e8ffde;
  --norway: #9abb93;
  --wizards-orb: #007d6d;
  --rich-black: #003e41;
}

Tailwind CSS v4

/* Futon to Rich Black — https://swatchly.xyz/palette/e8ffde-9abb93-007d6d-003e41 */
@theme {
  --color-futon: #e8ffde;
  --color-futon-50: #e8ffde;
  --color-futon-100: #e4f1de;
  --color-futon-200: #cedec7;
  --color-futon-300: #b6c8ae;
  --color-futon-400: #95a98c;
  --color-futon-500: #798e70;
  --color-futon-600: #5f7356;
  --color-futon-700: #4a5b42;
  --color-futon-800: #384831;
  --color-futon-900: #2a3724;
  --color-futon-950: #192215;
  --color-norway: #9abb93;
  --color-norway-50: #f2ffef;
  --color-norway-100: #e6fae2;
  --color-norway-200: #d2eacd;
  --color-norway-300: #bcd7b6;
  --color-norway-400: #9abb93;
  --color-norway-500: #7d9c76;
  --color-norway-600: #607f59;
  --color-norway-700: #486543;
  --color-norway-800: #364e30;
  --color-norway-900: #273b22;
  --color-norway-950: #152412;
  --color-wizards-orb: #007d6d;
  --color-wizards-orb-50: #d8fff6;
  --color-wizards-orb-100: #c1f9ec;
  --color-wizards-orb-200: #a3e7d9;
  --color-wizards-orb-300: #83d2c2;
  --color-wizards-orb-400: #58b4a3;
  --color-wizards-orb-500: #339887;
  --color-wizards-orb-600: #007d6d;
  --color-wizards-orb-700: #006356;
  --color-wizards-orb-800: #004e43;
  --color-wizards-orb-900: #003c34;
  --color-wizards-orb-950: #002620;
  --color-rich-black: #003e41;
  --color-rich-black-50: #defcfd;
  --color-rich-black-100: #d1f3f4;
  --color-rich-black-200: #b8e0e2;
  --color-rich-black-300: #9dcbcd;
  --color-rich-black-400: #7aadaf;
  --color-rich-black-500: #5d9295;
  --color-rich-black-600: #44777a;
  --color-rich-black-700: #306063;
  --color-rich-black-800: #214d4f;
  --color-rich-black-900: #003e41;
  --color-rich-black-950: #0a2628;
}