Old Study to Ninja Princess Color Palette

About this palette

Old Study to Ninja Princess is a 4-color cool palette: #3B180F (Old Study), #00AFB9 (Teal Me No Lies), #E0EFC0 (Mellow Mint), #6F518A (Ninja Princess). It mixes brown, turquoise, green, purple tones and feels cool overall. The strongest text pairing is #3B180F on #E0EFC0 with a contrast ratio of 13.05:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Old Study	rgb(59, 24, 15)	hsl(12, 59%, 15%)
Teal Me No Lies	rgb(0, 175, 185)	hsl(183, 100%, 36%)
Mellow Mint	rgb(224, 239, 192)	hsl(79, 59%, 85%)
Ninja Princess	rgb(111, 81, 138)	hsl(272, 26%, 43%)

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.

Aa13.05:1 Super#3B180F on #E0EFC0
Aa13.05:1 Super#E0EFC0 on #3B180F
Aa5.92:1 Good#3B180F on #00AFB9
Aa5.92:1 Good#00AFB9 on #3B180F
Aa5.37:1 Good#E0EFC0 on #6F518A
Aa5.37:1 Good#6F518A on #E0EFC0

Color blindness preview

CSS variables

/* Old Study to Ninja Princess — https://swatchly.xyz/palette/3b180f-00afb9-e0efc0-6f518a */
:root {
  --old-study: #3b180f;
  --teal-me-no-lies: #00afb9;
  --mellow-mint: #e0efc0;
  --ninja-princess: #6f518a;
}

Tailwind CSS v4

/* Old Study to Ninja Princess — https://swatchly.xyz/palette/3b180f-00afb9-e0efc0-6f518a */
@theme {
  --color-old-study: #3b180f;
  --color-old-study-50: #fff2ee;
  --color-old-study-100: #ffe4dd;
  --color-old-study-200: #f2cec4;
  --color-old-study-300: #dfb6ab;
  --color-old-study-400: #c1968a;
  --color-old-study-500: #a77b6f;
  --color-old-study-600: #8b6257;
  --color-old-study-700: #734d43;
  --color-old-study-800: #5d3c33;
  --color-old-study-900: #4b2e27;
  --color-old-study-950: #3b180f;
  --color-teal-me-no-lies: #00afb9;
  --color-teal-me-no-lies-50: #d2fcff;
  --color-teal-me-no-lies-100: #abf7fd;
  --color-teal-me-no-lies-200: #87e4ec;
  --color-teal-me-no-lies-300: #5dced7;
  --color-teal-me-no-lies-400: #00afb9;
  --color-teal-me-no-lies-500: #00929a;
  --color-teal-me-no-lies-600: #00767d;
  --color-teal-me-no-lies-700: #005e64;
  --color-teal-me-no-lies-800: #004a4f;
  --color-teal-me-no-lies-900: #003a3e;
  --color-teal-me-no-lies-950: #002528;
  --color-mellow-mint: #e0efc0;
  --color-mellow-mint-50: #eef6dc;
  --color-mellow-mint-100: #e0efc0;
  --color-mellow-mint-200: #cfdab7;
  --color-mellow-mint-300: #b8c59e;
  --color-mellow-mint-400: #99a67c;
  --color-mellow-mint-500: #7e8c60;
  --color-mellow-mint-600: #657148;
  --color-mellow-mint-700: #505b35;
  --color-mellow-mint-800: #3d4726;
  --color-mellow-mint-900: #2f371a;
  --color-mellow-mint-950: #1c220e;
  --color-ninja-princess: #6f518a;
  --color-ninja-princess-50: #f8f2ff;
  --color-ninja-princess-100: #f0e2ff;
  --color-ninja-princess-200: #e0c7f9;
  --color-ninja-princess-300: #c9ade5;
  --color-ninja-princess-400: #a98ac6;
  --color-ninja-princess-500: #8b6da8;
  --color-ninja-princess-600: #6f518a;
  --color-ninja-princess-700: #593f70;
  --color-ninja-princess-800: #46305a;
  --color-ninja-princess-900: #372447;
  --color-ninja-princess-950: #23152e;
}