Black Box to Poseidon Jr. color palette

002D2EBlack Box 006367Beau Vert 00BCBDSuper Rare Jade 00837DWindows 95 Desktop 5EF2EEPoseidon Jr.

About this palette

Black Box to Poseidon Jr. is a 5-color cool, monochromatic palette: #002D2E (Black Box), #006367 (Beau Vert), #00BCBD (Super Rare Jade), #00837D (Windows 95 Desktop), #5EF2EE (Poseidon Jr.). It mixes turquoise tones and feels cool overall. The strongest text pairing is #002D2E on #5EF2EE with a contrast ratio of 10.89:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Box	rgb(0, 45, 46)	hsl(181, 100%, 9%)
Beau Vert	rgb(0, 99, 103)	hsl(182, 100%, 20%)
Super Rare Jade	rgb(0, 188, 189)	hsl(180, 100%, 37%)
Windows 95 Desktop	rgb(0, 131, 125)	hsl(177, 100%, 26%)
Poseidon Jr.	rgb(94, 242, 238)	hsl(178, 85%, 66%)

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.

Aa10.89:1 Very good#002D2E on #5EF2EE
Aa10.89:1 Very good#5EF2EE on #002D2E
Aa6.31:1 Good#002D2E on #00BCBD
Aa6.31:1 Good#00BCBD on #002D2E
Aa5.17:1 Good#006367 on #5EF2EE
Aa5.17:1 Good#5EF2EE on #006367
Aa3.39:1 Poor#00837D on #5EF2EE
Aa3.39:1 Poor#5EF2EE on #00837D

Color blindness preview

CSS variables

/* Black Box to Poseidon Jr. — https://swatchly.xyz/palette/002d2e-006367-00bcbd-00837d-5ef2ee */
:root {
  --black-box: #002d2e;
  --beau-vert: #006367;
  --super-rare-jade: #00bcbd;
  --windows-95-desktop: #00837d;
  --poseidon-jr: #5ef2ee;
}

Tailwind CSS v4

/* Black Box to Poseidon Jr. — https://swatchly.xyz/palette/002d2e-006367-00bcbd-00837d-5ef2ee */
@theme {
  --color-black-box: #002d2e;
  --color-black-box-50: #e3fbfb;
  --color-black-box-100: #d6f1f2;
  --color-black-box-200: #bfdfdf;
  --color-black-box-300: #a4c9ca;
  --color-black-box-400: #82aaab;
  --color-black-box-500: #679191;
  --color-black-box-600: #4e7778;
  --color-black-box-700: #3b6162;
  --color-black-box-800: #2c4e4f;
  --color-black-box-900: #213f40;
  --color-black-box-950: #002d2e;
  --color-beau-vert: #006367;
  --color-beau-vert-50: #d9fdff;
  --color-beau-vert-100: #c7f6f8;
  --color-beau-vert-200: #ace4e6;
  --color-beau-vert-300: #8ecfd2;
  --color-beau-vert-400: #67b0b4;
  --color-beau-vert-500: #479599;
  --color-beau-vert-600: #2a7a7e;
  --color-beau-vert-700: #006367;
  --color-beau-vert-800: #004d51;
  --color-beau-vert-900: #003c3e;
  --color-beau-vert-950: #002527;
  --color-super-rare-jade: #00bcbd;
  --color-super-rare-jade-50: #dafffe;
  --color-super-rare-jade-100: #b1fdfd;
  --color-super-rare-jade-200: #8fedec;
  --color-super-rare-jade-300: #67d9d9;
  --color-super-rare-jade-400: #00bcbd;
  --color-super-rare-jade-500: #009c9d;
  --color-super-rare-jade-600: #007e7f;
  --color-super-rare-jade-700: #006464;
  --color-super-rare-jade-800: #004e4e;
  --color-super-rare-jade-900: #003c3c;
  --color-super-rare-jade-950: #002525;
  --color-windows-95-desktop: #00837d;
  --color-windows-95-desktop-50: #d6fffb;
  --color-windows-95-desktop-100: #c0faf4;
  --color-windows-95-desktop-200: #a4e9e3;
  --color-windows-95-desktop-300: #84d5cf;
  --color-windows-95-desktop-400: #59b8b1;
  --color-windows-95-desktop-500: #349d97;
  --color-windows-95-desktop-600: #00837d;
  --color-windows-95-desktop-700: #006863;
  --color-windows-95-desktop-800: #00514d;
  --color-windows-95-desktop-900: #003f3b;
  --color-windows-95-desktop-950: #002725;
  --color-poseidon-jr: #5ef2ee;
  --color-poseidon-jr-50: #d7fffd;
  --color-poseidon-jr-100: #aefdf9;
  --color-poseidon-jr-200: #5ef2ee;
  --color-poseidon-jr-300: #61d7d4;
  --color-poseidon-jr-400: #10b9b6;
  --color-poseidon-jr-500: #009a98;
  --color-poseidon-jr-600: #007c7a;
  --color-poseidon-jr-700: #006361;
  --color-poseidon-jr-800: #004d4c;
  --color-poseidon-jr-900: #003b3a;
  --color-poseidon-jr-950: #002524;
}