Cruising to Serpent Sceptre Color Palette

About this palette

Cruising to Serpent Sceptre is a 4-color vibrant, neon palette: #00859B (Cruising), #EA23B3 (Magnificent Magenta), #FF62A9 (Kisses), #BACC00 (Serpent Sceptre). It mixes turquoise, pink, green tones and feels balanced overall. The strongest text pairing is #00859B on #BACC00 with a contrast ratio of 2.43:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cruising	rgb(0, 133, 155)	hsl(189, 100%, 30%)
Magnificent Magenta	rgb(234, 35, 179)	hsl(317, 83%, 53%)
Kisses	rgb(255, 98, 169)	hsl(333, 100%, 69%)
Serpent Sceptre	rgb(186, 204, 0)	hsl(65, 100%, 40%)

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.

Color blindness preview

CSS variables

/* Cruising to Serpent Sceptre — https://swatchly.xyz/palette/00859b-ea23b3-ff62a9-bacc00 */
:root {
  --cruising: #00859b;
  --magnificent-magenta: #ea23b3;
  --kisses: #ff62a9;
  --serpent-sceptre: #bacc00;
}

Tailwind CSS v4

/* Cruising to Serpent Sceptre — https://swatchly.xyz/palette/00859b-ea23b3-ff62a9-bacc00 */
@theme {
  --color-cruising: #00859b;
  --color-cruising-50: #e4faff;
  --color-cruising-100: #cef5ff;
  --color-cruising-200: #a4e8f9;
  --color-cruising-300: #85d5e8;
  --color-cruising-400: #5ab8ce;
  --color-cruising-500: #349fb5;
  --color-cruising-600: #00859b;
  --color-cruising-700: #006a7c;
  --color-cruising-800: #005261;
  --color-cruising-900: #003f4b;
  --color-cruising-950: #00272f;
  --color-magnificent-magenta: #ea23b3;
  --color-magnificent-magenta-50: #fff2f9;
  --color-magnificent-magenta-100: #ffe4f3;
  --color-magnificent-magenta-200: #ffc7e8;
  --color-magnificent-magenta-300: #ffa2db;
  --color-magnificent-magenta-400: #ff5eca;
  --color-magnificent-magenta-500: #ea23b3;
  --color-magnificent-magenta-600: #c20092;
  --color-magnificent-magenta-700: #9b0075;
  --color-magnificent-magenta-800: #7a005b;
  --color-magnificent-magenta-900: #5f0046;
  --color-magnificent-magenta-950: #3e002d;
  --color-kisses: #ff62a9;
  --color-kisses-50: #fff2f6;
  --color-kisses-100: #ffe4ed;
  --color-kisses-200: #ffc7db;
  --color-kisses-300: #ffa2c6;
  --color-kisses-400: #ff62a9;
  --color-kisses-500: #de438d;
  --color-kisses-600: #bd2172;
  --color-kisses-700: #9d005b;
  --color-kisses-800: #7c0047;
  --color-kisses-900: #610036;
  --color-kisses-950: #3f0021;
  --color-serpent-sceptre: #bacc00;
  --color-serpent-sceptre-50: #f0fdad;
  --color-serpent-sceptre-100: #e6f499;
  --color-serpent-sceptre-200: #d1e171;
  --color-serpent-sceptre-300: #bacc00;
  --color-serpent-sceptre-400: #9cab00;
  --color-serpent-sceptre-500: #818e00;
  --color-serpent-sceptre-600: #687300;
  --color-serpent-sceptre-700: #525b00;
  --color-serpent-sceptre-800: #404700;
  --color-serpent-sceptre-900: #313700;
  --color-serpent-sceptre-950: #1e2200;
}