Black Box to Homeworld Color Palette

About this palette

Black Box to Homeworld is a 5-color cool palette: #002C35 (Black Box), #005248 (Cape Verde), #00DCB8 (Ice Climber), #007C84 (Jade Jewel), #009ADD (Homeworld). It mixes blue, turquoise tones and feels cool overall. The strongest text pairing is #002C35 on #00DCB8 with a contrast ratio of 8.45:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Box	rgb(0, 44, 53)	hsl(190, 100%, 10%)
Cape Verde	rgb(0, 82, 72)	hsl(173, 100%, 16%)
Ice Climber	rgb(0, 220, 184)	hsl(170, 100%, 43%)
Jade Jewel	rgb(0, 124, 132)	hsl(184, 100%, 26%)
Homeworld	rgb(0, 154, 221)	hsl(198, 100%, 43%)

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.

Aa8.45:1 Very good#002C35 on #00DCB8
Aa8.45:1 Very good#00DCB8 on #002C35
Aa5.19:1 Good#005248 on #00DCB8
Aa5.19:1 Good#00DCB8 on #005248
Aa4.72:1 Good#002C35 on #009ADD
Aa4.72:1 Good#009ADD on #002C35

Color blindness preview

CSS variables

/* Black Box to Homeworld — https://swatchly.xyz/palette/002c35-005248-00dcb8-007c84-009add */
:root {
  --black-box: #002c35;
  --cape-verde: #005248;
  --ice-climber: #00dcb8;
  --jade-jewel: #007c84;
  --homeworld: #009add;
}

Tailwind CSS v4

/* Black Box to Homeworld — https://swatchly.xyz/palette/002c35-005248-00dcb8-007c84-009add */
@theme {
  --color-black-box: #002c35;
  --color-black-box-50: #e5faff;
  --color-black-box-100: #d6f1f8;
  --color-black-box-200: #bedee6;
  --color-black-box-300: #a4c8d2;
  --color-black-box-400: #81a9b4;
  --color-black-box-500: #668f9a;
  --color-black-box-600: #4e7680;
  --color-black-box-700: #3b6069;
  --color-black-box-800: #2c4d56;
  --color-black-box-900: #213e45;
  --color-black-box-950: #002c35;
  --color-cape-verde: #005248;
  --color-cape-verde-50: #dafef6;
  --color-cape-verde-100: #ccf5ed;
  --color-cape-verde-200: #b2e3d9;
  --color-cape-verde-300: #97cfc4;
  --color-cape-verde-400: #72b1a5;
  --color-cape-verde-500: #54968a;
  --color-cape-verde-600: #3a7c71;
  --color-cape-verde-700: #25645a;
  --color-cape-verde-800: #005248;
  --color-cape-verde-900: #0b3f37;
  --color-cape-verde-950: #032822;
  --color-ice-climber: #00dcb8;
  --color-ice-climber-50: #d1fff1;
  --color-ice-climber-100: #a1fee5;
  --color-ice-climber-200: #7aedd0;
  --color-ice-climber-300: #00dcb8;
  --color-ice-climber-400: #00b99a;
  --color-ice-climber-500: #009a80;
  --color-ice-climber-600: #007c67;
  --color-ice-climber-700: #006352;
  --color-ice-climber-800: #004e40;
  --color-ice-climber-900: #003d31;
  --color-ice-climber-950: #00261e;
  --color-jade-jewel: #007c84;
  --color-jade-jewel-50: #dcfcff;
  --color-jade-jewel-100: #c0f7fc;
  --color-jade-jewel-200: #a3e6eb;
  --color-jade-jewel-300: #83d1d7;
  --color-jade-jewel-400: #58b3ba;
  --color-jade-jewel-500: #33979f;
  --color-jade-jewel-600: #007c84;
  --color-jade-jewel-700: #006269;
  --color-jade-jewel-800: #004d52;
  --color-jade-jewel-900: #003b40;
  --color-jade-jewel-950: #002528;
  --color-homeworld: #009add;
  --color-homeworld-50: #eff8ff;
  --color-homeworld-100: #dff2ff;
  --color-homeworld-200: #bae3ff;
  --color-homeworld-300: #8bd1ff;
  --color-homeworld-400: #45b5f5;
  --color-homeworld-500: #009add;
  --color-homeworld-600: #007cb3;
  --color-homeworld-700: #00628f;
  --color-homeworld-800: #004c70;
  --color-homeworld-900: #003a57;
  --color-homeworld-950: #002437;
}