Start generating

Royal Fig to Nordic Forest color palette

80546ARoyal Fig005140Cape VerdeF1B6C6Berries N’ Cream4BAE8FHole in OneFFF2F5Powder Puff0F766ANordic Forest
Open in generator Export PNG, PDF, ASE…

About this palette

Royal Fig to Nordic Forest is a 6-color palette: #80546A (Royal Fig), #005140 (Cape Verde), #F1B6C6 (Berries N’ Cream), #4BAE8F (Hole in One), #FFF2F5 (Powder Puff), #0F766A (Nordic Forest). It mixes red, turquoise, pink, white tones and feels cool overall. The strongest text pairing is #005140 on #FFF2F5 with a contrast ratio of 8.56:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Royal Figrgb(128, 84, 106)hsl(330, 21%, 42%)
Cape Verdergb(0, 81, 64)hsl(167, 100%, 16%)
Berries N’ Creamrgb(241, 182, 198)hsl(344, 68%, 83%)
Hole in Onergb(75, 174, 143)hsl(161, 40%, 49%)
Powder Puffrgb(255, 242, 245)hsl(346, 100%, 97%)
Nordic Forestrgb(15, 118, 106)hsl(173, 77%, 26%)

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.56:1 Very good#005140 on #FFF2F5
  • Aa8.56:1 Very good#FFF2F5 on #005140
  • Aa5.68:1 Good#80546A on #FFF2F5
  • Aa5.68:1 Good#FFF2F5 on #80546A
  • Aa5.44:1 Good#005140 on #F1B6C6
  • Aa5.44:1 Good#F1B6C6 on #005140
  • Aa5.05:1 Good#FFF2F5 on #0F766A
  • Aa5.05:1 Good#0F766A on #FFF2F5

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Royal Fig to Nordic Forest — https://swatchly.xyz/palette/80546a-005140-f1b6c6-4bae8f-fff2f5-0f766a */
:root {
  --royal-fig: #80546a;
  --cape-verde: #005140;
  --berries-n-cream: #f1b6c6;
  --hole-in-one: #4bae8f;
  --powder-puff: #fff2f5;
  --nordic-forest: #0f766a;
}

Tailwind CSS v4

/* Royal Fig to Nordic Forest — https://swatchly.xyz/palette/80546a-005140-f1b6c6-4bae8f-fff2f5-0f766a */
@theme {
  --color-royal-fig: #80546a;
  --color-royal-fig-50: #fff1f7;
  --color-royal-fig-100: #ffe0ee;
  --color-royal-fig-200: #efc8da;
  --color-royal-fig-300: #daaec3;
  --color-royal-fig-400: #bb8ca2;
  --color-royal-fig-500: #9d6f86;
  --color-royal-fig-600: #80546a;
  --color-royal-fig-700: #674154;
  --color-royal-fig-800: #523142;
  --color-royal-fig-900: #412533;
  --color-royal-fig-950: #2a1620;
  --color-cape-verde: #005140;
  --color-cape-verde-50: #dafff2;
  --color-cape-verde-100: #cdf6e8;
  --color-cape-verde-200: #b3e4d3;
  --color-cape-verde-300: #97cfbd;
  --color-cape-verde-400: #72b19d;
  --color-cape-verde-500: #549682;
  --color-cape-verde-600: #3a7b69;
  --color-cape-verde-700: #266453;
  --color-cape-verde-800: #005140;
  --color-cape-verde-900: #0c3e31;
  --color-cape-verde-950: #04271e;
  --color-berries-n-cream: #f1b6c6;
  --color-berries-n-cream-50: #fff7f9;
  --color-berries-n-cream-100: #ffeaf0;
  --color-berries-n-cream-200: #fcd1dc;
  --color-berries-n-cream-300: #f1b6c6;
  --color-berries-n-cream-400: #cc97a5;
  --color-berries-n-cream-500: #b07989;
  --color-berries-n-cream-600: #925e6d;
  --color-berries-n-cream-700: #764755;
  --color-berries-n-cream-800: #5e3542;
  --color-berries-n-cream-900: #492731;
  --color-berries-n-cream-950: #2f171e;
  --color-hole-in-one: #4bae8f;
  --color-hole-in-one-50: #ceffec;
  --color-hole-in-one-100: #baf6e0;
  --color-hole-in-one-200: #9be3c9;
  --color-hole-in-one-300: #7acdb0;
  --color-hole-in-one-400: #4bae8f;
  --color-hole-in-one-500: #2b9376;
  --color-hole-in-one-600: #00795d;
  --color-hole-in-one-700: #00614a;
  --color-hole-in-one-800: #004c3a;
  --color-hole-in-one-900: #003c2d;
  --color-hole-in-one-950: #00261c;
  --color-powder-puff: #fff2f5;
  --color-powder-puff-50: #fff2f5;
  --color-powder-puff-100: #f1e9eb;
  --color-powder-puff-200: #ded5d7;
  --color-powder-puff-300: #c9bec1;
  --color-powder-puff-400: #aa9ea1;
  --color-powder-puff-500: #8e8385;
  --color-powder-puff-600: #73686b;
  --color-powder-puff-700: #5c5255;
  --color-powder-puff-800: #484042;
  --color-powder-puff-900: #383132;
  --color-powder-puff-950: #231e1f;
  --color-nordic-forest: #0f766a;
  --color-nordic-forest-50: #d7fff7;
  --color-nordic-forest-100: #c2f7ed;
  --color-nordic-forest-200: #a5e4d9;
  --color-nordic-forest-300: #84cec2;
  --color-nordic-forest-400: #5aafa2;
  --color-nordic-forest-500: #389285;
  --color-nordic-forest-600: #0f766a;
  --color-nordic-forest-700: #005e54;
  --color-nordic-forest-800: #004a42;
  --color-nordic-forest-900: #003933;
  --color-nordic-forest-950: #00241f;
}

Similar palettes