Prismarine to Golden Frame Color Palette

About this palette

Prismarine to Golden Frame is a 5-color vibrant, cool palette: #007A7D (Prismarine), #6E6AEF (Pan Purple), #00AF96 (Hobgoblin), #00C69B (Macau), #E5B100 (Golden Frame). It mixes turquoise, purple, yellow tones and feels cool overall. The strongest text pairing is #007A7D on #E5B100 with a contrast ratio of 2.60:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Prismarine	rgb(0, 122, 125)	hsl(181, 100%, 25%)
Pan Purple	rgb(110, 106, 239)	hsl(242, 81%, 68%)
Hobgoblin	rgb(0, 175, 150)	hsl(171, 100%, 34%)
Macau	rgb(0, 198, 155)	hsl(167, 100%, 39%)
Golden Frame	rgb(229, 177, 0)	hsl(46, 100%, 45%)

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.

Color blindness preview

CSS variables

/* Prismarine to Golden Frame — https://swatchly.xyz/palette/007a7d-6e6aef-00af96-00c69b-e5b100 */
:root {
  --prismarine: #007a7d;
  --pan-purple: #6e6aef;
  --hobgoblin: #00af96;
  --macau: #00c69b;
  --golden-frame: #e5b100;
}

Tailwind CSS v4

/* Prismarine to Golden Frame — https://swatchly.xyz/palette/007a7d-6e6aef-00af96-00c69b-e5b100 */
@theme {
  --color-prismarine: #007a7d;
  --color-prismarine-50: #d6feff;
  --color-prismarine-100: #c0f7f8;
  --color-prismarine-200: #a3e5e7;
  --color-prismarine-300: #82d0d2;
  --color-prismarine-400: #57b1b4;
  --color-prismarine-500: #339598;
  --color-prismarine-600: #007a7d;
  --color-prismarine-700: #006163;
  --color-prismarine-800: #004c4e;
  --color-prismarine-900: #003b3c;
  --color-prismarine-950: #002526;
  --color-pan-purple: #6e6aef;
  --color-pan-purple-50: #f1f3ff;
  --color-pan-purple-100: #e4e7ff;
  --color-pan-purple-200: #cbd0ff;
  --color-pan-purple-300: #afb5ff;
  --color-pan-purple-400: #8a8dff;
  --color-pan-purple-500: #6e6aef;
  --color-pan-purple-600: #5750ce;
  --color-pan-purple-700: #453aae;
  --color-pan-purple-800: #352a90;
  --color-pan-purple-900: #291e75;
  --color-pan-purple-950: #191050;
  --color-hobgoblin: #00af96;
  --color-hobgoblin-50: #c7fff1;
  --color-hobgoblin-100: #a9f8e5;
  --color-hobgoblin-200: #84e5cf;
  --color-hobgoblin-300: #5bcfb7;
  --color-hobgoblin-400: #00af96;
  --color-hobgoblin-500: #00927d;
  --color-hobgoblin-600: #007665;
  --color-hobgoblin-700: #005e50;
  --color-hobgoblin-800: #004b3f;
  --color-hobgoblin-900: #003b31;
  --color-hobgoblin-950: #00261f;
  --color-macau: #00c69b;
  --color-macau-50: #e5fff5;
  --color-macau-100: #c2ffe8;
  --color-macau-200: #93f4d2;
  --color-macau-300: #6ce1bc;
  --color-macau-400: #00c69b;
  --color-macau-500: #00a580;
  --color-macau-600: #008467;
  --color-macau-700: #006951;
  --color-macau-800: #00513e;
  --color-macau-900: #003e2f;
  --color-macau-950: #00261c;
  --color-golden-frame: #e5b100;
  --color-golden-frame-50: #fff0cd;
  --color-golden-frame-100: #ffe3a2;
  --color-golden-frame-200: #f4cc6a;
  --color-golden-frame-300: #e5b100;
  --color-golden-frame-400: #c09400;
  --color-golden-frame-500: #a17b00;
  --color-golden-frame-600: #826300;
  --color-golden-frame-700: #684f00;
  --color-golden-frame-800: #533e00;
  --color-golden-frame-900: #413000;
  --color-golden-frame-950: #291d00;
}