Onsen to Secret Passage Color Palette

About this palette

Onsen to Secret Passage is a 4-color palette: #5EEBC2 (Onsen), #ED63B4 (Fugitive Flamingo), #3A65BA (Matt Blue), #3F2800 (Secret Passage). It mixes turquoise, pink, blue, brown tones and feels balanced overall. The strongest text pairing is #5EEBC2 on #3F2800 with a contrast ratio of 9.33:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Onsen	rgb(94, 235, 194)	hsl(163, 78%, 65%)
Fugitive Flamingo	rgb(237, 99, 180)	hsl(325, 79%, 66%)
Matt Blue	rgb(58, 101, 186)	hsl(220, 52%, 48%)
Secret Passage	rgb(63, 40, 0)	hsl(38, 100%, 12%)

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.

Aa9.33:1 Very good#5EEBC2 on #3F2800
Aa9.33:1 Very good#3F2800 on #5EEBC2
Aa4.65:1 Good#ED63B4 on #3F2800
Aa4.65:1 Good#3F2800 on #ED63B4
Aa3.77:1 Poor#5EEBC2 on #3A65BA
Aa3.77:1 Poor#3A65BA on #5EEBC2

Color blindness preview

CSS variables

/* Onsen to Secret Passage — https://swatchly.xyz/palette/5eebc2-ed63b4-3a65ba-3f2800 */
:root {
  --onsen: #5eebc2;
  --fugitive-flamingo: #ed63b4;
  --matt-blue: #3a65ba;
  --secret-passage: #3f2800;
}

Tailwind CSS v4

/* Onsen to Secret Passage — https://swatchly.xyz/palette/5eebc2-ed63b4-3a65ba-3f2800 */
@theme {
  --color-onsen: #5eebc2;
  --color-onsen-50: #c0ffe8;
  --color-onsen-100: #a4f8db;
  --color-onsen-200: #5eebc2;
  --color-onsen-300: #5bd2af;
  --color-onsen-400: #18b690;
  --color-onsen-500: #009878;
  --color-onsen-600: #007c61;
  --color-onsen-700: #00634d;
  --color-onsen-800: #004f3d;
  --color-onsen-900: #003d2e;
  --color-onsen-950: #00261c;
  --color-fugitive-flamingo: #ed63b4;
  --color-fugitive-flamingo-50: #ffeef6;
  --color-fugitive-flamingo-100: #ffdeee;
  --color-fugitive-flamingo-200: #ffbedf;
  --color-fugitive-flamingo-300: #ff96cf;
  --color-fugitive-flamingo-400: #ed63b4;
  --color-fugitive-flamingo-500: #ce4699;
  --color-fugitive-flamingo-600: #af2a7e;
  --color-fugitive-flamingo-700: #911266;
  --color-fugitive-flamingo-800: #760051;
  --color-fugitive-flamingo-900: #5d003f;
  --color-fugitive-flamingo-950: #3e0028;
  --color-matt-blue: #3a65ba;
  --color-matt-blue-50: #f0f5ff;
  --color-matt-blue-100: #e0ebff;
  --color-matt-blue-200: #c1d7ff;
  --color-matt-blue-300: #9ec0ff;
  --color-matt-blue-400: #709ef5;
  --color-matt-blue-500: #5481d8;
  --color-matt-blue-600: #3a65ba;
  --color-matt-blue-700: #294f9a;
  --color-matt-blue-800: #1c3c7e;
  --color-matt-blue-900: #122e66;
  --color-matt-blue-950: #081c44;
  --color-secret-passage: #3f2800;
  --color-secret-passage-50: #fff3e3;
  --color-secret-passage-100: #fbe8cf;
  --color-secret-passage-200: #ead4b6;
  --color-secret-passage-300: #d5bd9b;
  --color-secret-passage-400: #b69c76;
  --color-secret-passage-500: #9a7f59;
  --color-secret-passage-600: #7d643f;
  --color-secret-passage-700: #634d2c;
  --color-secret-passage-800: #4d3a1d;
  --color-secret-passage-900: #3f2800;
  --color-secret-passage-950: #241908;
}