Opera to Pine Needle Color Palette

About this palette

Opera to Pine Needle is a 5-color muted, vintage palette: #875F6C (Opera), #BCB997 (Green Tea), #857DA0 (Aster), #DFDDFD (Icy Plains), #364F45 (Pine Needle). It mixes red, yellow, purple, gray tones and feels balanced overall. The strongest text pairing is #DFDDFD on #364F45 with a contrast ratio of 6.73:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Opera	rgb(135, 95, 108)	hsl(340, 17%, 45%)
Green Tea	rgb(188, 185, 151)	hsl(55, 22%, 66%)
Aster	rgb(133, 125, 160)	hsl(254, 16%, 56%)
Icy Plains	rgb(223, 221, 253)	hsl(244, 89%, 93%)
Pine Needle	rgb(54, 79, 69)	hsl(156, 19%, 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.

Aa6.73:1 Good#DFDDFD on #364F45
Aa6.73:1 Good#364F45 on #DFDDFD
Aa4.46:1 Poor#BCB997 on #364F45
Aa4.46:1 Poor#364F45 on #BCB997
Aa4.09:1 Poor#875F6C on #DFDDFD
Aa4.09:1 Poor#DFDDFD on #875F6C

Color blindness preview

CSS variables

/* Opera to Pine Needle — https://swatchly.xyz/palette/875f6c-bcb997-857da0-dfddfd-364f45 */
:root {
  --opera: #875f6c;
  --green-tea: #bcb997;
  --aster: #857da0;
  --icy-plains: #dfddfd;
  --pine-needle: #364f45;
}

Tailwind CSS v4

/* Opera to Pine Needle — https://swatchly.xyz/palette/875f6c-bcb997-857da0-dfddfd-364f45 */
@theme {
  --color-opera: #875f6c;
  --color-opera-50: #fff1f5;
  --color-opera-100: #ffe3eb;
  --color-opera-200: #efcdd7;
  --color-opera-300: #dcb5c1;
  --color-opera-400: #be95a2;
  --color-opera-500: #a37986;
  --color-opera-600: #875f6c;
  --color-opera-700: #6d4a55;
  --color-opera-800: #573842;
  --color-opera-900: #442a33;
  --color-opera-950: #2c191f;
  --color-green-tea: #bcb997;
  --color-green-tea-50: #f3f1dd;
  --color-green-tea-100: #e8e6cf;
  --color-green-tea-200: #d3d1b6;
  --color-green-tea-300: #bcb997;
  --color-green-tea-400: #9e9b7b;
  --color-green-tea-500: #858261;
  --color-green-tea-600: #6c694a;
  --color-green-tea-700: #565438;
  --color-green-tea-800: #45422a;
  --color-green-tea-900: #36341f;
  --color-green-tea-950: #212011;
  --color-aster: #857da0;
  --color-aster-50: #f5f3ff;
  --color-aster-100: #ebe6ff;
  --color-aster-200: #d7d1ee;
  --color-aster-300: #c0b9da;
  --color-aster-400: #a199bc;
  --color-aster-500: #857da0;
  --color-aster-600: #6b6384;
  --color-aster-700: #554e6c;
  --color-aster-800: #433c56;
  --color-aster-900: #332e44;
  --color-aster-950: #201c2c;
  --color-icy-plains: #dfddfd;
  --color-icy-plains-50: #fbfbff;
  --color-icy-plains-100: #f2f2ff;
  --color-icy-plains-200: #dfddfd;
  --color-icy-plains-300: #c7c5df;
  --color-icy-plains-400: #a6a4c0;
  --color-icy-plains-500: #8987a4;
  --color-icy-plains-600: #6d6b87;
  --color-icy-plains-700: #55536c;
  --color-icy-plains-800: #413f55;
  --color-icy-plains-900: #323043;
  --color-icy-plains-950: #1f1d2b;
  --color-pine-needle: #364f45;
  --color-pine-needle-50: #eafaf3;
  --color-pine-needle-100: #def0e8;
  --color-pine-needle-200: #c8ddd4;
  --color-pine-needle-300: #b1c9be;
  --color-pine-needle-400: #91aba0;
  --color-pine-needle-500: #769186;
  --color-pine-needle-600: #5d776c;
  --color-pine-needle-700: #496157;
  --color-pine-needle-800: #364f45;
  --color-pine-needle-900: #2a3d35;
  --color-pine-needle-950: #192621;
}