Oak Palace to Ice Climber color palette

BA6D45Oak Palace 5C4990Lords of the Night 512300Evil Cigar 9EFACBNeo Mint 00D8BCIce Climber

About this palette

Oak Palace to Ice Climber is a 5-color cool, earthy palette: #BA6D45 (Oak Palace), #5C4990 (Lords of the Night), #512300 (Evil Cigar), #9EFACB (Neo Mint), #00D8BC (Ice Climber). It mixes orange, purple, brown, green, turquoise tones and feels cool overall. The strongest text pairing is #512300 on #9EFACB with a contrast ratio of 10.68:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Oak Palace	rgb(186, 109, 69)	hsl(21, 46%, 50%)
Lords of the Night	rgb(92, 73, 144)	hsl(256, 33%, 43%)
Evil Cigar	rgb(81, 35, 0)	hsl(26, 100%, 16%)
Neo Mint	rgb(158, 250, 203)	hsl(149, 90%, 80%)
Ice Climber	rgb(0, 216, 188)	hsl(172, 100%, 42%)

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.68:1 Very good#512300 on #9EFACB
Aa10.68:1 Very good#9EFACB on #512300
Aa7.26:1 Very good#512300 on #00D8BC
Aa7.26:1 Very good#00D8BC on #512300
Aa6.04:1 Good#5C4990 on #9EFACB
Aa6.04:1 Good#9EFACB on #5C4990
Aa4.11:1 Poor#5C4990 on #00D8BC
Aa4.11:1 Poor#00D8BC on #5C4990

Color blindness preview

CSS variables

/* Oak Palace to Ice Climber — https://swatchly.xyz/palette/ba6d45-5c4990-512300-9efacb-00d8bc */
:root {
  --oak-palace: #ba6d45;
  --lords-of-the-night: #5c4990;
  --evil-cigar: #512300;
  --neo-mint: #9efacb;
  --ice-climber: #00d8bc;
}

Tailwind CSS v4

/* Oak Palace to Ice Climber — https://swatchly.xyz/palette/ba6d45-5c4990-512300-9efacb-00d8bc */
@theme {
  --color-oak-palace: #ba6d45;
  --color-oak-palace-50: #fff2eb;
  --color-oak-palace-100: #ffe4d7;
  --color-oak-palace-200: #ffc9ae;
  --color-oak-palace-300: #f3ac89;
  --color-oak-palace-400: #d78a63;
  --color-oak-palace-500: #ba6d45;
  --color-oak-palace-600: #9c532c;
  --color-oak-palace-700: #813f19;
  --color-oak-palace-800: #682e0c;
  --color-oak-palace-900: #532204;
  --color-oak-palace-950: #361301;
  --color-lords-of-the-night: #5c4990;
  --color-lords-of-the-night-50: #f5f3ff;
  --color-lords-of-the-night-100: #ece8ff;
  --color-lords-of-the-night-200: #d9d1ff;
  --color-lords-of-the-night-300: #c5b6fb;
  --color-lords-of-the-night-400: #a696e0;
  --color-lords-of-the-night-500: #8c7ac5;
  --color-lords-of-the-night-600: #7260a8;
  --color-lords-of-the-night-700: #5c4990;
  --color-lords-of-the-night-800: #483872;
  --color-lords-of-the-night-900: #372a5b;
  --color-lords-of-the-night-950: #23193c;
  --color-evil-cigar: #512300;
  --color-evil-cigar-50: #fff2eb;
  --color-evil-cigar-100: #ffe5d7;
  --color-evil-cigar-200: #f9cdb4;
  --color-evil-cigar-300: #e6b598;
  --color-evil-cigar-400: #c99474;
  --color-evil-cigar-500: #ad7857;
  --color-evil-cigar-600: #905d3e;
  --color-evil-cigar-700: #75482b;
  --color-evil-cigar-800: #5e361d;
  --color-evil-cigar-900: #512300;
  --color-evil-cigar-950: #2f1808;
  --color-neo-mint: #9efacb;
  --color-neo-mint-50: #c8fde0;
  --color-neo-mint-100: #9efacb;
  --color-neo-mint-200: #9ee3be;
  --color-neo-mint-300: #81cfa7;
  --color-neo-mint-400: #5ab288;
  --color-neo-mint-500: #3a986e;
  --color-neo-mint-600: #1b7d56;
  --color-neo-mint-700: #006642;
  --color-neo-mint-800: #005033;
  --color-neo-mint-900: #003e26;
  --color-neo-mint-950: #002717;
  --color-ice-climber: #00d8bc;
  --color-ice-climber-50: #cafff2;
  --color-ice-climber-100: #9ffce8;
  --color-ice-climber-200: #76ead3;
  --color-ice-climber-300: #00d8bc;
  --color-ice-climber-400: #00b59e;
  --color-ice-climber-500: #009783;
  --color-ice-climber-600: #007a6a;
  --color-ice-climber-700: #006254;
  --color-ice-climber-800: #004d42;
  --color-ice-climber-900: #003c33;
  --color-ice-climber-950: #002620;
}