Good Karma to Pine Scented Lagoon color palette

303F75Good Karma C7D7FFIcy Plains BDB77ASavannah Grass D94A71Feverish Passion 006D64Pine Scented Lagoon

Open in generator Export PNG, PDF, ASE…

About this palette

Good Karma to Pine Scented Lagoon is a 5-color cool, vintage palette: #303F75 (Good Karma), #C7D7FF (Icy Plains), #BDB77A (Savannah Grass), #D94A71 (Feverish Passion), #006D64 (Pine Scented Lagoon). It mixes blue, yellow, pink, turquoise tones and feels cool overall. The strongest text pairing is #303F75 on #C7D7FF with a contrast ratio of 6.97:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Good Karma	rgb(48, 63, 117)	hsl(227, 42%, 32%)
Icy Plains	rgb(199, 215, 255)	hsl(223, 100%, 89%)
Savannah Grass	rgb(189, 183, 122)	hsl(55, 34%, 61%)
Feverish Passion	rgb(217, 74, 113)	hsl(344, 65%, 57%)
Pine Scented Lagoon	rgb(0, 109, 100)	hsl(175, 100%, 21%)

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.97:1 Good#303F75 on #C7D7FF
Aa6.97:1 Good#C7D7FF on #303F75
Aa4.88:1 Good#303F75 on #BDB77A
Aa4.88:1 Good#BDB77A on #303F75
Aa4.33:1 Poor#C7D7FF on #006D64
Aa4.33:1 Poor#006D64 on #C7D7FF
Aa3.03:1 Poor#BDB77A on #006D64
Aa3.03:1 Poor#006D64 on #BDB77A

Color blindness preview

CSS variables

/* Good Karma to Pine Scented Lagoon — https://swatchly.xyz/palette/303f75-c7d7ff-bdb77a-d94a71-006d64 */
:root {
  --good-karma: #303f75;
  --icy-plains: #c7d7ff;
  --savannah-grass: #bdb77a;
  --feverish-passion: #d94a71;
  --pine-scented-lagoon: #006d64;
}

Tailwind CSS v4

/* Good Karma to Pine Scented Lagoon — https://swatchly.xyz/palette/303f75-c7d7ff-bdb77a-d94a71-006d64 */
@theme {
  --color-good-karma: #303f75;
  --color-good-karma-50: #f1f5ff;
  --color-good-karma-100: #e3ebff;
  --color-good-karma-200: #c8d6ff;
  --color-good-karma-300: #adbff6;
  --color-good-karma-400: #8c9fdb;
  --color-good-karma-500: #7084c0;
  --color-good-karma-600: #5769a2;
  --color-good-karma-700: #435387;
  --color-good-karma-800: #303f75;
  --color-good-karma-900: #263157;
  --color-good-karma-950: #161e39;
  --color-icy-plains: #c7d7ff;
  --color-icy-plains-50: #f1f5ff;
  --color-icy-plains-100: #e3ebff;
  --color-icy-plains-200: #c7d7ff;
  --color-icy-plains-300: #b3c1e2;
  --color-icy-plains-400: #92a1c5;
  --color-icy-plains-500: #7785aa;
  --color-icy-plains-600: #5d6b8e;
  --color-icy-plains-700: #485474;
  --color-icy-plains-800: #37415d;
  --color-icy-plains-900: #293249;
  --color-icy-plains-950: #181f2f;
  --color-savannah-grass: #bdb77a;
  --color-savannah-grass-50: #f4f1cc;
  --color-savannah-grass-100: #e8e5bb;
  --color-savannah-grass-200: #d4cf9f;
  --color-savannah-grass-300: #bdb77a;
  --color-savannah-grass-400: #a09a5f;
  --color-savannah-grass-500: #878145;
  --color-savannah-grass-600: #6e682f;
  --color-savannah-grass-700: #59531e;
  --color-savannah-grass-800: #474211;
  --color-savannah-grass-900: #383409;
  --color-savannah-grass-950: #232003;
  --color-feverish-passion: #d94a71;
  --color-feverish-passion-50: #fff1f3;
  --color-feverish-passion-100: #ffe2e7;
  --color-feverish-passion-200: #ffc5cf;
  --color-feverish-passion-300: #ffa1b3;
  --color-feverish-passion-400: #f76b8d;
  --color-feverish-passion-500: #d94a71;
  --color-feverish-passion-600: #b82d58;
  --color-feverish-passion-700: #991443;
  --color-feverish-passion-800: #7d0133;
  --color-feverish-passion-900: #620026;
  --color-feverish-passion-950: #410017;
  --color-pine-scented-lagoon: #006d64;
  --color-pine-scented-lagoon-50: #d7fff9;
  --color-pine-scented-lagoon-100: #c5f7f0;
  --color-pine-scented-lagoon-200: #abe7de;
  --color-pine-scented-lagoon-300: #8ed4ca;
  --color-pine-scented-lagoon-400: #67b7ad;
  --color-pine-scented-lagoon-500: #479d93;
  --color-pine-scented-lagoon-600: #2a837a;
  --color-pine-scented-lagoon-700: #006d64;
  --color-pine-scented-lagoon-800: #00554e;
  --color-pine-scented-lagoon-900: #00423c;
  --color-pine-scented-lagoon-950: #002a26;
}