Pāua to Honeysuckle Color Palette

About this palette

Pāua to Honeysuckle is a 4-color palette: #2C254D (Pāua), #5058BD (Savoy Blue), #A69900 (Lucky), #E8E867 (Honeysuckle). It mixes purple, yellow tones and feels balanced overall. The strongest text pairing is #2C254D on #E8E867 with a contrast ratio of 10.93:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pāua	rgb(44, 37, 77)	hsl(250, 35%, 22%)
Savoy Blue	rgb(80, 88, 189)	hsl(236, 45%, 53%)
Lucky	rgb(166, 153, 0)	hsl(55, 100%, 33%)
Honeysuckle	rgb(232, 232, 103)	hsl(60, 74%, 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.93:1 Very good#2C254D on #E8E867
Aa10.93:1 Very good#E8E867 on #2C254D
Aa4.85:1 Good#2C254D on #A69900
Aa4.85:1 Good#A69900 on #2C254D
Aa4.66:1 Good#5058BD on #E8E867
Aa4.66:1 Good#E8E867 on #5058BD

Color blindness preview

CSS variables

/* Pāua to Honeysuckle — https://swatchly.xyz/palette/2c254d-5058bd-a69900-e8e867 */
:root {
  --p-ua: #2c254d;
  --savoy-blue: #5058bd;
  --lucky: #a69900;
  --honeysuckle: #e8e867;
}

Tailwind CSS v4

/* Pāua to Honeysuckle — https://swatchly.xyz/palette/2c254d-5058bd-a69900-e8e867 */
@theme {
  --color-p-ua: #2c254d;
  --color-p-ua-50: #f4f4ff;
  --color-p-ua-100: #eae8ff;
  --color-p-ua-200: #d6d2f9;
  --color-p-ua-300: #bfbbe6;
  --color-p-ua-400: #9f9ac9;
  --color-p-ua-500: #827dac;
  --color-p-ua-600: #67618e;
  --color-p-ua-700: #504a72;
  --color-p-ua-800: #3c3759;
  --color-p-ua-900: #2c254d;
  --color-p-ua-950: #1a172a;
  --color-savoy-blue: #5058bd;
  --color-savoy-blue-50: #f2f5ff;
  --color-savoy-blue-100: #e4e9ff;
  --color-savoy-blue-200: #c9d2ff;
  --color-savoy-blue-300: #abb8ff;
  --color-savoy-blue-400: #8492fa;
  --color-savoy-blue-500: #6975dc;
  --color-savoy-blue-600: #5058bd;
  --color-savoy-blue-700: #3e449c;
  --color-savoy-blue-800: #2f3380;
  --color-savoy-blue-900: #232667;
  --color-savoy-blue-950: #141645;
  --color-lucky: #a69900;
  --color-lucky-50: #faf4b4;
  --color-lucky-100: #f0e99f;
  --color-lucky-200: #dcd37a;
  --color-lucky-300: #c5bb52;
  --color-lucky-400: #a69900;
  --color-lucky-500: #8a7f00;
  --color-lucky-600: #706700;
  --color-lucky-700: #595200;
  --color-lucky-800: #474000;
  --color-lucky-900: #373200;
  --color-lucky-950: #242000;
  --color-honeysuckle: #e8e867;
  --color-honeysuckle-50: #fdffd2;
  --color-honeysuckle-100: #f6f8b5;
  --color-honeysuckle-200: #e8e867;
  --color-honeysuckle-300: #cecf6a;
  --color-honeysuckle-400: #aead2e;
  --color-honeysuckle-500: #919000;
  --color-honeysuckle-600: #747300;
  --color-honeysuckle-700: #5b5a00;
  --color-honeysuckle-800: #464500;
  --color-honeysuckle-900: #363500;
  --color-honeysuckle-950: #212100;
}