Turquoise Pearl to Dark Sanctuary color palette

8AF1D5Turquoise Pearl E39F00Hot Butter B58400Arrowwood 0066BAWing Commander 00503BTropical Forest 4A002CDark Sanctuary

Open in generator Export PNG, PDF, ASE…

About this palette

Turquoise Pearl to Dark Sanctuary is a 6-color palette: #8AF1D5 (Turquoise Pearl), #E39F00 (Hot Butter), #B58400 (Arrowwood), #0066BA (Wing Commander), #00503B (Tropical Forest), #4A002C (Dark Sanctuary). It mixes turquoise, yellow, blue, red tones and feels balanced overall. The strongest text pairing is #8AF1D5 on #4A002C with a contrast ratio of 11.77:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Turquoise Pearl	rgb(138, 241, 213)	hsl(164, 79%, 74%)
Hot Butter	rgb(227, 159, 0)	hsl(42, 100%, 45%)
Arrowwood	rgb(181, 132, 0)	hsl(44, 100%, 35%)
Wing Commander	rgb(0, 102, 186)	hsl(207, 100%, 36%)
Tropical Forest	rgb(0, 80, 59)	hsl(164, 100%, 16%)
Dark Sanctuary	rgb(74, 0, 44)	hsl(324, 100%, 15%)

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.

Aa11.77:1 Very good#8AF1D5 on #4A002C
Aa11.77:1 Very good#4A002C on #8AF1D5
Aa7.07:1 Very good#8AF1D5 on #00503B
Aa7.07:1 Very good#00503B on #8AF1D5
Aa6.95:1 Good#E39F00 on #4A002C
Aa6.95:1 Good#4A002C on #E39F00
Aa4.72:1 Good#B58400 on #4A002C
Aa4.72:1 Good#4A002C on #B58400

Color blindness preview

CSS variables

/* Turquoise Pearl to Dark Sanctuary — https://swatchly.xyz/palette/8af1d5-e39f00-b58400-0066ba-00503b-4a002c */
:root {
  --turquoise-pearl: #8af1d5;
  --hot-butter: #e39f00;
  --arrowwood: #b58400;
  --wing-commander: #0066ba;
  --tropical-forest: #00503b;
  --dark-sanctuary: #4a002c;
}

Tailwind CSS v4

/* Turquoise Pearl to Dark Sanctuary — https://swatchly.xyz/palette/8af1d5-e39f00-b58400-0066ba-00503b-4a002c */
@theme {
  --color-turquoise-pearl: #8af1d5;
  --color-turquoise-pearl-50: #e0fff5;
  --color-turquoise-pearl-100: #c2fcea;
  --color-turquoise-pearl-200: #8af1d5;
  --color-turquoise-pearl-300: #82d6bf;
  --color-turquoise-pearl-400: #55b89f;
  --color-turquoise-pearl-500: #2d9c83;
  --color-turquoise-pearl-600: #007f68;
  --color-turquoise-pearl-700: #006552;
  --color-turquoise-pearl-800: #004f40;
  --color-turquoise-pearl-900: #003d31;
  --color-turquoise-pearl-950: #00261e;
  --color-hot-butter: #e39f00;
  --color-hot-butter-50: #fff9ef;
  --color-hot-butter-100: #ffefd8;
  --color-hot-butter-200: #ffdaa1;
  --color-hot-butter-300: #f8c166;
  --color-hot-butter-400: #e39f00;
  --color-hot-butter-500: #bd8400;
  --color-hot-butter-600: #986900;
  --color-hot-butter-700: #785200;
  --color-hot-butter-800: #5e3f00;
  --color-hot-butter-900: #472f00;
  --color-hot-butter-950: #2c1c00;
  --color-arrowwood: #b58400;
  --color-arrowwood-50: #fff5e4;
  --color-arrowwood-100: #ffebc8;
  --color-arrowwood-200: #fbd692;
  --color-arrowwood-300: #eabf6f;
  --color-arrowwood-400: #cf9f3e;
  --color-arrowwood-500: #b58400;
  --color-arrowwood-600: #926a00;
  --color-arrowwood-700: #745300;
  --color-arrowwood-800: #5b4000;
  --color-arrowwood-900: #463100;
  --color-arrowwood-950: #2c1d00;
  --color-wing-commander: #0066ba;
  --color-wing-commander-50: #eef6ff;
  --color-wing-commander-100: #dcecff;
  --color-wing-commander-200: #b8d9ff;
  --color-wing-commander-300: #8cc2ff;
  --color-wing-commander-400: #51a0f6;
  --color-wing-commander-500: #2e83d9;
  --color-wing-commander-600: #0066ba;
  --color-wing-commander-700: #005195;
  --color-wing-commander-800: #003f77;
  --color-wing-commander-900: #00305e;
  --color-wing-commander-950: #001e3e;
  --color-tropical-forest: #00503b;
  --color-tropical-forest-50: #dbfff0;
  --color-tropical-forest-100: #cdf6e5;
  --color-tropical-forest-200: #b4e4d0;
  --color-tropical-forest-300: #97cfb9;
  --color-tropical-forest-400: #72b199;
  --color-tropical-forest-500: #54967e;
  --color-tropical-forest-600: #3a7b64;
  --color-tropical-forest-700: #26634e;
  --color-tropical-forest-800: #00503b;
  --color-tropical-forest-900: #0c3d2e;
  --color-tropical-forest-950: #04261c;
  --color-dark-sanctuary: #4a002c;
  --color-dark-sanctuary-50: #fff1f6;
  --color-dark-sanctuary-100: #ffe2ee;
  --color-dark-sanctuary-200: #ffc4dd;
  --color-dark-sanctuary-300: #f1a8c8;
  --color-dark-sanctuary-400: #d585a9;
  --color-dark-sanctuary-500: #ba6a8f;
  --color-dark-sanctuary-600: #9e5176;
  --color-dark-sanctuary-700: #843e60;
  --color-dark-sanctuary-800: #6d2e4d;
  --color-dark-sanctuary-900: #59233e;
  --color-dark-sanctuary-950: #4a002c;
}