Meteorite to We Peep color palette

4C3A71Meteorite 006C70Aqua Obscura C6435ASaffron Desires A18FCFFleur-De-Lis CDC66FMuted Lime FFD7D9We Peep

Open in generator Export PNG, PDF, ASE…

About this palette

Meteorite to We Peep is a 6-color vintage palette: #4C3A71 (Meteorite), #006C70 (Aqua Obscura), #C6435A (Saffron Desires), #A18FCF (Fleur-De-Lis), #CDC66F (Muted Lime), #FFD7D9 (We Peep). It mixes purple, turquoise, red, yellow, pink tones and feels balanced overall. The strongest text pairing is #4C3A71 on #FFD7D9 with a contrast ratio of 7.43:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Meteorite	rgb(76, 58, 113)	hsl(260, 32%, 34%)
Aqua Obscura	rgb(0, 108, 112)	hsl(182, 100%, 22%)
Saffron Desires	rgb(198, 67, 90)	hsl(349, 53%, 52%)
Fleur-De-Lis	rgb(161, 143, 207)	hsl(257, 40%, 69%)
Muted Lime	rgb(205, 198, 111)	hsl(56, 48%, 62%)
We Peep	rgb(255, 215, 217)	hsl(357, 100%, 92%)

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.43:1 Very good#4C3A71 on #FFD7D9
Aa7.43:1 Very good#FFD7D9 on #4C3A71
Aa5.53:1 Good#4C3A71 on #CDC66F
Aa5.53:1 Good#CDC66F on #4C3A71
Aa4.73:1 Good#006C70 on #FFD7D9
Aa4.73:1 Good#FFD7D9 on #006C70
Aa3.67:1 Poor#C6435A on #FFD7D9
Aa3.67:1 Poor#FFD7D9 on #C6435A

Color blindness preview

CSS variables

/* Meteorite to We Peep — https://swatchly.xyz/palette/4c3a71-006c70-c6435a-a18fcf-cdc66f-ffd7d9 */
:root {
  --meteorite: #4c3a71;
  --aqua-obscura: #006c70;
  --saffron-desires: #c6435a;
  --fleur-de-lis: #a18fcf;
  --muted-lime: #cdc66f;
  --we-peep: #ffd7d9;
}

Tailwind CSS v4

/* Meteorite to We Peep — https://swatchly.xyz/palette/4c3a71-006c70-c6435a-a18fcf-cdc66f-ffd7d9 */
@theme {
  --color-meteorite: #4c3a71;
  --color-meteorite-50: #f6f3ff;
  --color-meteorite-100: #ede7ff;
  --color-meteorite-200: #dccfff;
  --color-meteorite-300: #c7b8ef;
  --color-meteorite-400: #a998d4;
  --color-meteorite-500: #8e7cb9;
  --color-meteorite-600: #74639d;
  --color-meteorite-700: #5e4e83;
  --color-meteorite-800: #4c3a71;
  --color-meteorite-900: #3a2d55;
  --color-meteorite-950: #251b38;
  --color-aqua-obscura: #006c70;
  --color-aqua-obscura-50: #d8feff;
  --color-aqua-obscura-100: #c4f6f8;
  --color-aqua-obscura-200: #abe6e8;
  --color-aqua-obscura-300: #8ed2d5;
  --color-aqua-obscura-400: #67b6b9;
  --color-aqua-obscura-500: #479ca0;
  --color-aqua-obscura-600: #298286;
  --color-aqua-obscura-700: #006c70;
  --color-aqua-obscura-800: #005558;
  --color-aqua-obscura-900: #004144;
  --color-aqua-obscura-950: #00292b;
  --color-saffron-desires: #c6435a;
  --color-saffron-desires-50: #fff1f2;
  --color-saffron-desires-100: #ffe7e8;
  --color-saffron-desires-200: #ffced1;
  --color-saffron-desires-300: #ffaeb5;
  --color-saffron-desires-400: #fc7c8d;
  --color-saffron-desires-500: #e25f72;
  --color-saffron-desires-600: #c6435a;
  --color-saffron-desires-700: #a52a43;
  --color-saffron-desires-800: #871631;
  --color-saffron-desires-900: #6b0723;
  --color-saffron-desires-950: #470113;
  --color-fleur-de-lis: #a18fcf;
  --color-fleur-de-lis-50: #f4f0ff;
  --color-fleur-de-lis-100: #eae3ff;
  --color-fleur-de-lis-200: #d7cafe;
  --color-fleur-de-lis-300: #c0b1eb;
  --color-fleur-de-lis-400: #a18fcf;
  --color-fleur-de-lis-500: #8775b3;
  --color-fleur-de-lis-600: #6d5c96;
  --color-fleur-de-lis-700: #58477c;
  --color-fleur-de-lis-800: #453765;
  --color-fleur-de-lis-900: #362951;
  --color-fleur-de-lis-950: #221936;
  --color-muted-lime: #cdc66f;
  --color-muted-lime-50: #fbf9cb;
  --color-muted-lime-100: #f2efbb;
  --color-muted-lime-200: #e0dc9e;
  --color-muted-lime-300: #cdc66f;
  --color-muted-lime-400: #ada654;
  --color-muted-lime-500: #918a31;
  --color-muted-lime-600: #776f0e;
  --color-muted-lime-700: #5e5800;
  --color-muted-lime-800: #4a4400;
  --color-muted-lime-900: #393400;
  --color-muted-lime-950: #232000;
  --color-we-peep: #ffd7d9;
  --color-we-peep-50: #ffe7e8;
  --color-we-peep-100: #ffd7d9;
  --color-we-peep-200: #e6c8c9;
  --color-we-peep-300: #d3b2b3;
  --color-we-peep-400: #b79395;
  --color-we-peep-500: #9d797b;
  --color-we-peep-600: #826062;
  --color-we-peep-700: #6a4c4e;
  --color-we-peep-800: #553a3c;
  --color-we-peep-900: #422c2d;
  --color-we-peep-950: #2a1a1b;
}