Golden Goose to Petrichor color palette

FDD251Golden Goose BB004BVelvet Magic 00A395Silken Jade 2F27A2Depths of Night 4ACECEPetrichor

About this palette

Golden Goose to Petrichor is a 5-color vibrant, cool palette: #FDD251 (Golden Goose), #BB004B (Velvet Magic), #00A395 (Silken Jade), #2F27A2 (Depths of Night), #4ACECE (Petrichor). It mixes yellow, red, turquoise, purple tones and feels cool overall. The strongest text pairing is #FDD251 on #2F27A2 with a contrast ratio of 7.51:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Golden Goose	rgb(253, 210, 81)	hsl(45, 98%, 65%)
Velvet Magic	rgb(187, 0, 75)	hsl(336, 100%, 37%)
Silken Jade	rgb(0, 163, 149)	hsl(175, 100%, 32%)
Depths of Night	rgb(47, 39, 162)	hsl(244, 61%, 39%)
Petrichor	rgb(74, 206, 206)	hsl(180, 57%, 55%)

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.

Aa7.51:1 Very good#FDD251 on #2F27A2
Aa7.51:1 Very good#2F27A2 on #FDD251
Aa5.70:1 Good#2F27A2 on #4ACECE
Aa5.70:1 Good#4ACECE on #2F27A2
Aa4.52:1 Good#FDD251 on #BB004B
Aa4.52:1 Good#BB004B on #FDD251
Aa3.45:1 Poor#00A395 on #2F27A2
Aa3.45:1 Poor#2F27A2 on #00A395

Color blindness preview

CSS variables

/* Golden Goose to Petrichor — https://swatchly.xyz/palette/fdd251-bb004b-00a395-2f27a2-4acece */
:root {
  --golden-goose: #fdd251;
  --velvet-magic: #bb004b;
  --silken-jade: #00a395;
  --depths-of-night: #2f27a2;
  --petrichor: #4acece;
}

Tailwind CSS v4

/* Golden Goose to Petrichor — https://swatchly.xyz/palette/fdd251-bb004b-00a395-2f27a2-4acece */
@theme {
  --color-golden-goose: #fdd251;
  --color-golden-goose-50: #fff4d7;
  --color-golden-goose-100: #ffe9ae;
  --color-golden-goose-200: #fdd251;
  --color-golden-goose-300: #e0bd54;
  --color-golden-goose-400: #c49c02;
  --color-golden-goose-500: #a38100;
  --color-golden-goose-600: #846800;
  --color-golden-goose-700: #695200;
  --color-golden-goose-800: #524000;
  --color-golden-goose-900: #403100;
  --color-golden-goose-950: #281e00;
  --color-velvet-magic: #bb004b;
  --color-velvet-magic-50: #fff1f3;
  --color-velvet-magic-100: #ffe1e5;
  --color-velvet-magic-200: #ffc3cb;
  --color-velvet-magic-300: #ff9cac;
  --color-velvet-magic-400: #fc5c82;
  --color-velvet-magic-500: #dd3665;
  --color-velvet-magic-600: #bb004b;
  --color-velvet-magic-700: #96003b;
  --color-velvet-magic-800: #77002d;
  --color-velvet-magic-900: #5e0022;
  --color-velvet-magic-950: #3e0013;
  --color-silken-jade: #00a395;
  --color-silken-jade-50: #dcfff9;
  --color-silken-jade-100: #bafdf3;
  --color-silken-jade-200: #9cede1;
  --color-silken-jade-300: #79dacd;
  --color-silken-jade-400: #46bdaf;
  --color-silken-jade-500: #00a395;
  --color-silken-jade-600: #008378;
  --color-silken-jade-700: #00685f;
  --color-silken-jade-800: #00514a;
  --color-silken-jade-900: #003e38;
  --color-silken-jade-950: #002723;
  --color-depths-of-night: #2f27a2;
  --color-depths-of-night-50: #f2f5ff;
  --color-depths-of-night-100: #e5eaff;
  --color-depths-of-night-200: #ccd5ff;
  --color-depths-of-night-300: #afbcff;
  --color-depths-of-night-400: #8897ff;
  --color-depths-of-night-500: #6a75f4;
  --color-depths-of-night-600: #5259d3;
  --color-depths-of-night-700: #3f43b2;
  --color-depths-of-night-800: #2f27a2;
  --color-depths-of-night-900: #242377;
  --color-depths-of-night-950: #141350;
  --color-petrichor: #4acece;
  --color-petrichor-50: #bdfffe;
  --color-petrichor-100: #a9f5f4;
  --color-petrichor-200: #86e2e2;
  --color-petrichor-300: #4acece;
  --color-petrichor-400: #24afaf;
  --color-petrichor-500: #009393;
  --color-petrichor-600: #007777;
  --color-petrichor-700: #005f5f;
  --color-petrichor-800: #004b4c;
  --color-petrichor-900: #003b3b;
  --color-petrichor-950: #002525;
}