Coral Commander to Mystic Nights color palette

F26366Coral Commander D4D64DYuzukoshō 00787EPrismarine 002727Sunken Ship 492D76Mystic Nights

About this palette

Coral Commander to Mystic Nights is a 5-color cool palette: #F26366 (Coral Commander), #D4D64D (Yuzukoshō), #00787E (Prismarine), #002727 (Sunken Ship), #492D76 (Mystic Nights). It mixes red, yellow, turquoise, purple tones and feels cool overall. The strongest text pairing is #D4D64D on #002727 with a contrast ratio of 10.25:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Coral Commander	rgb(242, 99, 102)	hsl(359, 85%, 67%)
Yuzukoshō	rgb(212, 214, 77)	hsl(61, 63%, 57%)
Prismarine	rgb(0, 120, 126)	hsl(183, 100%, 25%)
Sunken Ship	rgb(0, 39, 39)	hsl(180, 100%, 8%)
Mystic Nights	rgb(73, 45, 118)	hsl(263, 45%, 32%)

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.

Aa10.25:1 Very good#D4D64D on #002727
Aa10.25:1 Very good#002727 on #D4D64D
Aa7.04:1 Very good#D4D64D on #492D76
Aa7.04:1 Very good#492D76 on #D4D64D
Aa5.12:1 Good#F26366 on #002727
Aa5.12:1 Good#002727 on #F26366
Aa3.52:1 Poor#F26366 on #492D76
Aa3.52:1 Poor#492D76 on #F26366

Color blindness preview

CSS variables

/* Coral Commander to Mystic Nights — https://swatchly.xyz/palette/f26366-d4d64d-00787e-002727-492d76 */
:root {
  --coral-commander: #f26366;
  --yuzukosh: #d4d64d;
  --prismarine: #00787e;
  --sunken-ship: #002727;
  --mystic-nights: #492d76;
}

Tailwind CSS v4

/* Coral Commander to Mystic Nights — https://swatchly.xyz/palette/f26366-d4d64d-00787e-002727-492d76 */
@theme {
  --color-coral-commander: #f26366;
  --color-coral-commander-50: #ffedec;
  --color-coral-commander-100: #ffdddb;
  --color-coral-commander-200: #ffbebb;
  --color-coral-commander-300: #ff9896;
  --color-coral-commander-400: #f26366;
  --color-coral-commander-500: #d4474d;
  --color-coral-commander-600: #b42c37;
  --color-coral-commander-700: #961626;
  --color-coral-commander-800: #7b0419;
  --color-coral-commander-900: #630011;
  --color-coral-commander-950: #420008;
  --color-yuzukosh: #d4d64d;
  --color-yuzukosh-50: #f1f5ab;
  --color-yuzukosh-100: #e6ea96;
  --color-yuzukosh-200: #d4d64d;
  --color-yuzukosh-300: #bec04c;
  --color-yuzukosh-400: #a2a200;
  --color-yuzukosh-500: #878800;
  --color-yuzukosh-600: #6d6e00;
  --color-yuzukosh-700: #575800;
  --color-yuzukosh-800: #454600;
  --color-yuzukosh-900: #353500;
  --color-yuzukosh-950: #212100;
  --color-prismarine: #00787e;
  --color-prismarine-50: #dafdff;
  --color-prismarine-100: #c0f6fa;
  --color-prismarine-200: #a2e4e8;
  --color-prismarine-300: #82cfd4;
  --color-prismarine-400: #57b0b5;
  --color-prismarine-500: #32949a;
  --color-prismarine-600: #00787e;
  --color-prismarine-700: #005f64;
  --color-prismarine-800: #004b4f;
  --color-prismarine-900: #003a3d;
  --color-prismarine-950: #002426;
  --color-sunken-ship: #002727;
  --color-sunken-ship-50: #e4fafa;
  --color-sunken-ship-100: #d8f1f0;
  --color-sunken-ship-200: #c1dede;
  --color-sunken-ship-300: #a7c9c8;
  --color-sunken-ship-400: #85aaa9;
  --color-sunken-ship-500: #698f8e;
  --color-sunken-ship-600: #507474;
  --color-sunken-ship-700: #3c5d5d;
  --color-sunken-ship-800: #2c4a49;
  --color-sunken-ship-900: #203939;
  --color-sunken-ship-950: #002727;
  --color-mystic-nights: #492d76;
  --color-mystic-nights-50: #f6f3ff;
  --color-mystic-nights-100: #ede7ff;
  --color-mystic-nights-200: #dccfff;
  --color-mystic-nights-300: #c8b2fb;
  --color-mystic-nights-400: #a990df;
  --color-mystic-nights-500: #8e74c3;
  --color-mystic-nights-600: #7359a5;
  --color-mystic-nights-700: #5b4388;
  --color-mystic-nights-800: #492d76;
  --color-mystic-nights-900: #372557;
  --color-mystic-nights-950: #221539;
}