Bronze to Sea Serpent Color Palette

About this palette

Bronze to Sea Serpent is a 4-color vibrant palette: #AA7E00 (Bronze), #8797FF (Perrywinkle), #C51162 (Secret Affair), #00CFE7 (Sea Serpent). It mixes yellow, purple, red, turquoise tones and feels balanced overall. The strongest text pairing is #C51162 on #00CFE7 with a contrast ratio of 3.05:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bronze	rgb(170, 126, 0)	hsl(44, 100%, 33%)
Perrywinkle	rgb(135, 151, 255)	hsl(232, 100%, 76%)
Secret Affair	rgb(197, 17, 98)	hsl(333, 84%, 42%)
Sea Serpent	rgb(0, 207, 231)	hsl(186, 100%, 45%)

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.

Aa3.05:1 Poor#C51162 on #00CFE7
Aa3.05:1 Poor#00CFE7 on #C51162

Color blindness preview

CSS variables

/* Bronze to Sea Serpent — https://swatchly.xyz/palette/aa7e00-8797ff-c51162-00cfe7 */
:root {
  --bronze: #aa7e00;
  --perrywinkle: #8797ff;
  --secret-affair: #c51162;
  --sea-serpent: #00cfe7;
}

Tailwind CSS v4

/* Bronze to Sea Serpent — https://swatchly.xyz/palette/aa7e00-8797ff-c51162-00cfe7 */
@theme {
  --color-bronze: #aa7e00;
  --color-bronze-50: #fff4de;
  --color-bronze-100: #ffe8bd;
  --color-bronze-200: #f5d38e;
  --color-bronze-300: #e2bb6b;
  --color-bronze-400: #c59a3b;
  --color-bronze-500: #aa7e00;
  --color-bronze-600: #896500;
  --color-bronze-700: #6d5000;
  --color-bronze-800: #563e00;
  --color-bronze-900: #432f00;
  --color-bronze-950: #2a1d00;
  --color-perrywinkle: #8797ff;
  --color-perrywinkle-50: #f2f5ff;
  --color-perrywinkle-100: #e5eaff;
  --color-perrywinkle-200: #ccd5ff;
  --color-perrywinkle-300: #afbcff;
  --color-perrywinkle-400: #8797ff;
  --color-perrywinkle-500: #6d7be0;
  --color-perrywinkle-600: #5560c0;
  --color-perrywinkle-700: #4149a2;
  --color-perrywinkle-800: #313785;
  --color-perrywinkle-900: #25296b;
  --color-perrywinkle-950: #151847;
  --color-secret-affair: #c51162;
  --color-secret-affair-50: #fff1f4;
  --color-secret-affair-100: #ffe3e9;
  --color-secret-affair-200: #ffc7d4;
  --color-secret-affair-300: #ffa3bb;
  --color-secret-affair-400: #ff6497;
  --color-secret-affair-500: #e53c7c;
  --color-secret-affair-600: #c51162;
  --color-secret-affair-700: #a0004d;
  --color-secret-affair-800: #7f003c;
  --color-secret-affair-900: #63002d;
  --color-secret-affair-950: #41001b;
  --color-sea-serpent: #00cfe7;
  --color-sea-serpent-50: #d3f8ff;
  --color-sea-serpent-100: #adf3ff;
  --color-sea-serpent-200: #73e3f6;
  --color-sea-serpent-300: #00cfe7;
  --color-sea-serpent-400: #00aec2;
  --color-sea-serpent-500: #0091a2;
  --color-sea-serpent-600: #007584;
  --color-sea-serpent-700: #005e6a;
  --color-sea-serpent-800: #004a54;
  --color-sea-serpent-900: #003a42;
  --color-sea-serpent-950: #00242a;
}