Rich Black to Baltic color palette

004441Rich Black 005E59Mosque 00827CWindows 95 Desktop 4AC7C0Cockatoo 83DCDCCold Blue 009C9CBaltic

Open in generator Export PNG, PDF, ASE…

About this palette

Rich Black to Baltic is a 6-color cool, monochromatic palette: #004441 (Rich Black), #005E59 (Mosque), #00827C (Windows 95 Desktop), #4AC7C0 (Cockatoo), #83DCDC (Cold Blue), #009C9C (Baltic). It mixes turquoise tones and feels cool overall. The strongest text pairing is #004441 on #83DCDC with a contrast ratio of 6.95:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Rich Black	rgb(0, 68, 65)	hsl(177, 100%, 13%)
Mosque	rgb(0, 94, 89)	hsl(177, 100%, 18%)
Windows 95 Desktop	rgb(0, 130, 124)	hsl(177, 100%, 25%)
Cockatoo	rgb(74, 199, 192)	hsl(177, 53%, 54%)
Cold Blue	rgb(131, 220, 220)	hsl(180, 56%, 69%)
Baltic	rgb(0, 156, 156)	hsl(180, 100%, 31%)

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.

Aa6.95:1 Good#004441 on #83DCDC
Aa6.95:1 Good#83DCDC on #004441
Aa5.37:1 Good#004441 on #4AC7C0
Aa5.37:1 Good#4AC7C0 on #004441
Aa4.82:1 Good#005E59 on #83DCDC
Aa4.82:1 Good#83DCDC on #005E59
Aa3.72:1 Poor#005E59 on #4AC7C0
Aa3.72:1 Poor#4AC7C0 on #005E59

Color blindness preview

CSS variables

/* Rich Black to Baltic — https://swatchly.xyz/palette/004441-005e59-00827c-4ac7c0-83dcdc-009c9c */
:root {
  --rich-black: #004441;
  --mosque: #005e59;
  --windows-95-desktop: #00827c;
  --cockatoo: #4ac7c0;
  --cold-blue: #83dcdc;
  --baltic: #009c9c;
}

Tailwind CSS v4

/* Rich Black to Baltic — https://swatchly.xyz/palette/004441-005e59-00827c-4ac7c0-83dcdc-009c9c */
@theme {
  --color-rich-black: #004441;
  --color-rich-black-50: #ddfdfa;
  --color-rich-black-100: #d0f4f0;
  --color-rich-black-200: #b7e1de;
  --color-rich-black-300: #9bccc8;
  --color-rich-black-400: #78afab;
  --color-rich-black-500: #5c9591;
  --color-rich-black-600: #437b77;
  --color-rich-black-700: #306561;
  --color-rich-black-800: #21524f;
  --color-rich-black-900: #004441;
  --color-rich-black-950: #0a2b29;
  --color-mosque: #005e59;
  --color-mosque-50: #d7fffa;
  --color-mosque-100: #c9f6f1;
  --color-mosque-200: #ade3de;
  --color-mosque-300: #8ecdc7;
  --color-mosque-400: #67aea8;
  --color-mosque-500: #47928c;
  --color-mosque-600: #2a7670;
  --color-mosque-700: #005e59;
  --color-mosque-800: #044945;
  --color-mosque-900: #003935;
  --color-mosque-950: #002321;
  --color-windows-95-desktop: #00827c;
  --color-windows-95-desktop-50: #d6fffb;
  --color-windows-95-desktop-100: #c0f9f4;
  --color-windows-95-desktop-200: #a4e9e3;
  --color-windows-95-desktop-300: #84d5ce;
  --color-windows-95-desktop-400: #59b7b1;
  --color-windows-95-desktop-500: #349d96;
  --color-windows-95-desktop-600: #00827c;
  --color-windows-95-desktop-700: #006762;
  --color-windows-95-desktop-800: #00514d;
  --color-windows-95-desktop-900: #003e3b;
  --color-windows-95-desktop-950: #002725;
  --color-cockatoo: #4ac7c0;
  --color-cockatoo-50: #edfffd;
  --color-cockatoo-100: #cdfffb;
  --color-cockatoo-200: #a8f3ed;
  --color-cockatoo-300: #87e1da;
  --color-cockatoo-400: #4ac7c0;
  --color-cockatoo-500: #20a7a1;
  --color-cockatoo-600: #008782;
  --color-cockatoo-700: #006b66;
  --color-cockatoo-800: #00524f;
  --color-cockatoo-900: #003e3b;
  --color-cockatoo-950: #002524;
  --color-cold-blue: #83dcdc;
  --color-cold-blue-50: #eaffff;
  --color-cold-blue-100: #ccfdfc;
  --color-cold-blue-200: #b1ecec;
  --color-cold-blue-300: #83dcdc;
  --color-cold-blue-400: #67b9b9;
  --color-cold-blue-500: #429c9c;
  --color-cold-blue-600: #1e7f80;
  --color-cold-blue-700: #006566;
  --color-cold-blue-800: #004e4f;
  --color-cold-blue-900: #003b3c;
  --color-cold-blue-950: #002525;
  --color-baltic: #009c9c;
  --color-baltic-50: #d6fffe;
  --color-baltic-100: #b9faf9;
  --color-baltic-200: #99e9e8;
  --color-baltic-300: #76d5d4;
  --color-baltic-400: #43b7b7;
  --color-baltic-500: #009c9c;
  --color-baltic-600: #007e7e;
  --color-baltic-700: #006464;
  --color-baltic-800: #004e4e;
  --color-baltic-900: #003c3c;
  --color-baltic-950: #002626;
}