Black Box to Cinderella color palette

092733Black Box 04535FAbyssal Waters 4A7D86Submerged CB978ECafé Crème FFD4C3Cinderella

About this palette

Black Box to Cinderella is a 5-color muted, cool, vintage palette: #092733 (Black Box), #04535F (Abyssal Waters), #4A7D86 (Submerged), #CB978E (Café Crème), #FFD4C3 (Cinderella). It mixes blue, turquoise, red, orange tones and feels cool overall. The strongest text pairing is #092733 on #FFD4C3 with a contrast ratio of 11.45:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Box	rgb(9, 39, 51)	hsl(197, 70%, 12%)
Abyssal Waters	rgb(4, 83, 95)	hsl(188, 92%, 19%)
Submerged	rgb(74, 125, 134)	hsl(189, 29%, 41%)
Café Crème	rgb(203, 151, 142)	hsl(9, 37%, 68%)
Cinderella	rgb(255, 212, 195)	hsl(17, 100%, 88%)

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.45:1 Very good#092733 on #FFD4C3
Aa11.45:1 Very good#FFD4C3 on #092733
Aa6.42:1 Good#04535F on #FFD4C3
Aa6.42:1 Good#FFD4C3 on #04535F
Aa6.19:1 Good#092733 on #CB978E
Aa6.19:1 Good#CB978E on #092733
Aa3.47:1 Poor#04535F on #CB978E
Aa3.47:1 Poor#CB978E on #04535F

Color blindness preview

CSS variables

/* Black Box to Cinderella — https://swatchly.xyz/palette/092733-04535f-4a7d86-cb978e-ffd4c3 */
:root {
  --black-box: #092733;
  --abyssal-waters: #04535f;
  --submerged: #4a7d86;
  --caf-cr-me: #cb978e;
  --cinderella: #ffd4c3;
}

Tailwind CSS v4

/* Black Box to Cinderella — https://swatchly.xyz/palette/092733-04535f-4a7d86-cb978e-ffd4c3 */
@theme {
  --color-black-box: #092733;
  --color-black-box-50: #e9f8ff;
  --color-black-box-100: #daeff9;
  --color-black-box-200: #c4dce8;
  --color-black-box-300: #aac6d3;
  --color-black-box-400: #88a7b5;
  --color-black-box-500: #6d8c9b;
  --color-black-box-600: #557280;
  --color-black-box-700: #415c69;
  --color-black-box-800: #314954;
  --color-black-box-900: #253a43;
  --color-black-box-950: #092733;
  --color-abyssal-waters: #04535f;
  --color-abyssal-waters-50: #e3faff;
  --color-abyssal-waters-100: #cbf4fc;
  --color-abyssal-waters-200: #b1e1eb;
  --color-abyssal-waters-300: #96cdd8;
  --color-abyssal-waters-400: #72b0bc;
  --color-abyssal-waters-500: #5596a2;
  --color-abyssal-waters-600: #3b7c88;
  --color-abyssal-waters-700: #276571;
  --color-abyssal-waters-800: #04535f;
  --color-abyssal-waters-900: #0b4049;
  --color-abyssal-waters-950: #03292f;
  --color-submerged: #4a7d86;
  --color-submerged-50: #e2faff;
  --color-submerged-100: #d3f4f9;
  --color-submerged-200: #bce2e9;
  --color-submerged-300: #a3ced6;
  --color-submerged-400: #80b1ba;
  --color-submerged-500: #6497a0;
  --color-submerged-600: #4a7d86;
  --color-submerged-700: #34646c;
  --color-submerged-800: #244e56;
  --color-submerged-900: #173c43;
  --color-submerged-950: #0b262a;
  --color-caf-cr-me: #cb978e;
  --color-caf-cr-me-50: #fff4f2;
  --color-caf-cr-me-100: #ffe7e3;
  --color-caf-cr-me-200: #f8d0c9;
  --color-caf-cr-me-300: #e6b8b0;
  --color-caf-cr-me-400: #cb978e;
  --color-caf-cr-me-500: #ad7b73;
  --color-caf-cr-me-600: #906058;
  --color-caf-cr-me-700: #754a43;
  --color-caf-cr-me-800: #5d3832;
  --color-caf-cr-me-900: #492a25;
  --color-caf-cr-me-950: #2f1815;
  --color-cinderella: #ffd4c3;
  --color-cinderella-50: #fff8f6;
  --color-cinderella-100: #ffede6;
  --color-cinderella-200: #ffd4c3;
  --color-cinderella-300: #e1beb0;
  --color-cinderella-400: #c39c8d;
  --color-cinderella-500: #a67f70;
  --color-cinderella-600: #896455;
  --color-cinderella-700: #6e4d40;
  --color-cinderella-800: #573a2f;
  --color-cinderella-900: #442c22;
  --color-cinderella-950: #2c1a13;
}