Soul Anchor to Walkie Chalkie Color Palette

About this palette

Soul Anchor to Walkie Chalkie is a 5-color vintage palette: #61123C (Soul Anchor), #227263 (Nordic Forest), #628CDE (Blue Jay), #FCBA46 (Mango Latte), #FFF6F8 (Walkie Chalkie). It mixes red, turquoise, blue, yellow, white tones and feels balanced overall. The strongest text pairing is #61123C on #FFF6F8 with a contrast ratio of 11.92:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Soul Anchor	rgb(97, 18, 60)	hsl(328, 69%, 23%)
Nordic Forest	rgb(34, 114, 99)	hsl(169, 54%, 29%)
Blue Jay	rgb(98, 140, 222)	hsl(220, 65%, 63%)
Mango Latte	rgb(252, 186, 70)	hsl(38, 97%, 63%)
Walkie Chalkie	rgb(255, 246, 248)	hsl(347, 100%, 98%)

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.

Aa11.92:1 Very good#61123C on #FFF6F8
Aa11.92:1 Very good#FFF6F8 on #61123C
Aa7.38:1 Very good#61123C on #FCBA46
Aa7.38:1 Very good#FCBA46 on #61123C
Aa5.41:1 Good#227263 on #FFF6F8
Aa5.41:1 Good#FFF6F8 on #227263
Aa3.81:1 Poor#61123C on #628CDE
Aa3.81:1 Poor#628CDE on #61123C

Color blindness preview

CSS variables

/* Soul Anchor to Walkie Chalkie — https://swatchly.xyz/palette/61123c-227263-628cde-fcba46-fff6f8 */
:root {
  --soul-anchor: #61123c;
  --nordic-forest: #227263;
  --blue-jay: #628cde;
  --mango-latte: #fcba46;
  --walkie-chalkie: #fff6f8;
}

Tailwind CSS v4

/* Soul Anchor to Walkie Chalkie — https://swatchly.xyz/palette/61123c-227263-628cde-fcba46-fff6f8 */
@theme {
  --color-soul-anchor: #61123c;
  --color-soul-anchor-50: #fff1f6;
  --color-soul-anchor-100: #ffe2ed;
  --color-soul-anchor-200: #ffc4db;
  --color-soul-anchor-300: #f5a6c6;
  --color-soul-anchor-400: #d984a8;
  --color-soul-anchor-500: #be688e;
  --color-soul-anchor-600: #a14e74;
  --color-soul-anchor-700: #863a5d;
  --color-soul-anchor-800: #6d2b4a;
  --color-soul-anchor-900: #61123c;
  --color-soul-anchor-950: #3b1125;
  --color-nordic-forest: #227263;
  --color-nordic-forest-50: #d8fff5;
  --color-nordic-forest-100: #c7f5e9;
  --color-nordic-forest-200: #aae2d4;
  --color-nordic-forest-300: #8bcbbc;
  --color-nordic-forest-400: #63ab9b;
  --color-nordic-forest-500: #428e7e;
  --color-nordic-forest-600: #227263;
  --color-nordic-forest-700: #125b4e;
  --color-nordic-forest-800: #04483d;
  --color-nordic-forest-900: #00382f;
  --color-nordic-forest-950: #00231d;
  --color-blue-jay: #628cde;
  --color-blue-jay-50: #f2f7ff;
  --color-blue-jay-100: #e5efff;
  --color-blue-jay-200: #caddff;
  --color-blue-jay-300: #a9c7ff;
  --color-blue-jay-400: #7ea7f7;
  --color-blue-jay-500: #628cde;
  --color-blue-jay-600: #486fbe;
  --color-blue-jay-700: #33579f;
  --color-blue-jay-800: #234282;
  --color-blue-jay-900: #183267;
  --color-blue-jay-950: #0b1e44;
  --color-mango-latte: #fcba46;
  --color-mango-latte-50: #fff7ec;
  --color-mango-latte-100: #ffedd2;
  --color-mango-latte-200: #ffd697;
  --color-mango-latte-300: #fcba46;
  --color-mango-latte-400: #d79a28;
  --color-mango-latte-500: #b67e00;
  --color-mango-latte-600: #926500;
  --color-mango-latte-700: #744f00;
  --color-mango-latte-800: #5a3d00;
  --color-mango-latte-900: #452e00;
  --color-mango-latte-950: #2c1c00;
  --color-walkie-chalkie: #fff6f8;
  --color-walkie-chalkie-50: #fff6f8;
  --color-walkie-chalkie-100: #f2ecee;
  --color-walkie-chalkie-200: #ded8d9;
  --color-walkie-chalkie-300: #c8c0c2;
  --color-walkie-chalkie-400: #a8a0a2;
  --color-walkie-chalkie-500: #8c8486;
  --color-walkie-chalkie-600: #71696b;
  --color-walkie-chalkie-700: #5a5355;
  --color-walkie-chalkie-800: #464142;
  --color-walkie-chalkie-900: #363132;
  --color-walkie-chalkie-950: #221e1f;
}