Rich Black to Mount Olympus Color Palette

About this palette

Rich Black to Mount Olympus is a 5-color cool, vintage palette: #003B40 (Rich Black), #924900 (Brownie), #D46C00 (Cinnamon), #A7C2FF (Pastel Blue), #D0FEFF (Mount Olympus). It mixes turquoise, brown, orange, blue, white tones and feels cool overall. The strongest text pairing is #003B40 on #D0FEFF with a contrast ratio of 11.36:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Rich Black	rgb(0, 59, 64)	hsl(185, 100%, 13%)
Brownie	rgb(146, 73, 0)	hsl(30, 100%, 29%)
Cinnamon	rgb(212, 108, 0)	hsl(31, 100%, 42%)
Pastel Blue	rgb(167, 194, 255)	hsl(222, 100%, 83%)
Mount Olympus	rgb(208, 254, 255)	hsl(181, 100%, 91%)

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.36:1 Very good#003B40 on #D0FEFF
Aa11.36:1 Very good#D0FEFF on #003B40
Aa6.94:1 Good#003B40 on #A7C2FF
Aa6.94:1 Good#A7C2FF on #003B40
Aa6.08:1 Good#924900 on #D0FEFF
Aa6.08:1 Good#D0FEFF on #924900
Aa3.72:1 Poor#924900 on #A7C2FF
Aa3.72:1 Poor#A7C2FF on #924900

Color blindness preview

CSS variables

/* Rich Black to Mount Olympus — https://swatchly.xyz/palette/003b40-924900-d46c00-a7c2ff-d0feff */
:root {
  --rich-black: #003b40;
  --brownie: #924900;
  --cinnamon: #d46c00;
  --pastel-blue: #a7c2ff;
  --mount-olympus: #d0feff;
}

Tailwind CSS v4

/* Rich Black to Mount Olympus — https://swatchly.xyz/palette/003b40-924900-d46c00-a7c2ff-d0feff */
@theme {
  --color-rich-black: #003b40;
  --color-rich-black-50: #dffcfe;
  --color-rich-black-100: #d2f2f6;
  --color-rich-black-200: #b9e0e4;
  --color-rich-black-300: #9ecacf;
  --color-rich-black-400: #7aacb1;
  --color-rich-black-500: #5e9096;
  --color-rich-black-600: #44757a;
  --color-rich-black-700: #305e63;
  --color-rich-black-800: #214a4e;
  --color-rich-black-900: #003b40;
  --color-rich-black-950: #0a2426;
  --color-brownie: #924900;
  --color-brownie-50: #fff2ea;
  --color-brownie-100: #ffe6d5;
  --color-brownie-200: #ffceae;
  --color-brownie-300: #f8b385;
  --color-brownie-400: #df935e;
  --color-brownie-500: #c57840;
  --color-brownie-600: #aa5f24;
  --color-brownie-700: #924900;
  --color-brownie-800: #733800;
  --color-brownie-900: #5a2a00;
  --color-brownie-950: #3b1900;
  --color-cinnamon: #d46c00;
  --color-cinnamon-50: #fff4ed;
  --color-cinnamon-100: #ffe9da;
  --color-cinnamon-200: #ffd0b2;
  --color-cinnamon-300: #ffb17d;
  --color-cinnamon-400: #ee893d;
  --color-cinnamon-500: #d46c00;
  --color-cinnamon-600: #ac5600;
  --color-cinnamon-700: #894300;
  --color-cinnamon-800: #6c3400;
  --color-cinnamon-900: #542700;
  --color-cinnamon-950: #361600;
  --color-pastel-blue: #a7c2ff;
  --color-pastel-blue-50: #f2f6ff;
  --color-pastel-blue-100: #e4edff;
  --color-pastel-blue-200: #c8d9ff;
  --color-pastel-blue-300: #a7c2ff;
  --color-pastel-blue-400: #89a2db;
  --color-pastel-blue-500: #6d86bf;
  --color-pastel-blue-600: #546ba1;
  --color-pastel-blue-700: #3f5485;
  --color-pastel-blue-800: #2f416c;
  --color-pastel-blue-900: #223155;
  --color-pastel-blue-950: #131e38;
  --color-mount-olympus: #d0feff;
  --color-mount-olympus-50: #d0feff;
  --color-mount-olympus-100: #d4f0f1;
  --color-mount-olympus-200: #bddedf;
  --color-mount-olympus-300: #a3c9c9;
  --color-mount-olympus-400: #80aaab;
  --color-mount-olympus-500: #648f90;
  --color-mount-olympus-600: #4b7475;
  --color-mount-olympus-700: #375d5e;
  --color-mount-olympus-800: #27494a;
  --color-mount-olympus-900: #1c3839;
  --color-mount-olympus-950: #0e2324;
}