Soulless to Shamrock Color Palette

About this palette

Soulless to Shamrock is a 5-color palette: #1D1308 (Soulless), #004A7B (Mermaid Blues), #EA8DC2 (Bubblegum Beam), #F4F8FF (Cotton Ball), #0DA067 (Shamrock). It mixes black, blue, pink, white, green tones and feels cool overall. The strongest text pairing is #1D1308 on #F4F8FF with a contrast ratio of 17.16:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Soulless	rgb(29, 19, 8)	hsl(31, 57%, 7%)
Mermaid Blues	rgb(0, 74, 123)	hsl(204, 100%, 24%)
Bubblegum Beam	rgb(234, 141, 194)	hsl(326, 69%, 74%)
Cotton Ball	rgb(244, 248, 255)	hsl(218, 100%, 98%)
Shamrock	rgb(13, 160, 103)	hsl(157, 85%, 34%)

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.

Aa17.16:1 Super#1D1308 on #F4F8FF
Aa17.16:1 Super#F4F8FF on #1D1308
Aa8.70:1 Very good#004A7B on #F4F8FF
Aa8.70:1 Very good#F4F8FF on #004A7B
Aa7.91:1 Very good#1D1308 on #EA8DC2
Aa7.91:1 Very good#EA8DC2 on #1D1308
Aa5.43:1 Good#1D1308 on #0DA067
Aa5.43:1 Good#0DA067 on #1D1308

Color blindness preview

CSS variables

/* Soulless to Shamrock — https://swatchly.xyz/palette/1d1308-004a7b-ea8dc2-f4f8ff-0da067 */
:root {
  --soulless: #1d1308;
  --mermaid-blues: #004a7b;
  --bubblegum-beam: #ea8dc2;
  --cotton-ball: #f4f8ff;
  --shamrock: #0da067;
}

Tailwind CSS v4

/* Soulless to Shamrock — https://swatchly.xyz/palette/1d1308-004a7b-ea8dc2-f4f8ff-0da067 */
@theme {
  --color-soulless: #1d1308;
  --color-soulless-50: #fcf4eb;
  --color-soulless-100: #f3e9e0;
  --color-soulless-200: #e0d5ca;
  --color-soulless-300: #cbbfb2;
  --color-soulless-400: #ac9f91;
  --color-soulless-500: #8f8174;
  --color-soulless-600: #726558;
  --color-soulless-700: #584d42;
  --color-soulless-800: #42392f;
  --color-soulless-900: #302821;
  --color-soulless-950: #1d1308;
  --color-mermaid-blues: #004a7b;
  --color-mermaid-blues-50: #edf6ff;
  --color-mermaid-blues-100: #dbeeff;
  --color-mermaid-blues-200: #b7dcff;
  --color-mermaid-blues-300: #93c8f8;
  --color-mermaid-blues-400: #6ea9de;
  --color-mermaid-blues-500: #518ec4;
  --color-mermaid-blues-600: #3774a7;
  --color-mermaid-blues-700: #235d8c;
  --color-mermaid-blues-800: #004a7b;
  --color-mermaid-blues-900: #09395d;
  --color-mermaid-blues-950: #02243e;
  --color-bubblegum-beam: #ea8dc2;
  --color-bubblegum-beam-50: #fff8fb;
  --color-bubblegum-beam-100: #ffedf6;
  --color-bubblegum-beam-200: #ffd3ea;
  --color-bubblegum-beam-300: #ffb2dc;
  --color-bubblegum-beam-400: #ea8dc2;
  --color-bubblegum-beam-500: #c86fa3;
  --color-bubblegum-beam-600: #a85285;
  --color-bubblegum-beam-700: #8a3b6b;
  --color-bubblegum-beam-800: #6e2954;
  --color-bubblegum-beam-900: #561b40;
  --color-bubblegum-beam-950: #360d27;
  --color-cotton-ball: #f4f8ff;
  --color-cotton-ball-50: #f4f8ff;
  --color-cotton-ball-100: #ebedf2;
  --color-cotton-ball-200: #d6d9de;
  --color-cotton-ball-300: #bfc2c8;
  --color-cotton-ball-400: #9fa2a9;
  --color-cotton-ball-500: #83878d;
  --color-cotton-ball-600: #696c72;
  --color-cotton-ball-700: #52555b;
  --color-cotton-ball-800: #404247;
  --color-cotton-ball-900: #313337;
  --color-cotton-ball-950: #1e1f22;
  --color-shamrock: #0da067;
  --color-shamrock-50: #ddffeb;
  --color-shamrock-100: #bafed7;
  --color-shamrock-200: #9aedbf;
  --color-shamrock-300: #77d9a5;
  --color-shamrock-400: #46bc83;
  --color-shamrock-500: #0da067;
  --color-shamrock-600: #008152;
  --color-shamrock-700: #006740;
  --color-shamrock-800: #005031;
  --color-shamrock-900: #003e25;
  --color-shamrock-950: #002715;
}