Captain Kirk to Porcelain Skin Color Palette

About this palette

Captain Kirk to Porcelain Skin is a 5-color cool palette: #9C8900 (Captain Kirk), #00393B (Elite Teal), #5259AC (Starstruck), #B3ADF6 (Wondrous Wisteria), #FFE4E9 (Porcelain Skin). It mixes yellow, turquoise, purple, white tones and feels cool overall. The strongest text pairing is #00393B on #FFE4E9 with a contrast ratio of 10.63:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Captain Kirk	rgb(156, 137, 0)	hsl(53, 100%, 31%)
Elite Teal	rgb(0, 57, 59)	hsl(182, 100%, 12%)
Starstruck	rgb(82, 89, 172)	hsl(235, 35%, 50%)
Wondrous Wisteria	rgb(179, 173, 246)	hsl(245, 80%, 82%)
Porcelain Skin	rgb(255, 228, 233)	hsl(349, 100%, 95%)

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.63:1 Very good#00393B on #FFE4E9
Aa10.63:1 Very good#FFE4E9 on #00393B
Aa6.20:1 Good#00393B on #B3ADF6
Aa6.20:1 Good#B3ADF6 on #00393B
Aa5.18:1 Good#5259AC on #FFE4E9
Aa5.18:1 Good#FFE4E9 on #5259AC
Aa3.63:1 Poor#9C8900 on #00393B
Aa3.63:1 Poor#00393B on #9C8900

Color blindness preview

CSS variables

/* Captain Kirk to Porcelain Skin — https://swatchly.xyz/palette/9c8900-00393b-5259ac-b3adf6-ffe4e9 */
:root {
  --captain-kirk: #9c8900;
  --elite-teal: #00393b;
  --starstruck: #5259ac;
  --wondrous-wisteria: #b3adf6;
  --porcelain-skin: #ffe4e9;
}

Tailwind CSS v4

/* Captain Kirk to Porcelain Skin — https://swatchly.xyz/palette/9c8900-00393b-5259ac-b3adf6-ffe4e9 */
@theme {
  --color-captain-kirk: #9c8900;
  --color-captain-kirk-50: #fff7c9;
  --color-captain-kirk-100: #f9eeb0;
  --color-captain-kirk-200: #e8db90;
  --color-captain-kirk-300: #d4c46d;
  --color-captain-kirk-400: #b7a53c;
  --color-captain-kirk-500: #9c8900;
  --color-captain-kirk-600: #7e6e00;
  --color-captain-kirk-700: #645700;
  --color-captain-kirk-800: #4e4400;
  --color-captain-kirk-900: #3c3400;
  --color-captain-kirk-950: #252000;
  --color-elite-teal: #00393b;
  --color-elite-teal-50: #e0fcfc;
  --color-elite-teal-100: #d3f2f3;
  --color-elite-teal-200: #bae0e1;
  --color-elite-teal-300: #9fcacc;
  --color-elite-teal-400: #7babad;
  --color-elite-teal-500: #5e9091;
  --color-elite-teal-600: #447476;
  --color-elite-teal-700: #305c5e;
  --color-elite-teal-800: #214849;
  --color-elite-teal-900: #00393b;
  --color-elite-teal-950: #0a2223;
  --color-starstruck: #5259ac;
  --color-starstruck-50: #f2f4ff;
  --color-starstruck-100: #e4e8ff;
  --color-starstruck-200: #c9d1ff;
  --color-starstruck-300: #abb6ff;
  --color-starstruck-400: #8893e9;
  --color-starstruck-500: #6c75cb;
  --color-starstruck-600: #5259ac;
  --color-starstruck-700: #40458d;
  --color-starstruck-800: #313573;
  --color-starstruck-900: #25285d;
  --color-starstruck-950: #16183d;
  --color-wondrous-wisteria: #b3adf6;
  --color-wondrous-wisteria-50: #efeeff;
  --color-wondrous-wisteria-100: #e2e1ff;
  --color-wondrous-wisteria-200: #ccc8ff;
  --color-wondrous-wisteria-300: #b3adf6;
  --color-wondrous-wisteria-400: #9690d5;
  --color-wondrous-wisteria-500: #7d76ba;
  --color-wondrous-wisteria-600: #645d9e;
  --color-wondrous-wisteria-700: #504983;
  --color-wondrous-wisteria-800: #3f386c;
  --color-wondrous-wisteria-900: #312b57;
  --color-wondrous-wisteria-950: #1e1a39;
  --color-porcelain-skin: #ffe4e9;
  --color-porcelain-skin-50: #fff2f4;
  --color-porcelain-skin-100: #ffe4e9;
  --color-porcelain-skin-200: #e6d2d6;
  --color-porcelain-skin-300: #d1bbbf;
  --color-porcelain-skin-400: #b39b9f;
  --color-porcelain-skin-500: #977f84;
  --color-porcelain-skin-600: #7c6569;
  --color-porcelain-skin-700: #634f53;
  --color-porcelain-skin-800: #4f3d40;
  --color-porcelain-skin-900: #3d2e31;
  --color-porcelain-skin-950: #271c1e;
}