Baby Blue to Soul Anchor Color Palette

About this palette

Baby Blue to Soul Anchor is a 5-color warm, vintage palette: #AAD2FB (Baby Blue), #C582AA (Moonlight Mauve), #A16F28 (Inca Gold), #00633F (Jewel), #591746 (Soul Anchor). It mixes blue, pink, orange, green, red tones and feels warm overall. The strongest text pairing is #AAD2FB on #591746 with a contrast ratio of 8.14:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Baby Blue	rgb(170, 210, 251)	hsl(210, 91%, 83%)
Moonlight Mauve	rgb(197, 130, 170)	hsl(324, 37%, 64%)
Inca Gold	rgb(161, 111, 40)	hsl(35, 60%, 39%)
Jewel	rgb(0, 99, 63)	hsl(158, 100%, 19%)
Soul Anchor	rgb(89, 23, 70)	hsl(317, 59%, 22%)

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.

Aa8.14:1 Very good#AAD2FB on #591746
Aa8.14:1 Very good#591746 on #AAD2FB
Aa4.66:1 Good#AAD2FB on #00633F
Aa4.66:1 Good#00633F on #AAD2FB
Aa4.37:1 Poor#C582AA on #591746
Aa4.37:1 Poor#591746 on #C582AA

Color blindness preview

CSS variables

/* Baby Blue to Soul Anchor — https://swatchly.xyz/palette/aad2fb-c582aa-a16f28-00633f-591746 */
:root {
  --baby-blue: #aad2fb;
  --moonlight-mauve: #c582aa;
  --inca-gold: #a16f28;
  --jewel: #00633f;
  --soul-anchor: #591746;
}

Tailwind CSS v4

/* Baby Blue to Soul Anchor — https://swatchly.xyz/palette/aad2fb-c582aa-a16f28-00633f-591746 */
@theme {
  --color-baby-blue: #aad2fb;
  --color-baby-blue-50: #e2f0ff;
  --color-baby-blue-100: #cde6ff;
  --color-baby-blue-200: #aad2fb;
  --color-baby-blue-300: #9abde0;
  --color-baby-blue-400: #7a9fc5;
  --color-baby-blue-500: #6085ab;
  --color-baby-blue-600: #486c90;
  --color-baby-blue-700: #365777;
  --color-baby-blue-800: #284561;
  --color-baby-blue-900: #1c354d;
  --color-baby-blue-950: #0f2132;
  --color-moonlight-mauve: #c582aa;
  --color-moonlight-mauve-50: #ffedf7;
  --color-moonlight-mauve-100: #ffdcef;
  --color-moonlight-mauve-200: #f7c0df;
  --color-moonlight-mauve-300: #e3a5c9;
  --color-moonlight-mauve-400: #c582aa;
  --color-moonlight-mauve-500: #a9688f;
  --color-moonlight-mauve-600: #8d5075;
  --color-moonlight-mauve-700: #733d5f;
  --color-moonlight-mauve-800: #5d2d4b;
  --color-moonlight-mauve-900: #4a213b;
  --color-moonlight-mauve-950: #311326;
  --color-inca-gold: #a16f28;
  --color-inca-gold-50: #fff0df;
  --color-inca-gold-100: #ffe2be;
  --color-inca-gold-200: #f3c995;
  --color-inca-gold-300: #deaf74;
  --color-inca-gold-400: #bf8c4a;
  --color-inca-gold-500: #a16f28;
  --color-inca-gold-600: #86570b;
  --color-inca-gold-700: #6c4400;
  --color-inca-gold-800: #563500;
  --color-inca-gold-900: #442900;
  --color-inca-gold-950: #2c1900;
  --color-jewel: #00633f;
  --color-jewel-50: #ddffeb;
  --color-jewel-100: #c8f9dd;
  --color-jewel-200: #ade7c6;
  --color-jewel-300: #8ed1ad;
  --color-jewel-400: #67b38b;
  --color-jewel-500: #47976f;
  --color-jewel-600: #2a7b56;
  --color-jewel-700: #00633f;
  --color-jewel-800: #034d31;
  --color-jewel-900: #003c24;
  --color-jewel-950: #002615;
  --color-soul-anchor: #591746;
  --color-soul-anchor-50: #fff0f9;
  --color-soul-anchor-100: #ffe1f3;
  --color-soul-anchor-200: #fec3e7;
  --color-soul-anchor-300: #eca9d3;
  --color-soul-anchor-400: #d087b5;
  --color-soul-anchor-500: #b46b9b;
  --color-soul-anchor-600: #985280;
  --color-soul-anchor-700: #7d3d68;
  --color-soul-anchor-800: #662e54;
  --color-soul-anchor-900: #591746;
  --color-soul-anchor-950: #36132b;
}