Holographic Lavender to Heavy Green Color Palette

About this palette

Holographic Lavender to Heavy Green is a 4-color muted palette: #F1E5F6 (Holographic Lavender), #9DB4BC (Shallow Sea), #261C19 (Dark Orchestra), #41593F (Heavy Green). It mixes white, gray, green tones and feels cool overall. The strongest text pairing is #F1E5F6 on #261C19 with a contrast ratio of 13.69:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Holographic Lavender	rgb(241, 229, 246)	hsl(282, 49%, 93%)
Shallow Sea	rgb(157, 180, 188)	hsl(195, 19%, 68%)
Dark Orchestra	rgb(38, 28, 25)	hsl(14, 21%, 12%)
Heavy Green	rgb(65, 89, 63)	hsl(115, 17%, 30%)

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.

Aa13.69:1 Super#F1E5F6 on #261C19
Aa13.69:1 Super#261C19 on #F1E5F6
Aa7.67:1 Very good#9DB4BC on #261C19
Aa7.67:1 Very good#261C19 on #9DB4BC
Aa6.34:1 Good#F1E5F6 on #41593F
Aa6.34:1 Good#41593F on #F1E5F6
Aa3.55:1 Poor#9DB4BC on #41593F
Aa3.55:1 Poor#41593F on #9DB4BC

Color blindness preview

CSS variables

/* Holographic Lavender to Heavy Green — https://swatchly.xyz/palette/f1e5f6-9db4bc-261c19-41593f */
:root {
  --holographic-lavender: #f1e5f6;
  --shallow-sea: #9db4bc;
  --dark-orchestra: #261c19;
  --heavy-green: #41593f;
}

Tailwind CSS v4

/* Holographic Lavender to Heavy Green — https://swatchly.xyz/palette/f1e5f6-9db4bc-261c19-41593f */
@theme {
  --color-holographic-lavender: #f1e5f6;
  --color-holographic-lavender-50: #f8f1fb;
  --color-holographic-lavender-100: #f1e5f6;
  --color-holographic-lavender-200: #dcd3df;
  --color-holographic-lavender-300: #c6bcca;
  --color-holographic-lavender-400: #a79cac;
  --color-holographic-lavender-500: #8c8191;
  --color-holographic-lavender-600: #726776;
  --color-holographic-lavender-700: #5b515e;
  --color-holographic-lavender-800: #473f4a;
  --color-holographic-lavender-900: #37303a;
  --color-holographic-lavender-950: #221d24;
  --color-shallow-sea: #9db4bc;
  --color-shallow-sea-50: #f3fcff;
  --color-shallow-sea-100: #e8f5fa;
  --color-shallow-sea-200: #d4e5ea;
  --color-shallow-sea-300: #bed1d7;
  --color-shallow-sea-400: #9db4bc;
  --color-shallow-sea-500: #80969d;
  --color-shallow-sea-600: #637980;
  --color-shallow-sea-700: #4b5f66;
  --color-shallow-sea-800: #384a4f;
  --color-shallow-sea-900: #29373c;
  --color-shallow-sea-950: #172125;
  --color-dark-orchestra: #261c19;
  --color-dark-orchestra-50: #fbf3f1;
  --color-dark-orchestra-100: #f2e9e6;
  --color-dark-orchestra-200: #dfd5d2;
  --color-dark-orchestra-300: #cabeba;
  --color-dark-orchestra-400: #ab9e9a;
  --color-dark-orchestra-500: #90837f;
  --color-dark-orchestra-600: #756865;
  --color-dark-orchestra-700: #5d524f;
  --color-dark-orchestra-800: #493f3d;
  --color-dark-orchestra-900: #38302e;
  --color-dark-orchestra-950: #261c19;
  --color-heavy-green: #41593f;
  --color-heavy-green-50: #ebfae9;
  --color-heavy-green-100: #e0f1de;
  --color-heavy-green-200: #c9dec7;
  --color-heavy-green-300: #b0c7ad;
  --color-heavy-green-400: #8ea88c;
  --color-heavy-green-500: #728c70;
  --color-heavy-green-600: #587056;
  --color-heavy-green-700: #41593f;
  --color-heavy-green-800: #324531;
  --color-heavy-green-900: #263524;
  --color-heavy-green-950: #162115;
}