Good Karma to Woven Color Palette

About this palette

Good Karma to Woven is a 5-color warm, earthy, vintage palette: #333E77 (Good Karma), #485894 (Piccadilly Purple), #9A8300 (Captain Kirk), #C0A86F (Gold Rush), #DCD598 (Woven). It mixes blue, yellow tones and feels warm overall. The strongest text pairing is #333E77 on #DCD598 with a contrast ratio of 6.69:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Good Karma	rgb(51, 62, 119)	hsl(230, 40%, 33%)
Piccadilly Purple	rgb(72, 88, 148)	hsl(227, 35%, 43%)
Captain Kirk	rgb(154, 131, 0)	hsl(51, 100%, 30%)
Gold Rush	rgb(192, 168, 111)	hsl(42, 39%, 59%)
Woven	rgb(220, 213, 152)	hsl(54, 49%, 73%)

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.69:1 Good#333E77 on #DCD598
Aa6.69:1 Good#DCD598 on #333E77
Aa4.52:1 Good#485894 on #DCD598
Aa4.52:1 Good#DCD598 on #485894
Aa4.33:1 Poor#333E77 on #C0A86F
Aa4.33:1 Poor#C0A86F on #333E77

Color blindness preview

CSS variables

/* Good Karma to Woven — https://swatchly.xyz/palette/333e77-485894-9a8300-c0a86f-dcd598 */
:root {
  --good-karma: #333e77;
  --piccadilly-purple: #485894;
  --captain-kirk: #9a8300;
  --gold-rush: #c0a86f;
  --woven: #dcd598;
}

Tailwind CSS v4

/* Good Karma to Woven — https://swatchly.xyz/palette/333e77-485894-9a8300-c0a86f-dcd598 */
@theme {
  --color-good-karma: #333e77;
  --color-good-karma-50: #f2f5ff;
  --color-good-karma-100: #e4eaff;
  --color-good-karma-200: #cad6ff;
  --color-good-karma-300: #afbef8;
  --color-good-karma-400: #8e9edd;
  --color-good-karma-500: #7383c2;
  --color-good-karma-600: #5a68a4;
  --color-good-karma-700: #465289;
  --color-good-karma-800: #333e77;
  --color-good-karma-900: #283059;
  --color-good-karma-950: #171d3b;
  --color-piccadilly-purple: #485894;
  --color-piccadilly-purple-50: #f1f5ff;
  --color-piccadilly-purple-100: #e4ebff;
  --color-piccadilly-purple-200: #cbd8ff;
  --color-piccadilly-purple-300: #afc1fb;
  --color-piccadilly-purple-400: #8fa2e1;
  --color-piccadilly-purple-500: #7588c7;
  --color-piccadilly-purple-600: #5d6eac;
  --color-piccadilly-purple-700: #485894;
  --color-piccadilly-purple-800: #374476;
  --color-piccadilly-purple-900: #29345e;
  --color-piccadilly-purple-950: #18203f;
  --color-captain-kirk: #9a8300;
  --color-captain-kirk-50: #fff6cc;
  --color-captain-kirk-100: #f9ebaf;
  --color-captain-kirk-200: #e8d78e;
  --color-captain-kirk-300: #d3c06a;
  --color-captain-kirk-400: #b59f3a;
  --color-captain-kirk-500: #9a8300;
  --color-captain-kirk-600: #7c6900;
  --color-captain-kirk-700: #635300;
  --color-captain-kirk-800: #4d4100;
  --color-captain-kirk-900: #3c3200;
  --color-captain-kirk-950: #261f00;
  --color-gold-rush: #c0a86f;
  --color-gold-rush-50: #fff8e7;
  --color-gold-rush-100: #fdefcd;
  --color-gold-rush-200: #eedcb4;
  --color-gold-rush-300: #dbc798;
  --color-gold-rush-400: #c0a86f;
  --color-gold-rush-500: #a28b53;
  --color-gold-rush-600: #856f37;
  --color-gold-rush-700: #6b5722;
  --color-gold-rush-800: #544212;
  --color-gold-rush-900: #413208;
  --color-gold-rush-950: #281e02;
  --color-woven: #dcd598;
  --color-woven-50: #f7f3d1;
  --color-woven-100: #ede9c2;
  --color-woven-200: #dcd598;
  --color-woven-300: #c5bf8b;
  --color-woven-400: #a7a068;
  --color-woven-500: #8d864b;
  --color-woven-600: #736c33;
  --color-woven-700: #5c5621;
  --color-woven-800: #494313;
  --color-woven-900: #39340a;
  --color-woven-950: #232003;
}