Digital Lavender to Pine Needle color palette

C4C0F4Digital Lavender 914416Otterly Brown D29276Ginger Scent 777EA4English Manor 274E3EPine Needle

About this palette

Digital Lavender to Pine Needle is a 5-color cool, vintage palette: #C4C0F4 (Digital Lavender), #914416 (Otterly Brown), #D29276 (Ginger Scent), #777EA4 (English Manor), #274E3E (Pine Needle). It mixes purple, brown, orange, turquoise tones and feels cool overall. The strongest text pairing is #C4C0F4 on #274E3E with a contrast ratio of 5.43:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Digital Lavender	rgb(196, 192, 244)	hsl(245, 70%, 85%)
Otterly Brown	rgb(145, 68, 22)	hsl(22, 74%, 33%)
Ginger Scent	rgb(210, 146, 118)	hsl(18, 51%, 64%)
English Manor	rgb(119, 126, 164)	hsl(231, 20%, 55%)
Pine Needle	rgb(39, 78, 62)	hsl(155, 33%, 23%)

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.

Aa5.43:1 Good#C4C0F4 on #274E3E
Aa5.43:1 Good#274E3E on #C4C0F4
Aa4.01:1 Poor#C4C0F4 on #914416
Aa4.01:1 Poor#914416 on #C4C0F4
Aa3.61:1 Poor#D29276 on #274E3E
Aa3.61:1 Poor#274E3E on #D29276

Color blindness preview

CSS variables

/* Digital Lavender to Pine Needle — https://swatchly.xyz/palette/c4c0f4-914416-d29276-777ea4-274e3e */
:root {
  --digital-lavender: #c4c0f4;
  --otterly-brown: #914416;
  --ginger-scent: #d29276;
  --english-manor: #777ea4;
  --pine-needle: #274e3e;
}

Tailwind CSS v4

/* Digital Lavender to Pine Needle — https://swatchly.xyz/palette/c4c0f4-914416-d29276-777ea4-274e3e */
@theme {
  --color-digital-lavender: #c4c0f4;
  --color-digital-lavender-50: #f8f7ff;
  --color-digital-lavender-100: #eeedff;
  --color-digital-lavender-200: #dad8fe;
  --color-digital-lavender-300: #c4c0f4;
  --color-digital-lavender-400: #a4a0d0;
  --color-digital-lavender-500: #8783b4;
  --color-digital-lavender-600: #6c6896;
  --color-digital-lavender-700: #55517b;
  --color-digital-lavender-800: #423e62;
  --color-digital-lavender-900: #322e4d;
  --color-digital-lavender-950: #1e1c32;
  --color-otterly-brown: #914416;
  --color-otterly-brown-50: #fff2ec;
  --color-otterly-brown-100: #ffe5d9;
  --color-otterly-brown-200: #ffcdb4;
  --color-otterly-brown-300: #fab08c;
  --color-otterly-brown-400: #e08f67;
  --color-otterly-brown-500: #c57449;
  --color-otterly-brown-600: #a95a30;
  --color-otterly-brown-700: #914416;
  --color-otterly-brown-800: #74330b;
  --color-otterly-brown-900: #5c2502;
  --color-otterly-brown-950: #3d1500;
  --color-ginger-scent: #d29276;
  --color-ginger-scent-50: #fff3ee;
  --color-ginger-scent-100: #ffe6dc;
  --color-ginger-scent-200: #feccb7;
  --color-ginger-scent-300: #ecb49c;
  --color-ginger-scent-400: #d29276;
  --color-ginger-scent-500: #b4765b;
  --color-ginger-scent-600: #965c42;
  --color-ginger-scent-700: #7b462f;
  --color-ginger-scent-800: #633520;
  --color-ginger-scent-900: #4e2715;
  --color-ginger-scent-950: #32170a;
  --color-english-manor: #777ea4;
  --color-english-manor-50: #f1f3ff;
  --color-english-manor-100: #e3e8ff;
  --color-english-manor-200: #ccd3f2;
  --color-english-manor-300: #b4bbde;
  --color-english-manor-400: #939ac0;
  --color-english-manor-500: #777ea4;
  --color-english-manor-600: #5e6588;
  --color-english-manor-700: #4a4f6f;
  --color-english-manor-800: #393e5a;
  --color-english-manor-900: #2b2f47;
  --color-english-manor-950: #1a1d2e;
  --color-pine-needle: #274e3e;
  --color-pine-needle-50: #e4fcf0;
  --color-pine-needle-100: #d8f3e6;
  --color-pine-needle-200: #c1e0d1;
  --color-pine-needle-300: #a7cbba;
  --color-pine-needle-400: #85ad9b;
  --color-pine-needle-500: #6a9280;
  --color-pine-needle-600: #507866;
  --color-pine-needle-700: #3c6051;
  --color-pine-needle-800: #274e3e;
  --color-pine-needle-900: #203b30;
  --color-pine-needle-950: #11261d;
}