Pacific Pleasure to Blue-Collar Color Palette

About this palette

Pacific Pleasure to Blue-Collar is a 5-color cool, monochromatic palette: #007C95 (Pacific Pleasure), #92E3FF (Winter Wizard), #003C47 (Royal Neptune), #5AA5B9 (Surgical), #005D76 (Blue-Collar). It mixes blue, turquoise tones and feels cool overall. The strongest text pairing is #92E3FF on #003C47 with a contrast ratio of 8.43:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pacific Pleasure	rgb(0, 124, 149)	hsl(190, 100%, 29%)
Winter Wizard	rgb(146, 227, 255)	hsl(195, 100%, 79%)
Royal Neptune	rgb(0, 60, 71)	hsl(189, 100%, 14%)
Surgical	rgb(90, 165, 185)	hsl(193, 40%, 54%)
Blue-Collar	rgb(0, 93, 118)	hsl(193, 100%, 23%)

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.43:1 Very good#92E3FF on #003C47
Aa8.43:1 Very good#003C47 on #92E3FF
Aa5.18:1 Good#92E3FF on #005D76
Aa5.18:1 Good#005D76 on #92E3FF
Aa4.33:1 Poor#003C47 on #5AA5B9
Aa4.33:1 Poor#5AA5B9 on #003C47
Aa3.39:1 Poor#007C95 on #92E3FF
Aa3.39:1 Poor#92E3FF on #007C95

Color blindness preview

CSS variables

/* Pacific Pleasure to Blue-Collar — https://swatchly.xyz/palette/007c95-92e3ff-003c47-5aa5b9-005d76 */
:root {
  --pacific-pleasure: #007c95;
  --winter-wizard: #92e3ff;
  --royal-neptune: #003c47;
  --surgical: #5aa5b9;
  --blue-collar: #005d76;
}

Tailwind CSS v4

/* Pacific Pleasure to Blue-Collar — https://swatchly.xyz/palette/007c95-92e3ff-003c47-5aa5b9-005d76 */
@theme {
  --color-pacific-pleasure: #007c95;
  --color-pacific-pleasure-50: #e6f9ff;
  --color-pacific-pleasure-100: #cef3ff;
  --color-pacific-pleasure-200: #a3e5f9;
  --color-pacific-pleasure-300: #83d0e7;
  --color-pacific-pleasure-400: #58b2cb;
  --color-pacific-pleasure-500: #3397b0;
  --color-pacific-pleasure-600: #007c95;
  --color-pacific-pleasure-700: #006277;
  --color-pacific-pleasure-800: #004d5d;
  --color-pacific-pleasure-900: #003b48;
  --color-pacific-pleasure-950: #00252e;
  --color-winter-wizard: #92e3ff;
  --color-winter-wizard-50: #e4f8ff;
  --color-winter-wizard-100: #caf1ff;
  --color-winter-wizard-200: #92e3ff;
  --color-winter-wizard-300: #87cbe2;
  --color-winter-wizard-400: #5facc6;
  --color-winter-wizard-500: #3f91ab;
  --color-winter-wizard-600: #21768f;
  --color-winter-wizard-700: #055f75;
  --color-winter-wizard-800: #004a5d;
  --color-winter-wizard-900: #003948;
  --color-winter-wizard-950: #00242e;
  --color-royal-neptune: #003c47;
  --color-royal-neptune-50: #e4faff;
  --color-royal-neptune-100: #d1f2fa;
  --color-royal-neptune-200: #b8dfe9;
  --color-royal-neptune-300: #9dcad5;
  --color-royal-neptune-400: #7aabb7;
  --color-royal-neptune-500: #5d909d;
  --color-royal-neptune-600: #447681;
  --color-royal-neptune-700: #305e69;
  --color-royal-neptune-800: #214b54;
  --color-royal-neptune-900: #003c47;
  --color-royal-neptune-950: #0a252b;
  --color-surgical: #5aa5b9;
  --color-surgical-50: #ddf7ff;
  --color-surgical-100: #c0f0fd;
  --color-surgical-200: #a3dcec;
  --color-surgical-300: #84c5d7;
  --color-surgical-400: #5aa5b9;
  --color-surgical-500: #3f8b9e;
  --color-surgical-600: #257183;
  --color-surgical-700: #0f5b6b;
  --color-surgical-800: #004857;
  --color-surgical-900: #003844;
  --color-surgical-950: #00242d;
  --color-blue-collar: #005d76;
  --color-blue-collar-50: #e8f8ff;
  --color-blue-collar-100: #d0f2ff;
  --color-blue-collar-200: #abe1f6;
  --color-blue-collar-300: #8dcbe3;
  --color-blue-collar-400: #66acc6;
  --color-blue-collar-500: #4690ab;
  --color-blue-collar-600: #29748e;
  --color-blue-collar-700: #005d76;
  --color-blue-collar-800: #02495d;
  --color-blue-collar-900: #003848;
  --color-blue-collar-950: #00232e;
}