Black Box to Puffy Cloud Color Palette

About this palette

Black Box to Puffy Cloud is a 5-color cool, vintage palette: #002833 (Black Box), #6D3704 (Brown), #0090A9 (Munsell Blue), #E0964A (Coffee Whip), #D5E1FF (Puffy Cloud). It mixes blue, brown, orange tones and feels cool overall. The strongest text pairing is #002833 on #D5E1FF with a contrast ratio of 11.87:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Box	rgb(0, 40, 51)	hsl(193, 100%, 10%)
Brown	rgb(109, 55, 4)	hsl(29, 93%, 22%)
Munsell Blue	rgb(0, 144, 169)	hsl(189, 100%, 33%)
Coffee Whip	rgb(224, 150, 74)	hsl(30, 71%, 58%)
Puffy Cloud	rgb(213, 225, 255)	hsl(223, 100%, 92%)

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.87:1 Very good#002833 on #D5E1FF
Aa11.87:1 Very good#D5E1FF on #002833
Aa7.30:1 Very good#6D3704 on #D5E1FF
Aa7.30:1 Very good#D5E1FF on #6D3704
Aa6.39:1 Good#002833 on #E0964A
Aa6.39:1 Good#E0964A on #002833
Aa4.12:1 Poor#002833 on #0090A9
Aa4.12:1 Poor#0090A9 on #002833

Color blindness preview

CSS variables

/* Black Box to Puffy Cloud — https://swatchly.xyz/palette/002833-6d3704-0090a9-e0964a-d5e1ff */
:root {
  --black-box: #002833;
  --brown: #6d3704;
  --munsell-blue: #0090a9;
  --coffee-whip: #e0964a;
  --puffy-cloud: #d5e1ff;
}

Tailwind CSS v4

/* Black Box to Puffy Cloud — https://swatchly.xyz/palette/002833-6d3704-0090a9-e0964a-d5e1ff */
@theme {
  --color-black-box: #002833;
  --color-black-box-50: #e7f9ff;
  --color-black-box-100: #d7f0f9;
  --color-black-box-200: #bfdde8;
  --color-black-box-300: #a5c7d3;
  --color-black-box-400: #83a9b6;
  --color-black-box-500: #678e9b;
  --color-black-box-600: #4f7480;
  --color-black-box-700: #3b5d69;
  --color-black-box-800: #2c4a55;
  --color-black-box-900: #203b43;
  --color-black-box-950: #002833;
  --color-brown: #6d3704;
  --color-brown-50: #fff2ea;
  --color-brown-100: #ffe6d5;
  --color-brown-200: #fdccab;
  --color-brown-300: #ebb58f;
  --color-brown-400: #d0946b;
  --color-brown-500: #b5794e;
  --color-brown-600: #996035;
  --color-brown-700: #7f4b22;
  --color-brown-800: #6d3704;
  --color-brown-900: #532b0a;
  --color-brown-950: #371a03;
  --color-munsell-blue: #0090a9;
  --color-munsell-blue-50: #e2f9ff;
  --color-munsell-blue-100: #c4f3ff;
  --color-munsell-blue-200: #95e3f6;
  --color-munsell-blue-300: #71cce3;
  --color-munsell-blue-400: #3fadc5;
  --color-munsell-blue-500: #0090a9;
  --color-munsell-blue-600: #007489;
  --color-munsell-blue-700: #005c6d;
  --color-munsell-blue-800: #004856;
  --color-munsell-blue-900: #003843;
  --color-munsell-blue-950: #00232b;
  --color-coffee-whip: #e0964a;
  --color-coffee-whip-50: #fff6ee;
  --color-coffee-whip-100: #ffebd9;
  --color-coffee-whip-200: #ffd3ab;
  --color-coffee-whip-300: #f7b87d;
  --color-coffee-whip-400: #e0964a;
  --color-coffee-whip-500: #c1792a;
  --color-coffee-whip-600: #a15e00;
  --color-coffee-whip-700: #804900;
  --color-coffee-whip-800: #643800;
  --color-coffee-whip-900: #4d2a00;
  --color-coffee-whip-950: #311900;
  --color-puffy-cloud: #d5e1ff;
  --color-puffy-cloud-50: #e5edff;
  --color-puffy-cloud-100: #d5e1ff;
  --color-puffy-cloud-200: #c6cfe6;
  --color-puffy-cloud-300: #b0bad4;
  --color-puffy-cloud-400: #929cb8;
  --color-puffy-cloud-500: #78839e;
  --color-puffy-cloud-600: #606a83;
  --color-puffy-cloud-700: #4c556c;
  --color-puffy-cloud-800: #3a4256;
  --color-puffy-cloud-900: #2c3243;
  --color-puffy-cloud-950: #1a1f2b;
}