Royal Fig to Olive Tree Color Palette

About this palette

Royal Fig to Olive Tree is a 4-color muted, vintage palette: #795D6A (Royal Fig), #B7DAE7 (Sleepless Blue), #283C41 (Tempest in a Teapot), #A5A981 (Olive Tree). It mixes red, blue, gray, green tones and feels warm overall. The strongest text pairing is #B7DAE7 on #283C41 with a contrast ratio of 7.83:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Royal Fig	rgb(121, 93, 106)	hsl(332, 13%, 42%)
Sleepless Blue	rgb(183, 218, 231)	hsl(196, 50%, 81%)
Tempest in a Teapot	rgb(40, 60, 65)	hsl(192, 24%, 21%)
Olive Tree	rgb(165, 169, 129)	hsl(66, 19%, 58%)

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.

Aa7.83:1 Very good#B7DAE7 on #283C41
Aa7.83:1 Very good#283C41 on #B7DAE7
Aa4.74:1 Good#283C41 on #A5A981
Aa4.74:1 Good#A5A981 on #283C41
Aa3.96:1 Poor#795D6A on #B7DAE7
Aa3.96:1 Poor#B7DAE7 on #795D6A

Color blindness preview

CSS variables

/* Royal Fig to Olive Tree — https://swatchly.xyz/palette/795d6a-b7dae7-283c41-a5a981 */
:root {
  --royal-fig: #795d6a;
  --sleepless-blue: #b7dae7;
  --tempest-in-a-teapot: #283c41;
  --olive-tree: #a5a981;
}

Tailwind CSS v4

/* Royal Fig to Olive Tree — https://swatchly.xyz/palette/795d6a-b7dae7-283c41-a5a981 */
@theme {
  --color-royal-fig: #795d6a;
  --color-royal-fig-50: #fff1f7;
  --color-royal-fig-100: #f8e4ed;
  --color-royal-fig-200: #e6ced9;
  --color-royal-fig-300: #d1b5c1;
  --color-royal-fig-400: #b294a1;
  --color-royal-fig-500: #957885;
  --color-royal-fig-600: #795d6a;
  --color-royal-fig-700: #614954;
  --color-royal-fig-800: #4d3842;
  --color-royal-fig-900: #3c2a33;
  --color-royal-fig-950: #26191f;
  --color-sleepless-blue: #b7dae7;
  --color-sleepless-blue-50: #e2f6fe;
  --color-sleepless-blue-100: #d6ecf5;
  --color-sleepless-blue-200: #b7dae7;
  --color-sleepless-blue-300: #a5c3ce;
  --color-sleepless-blue-400: #85a5b1;
  --color-sleepless-blue-500: #698a96;
  --color-sleepless-blue-600: #51707c;
  --color-sleepless-blue-700: #3d5a64;
  --color-sleepless-blue-800: #2d4750;
  --color-sleepless-blue-900: #21363e;
  --color-sleepless-blue-950: #122227;
  --color-tempest-in-a-teapot: #283c41;
  --color-tempest-in-a-teapot-50: #ebf8fb;
  --color-tempest-in-a-teapot-100: #dfeef2;
  --color-tempest-in-a-teapot-200: #cadbe0;
  --color-tempest-in-a-teapot-300: #b1c5ca;
  --color-tempest-in-a-teapot-400: #91a7ad;
  --color-tempest-in-a-teapot-500: #778d92;
  --color-tempest-in-a-teapot-600: #5e7379;
  --color-tempest-in-a-teapot-700: #495d62;
  --color-tempest-in-a-teapot-800: #394a4f;
  --color-tempest-in-a-teapot-900: #283c41;
  --color-tempest-in-a-teapot-950: #1a2628;
  --color-olive-tree: #a5a981;
  --color-olive-tree-50: #f6f9e2;
  --color-olive-tree-100: #edf0d6;
  --color-olive-tree-200: #daddbf;
  --color-olive-tree-300: #c4c7a5;
  --color-olive-tree-400: #a5a981;
  --color-olive-tree-500: #898d66;
  --color-olive-tree-600: #6e714c;
  --color-olive-tree-700: #575a38;
  --color-olive-tree-800: #444628;
  --color-olive-tree-900: #34361c;
  --color-olive-tree-950: #1f210f;
}