Song of the Sea to Endo Color Palette

About this palette

Song of the Sea to Endo is a 5-color cool palette: #4F719F (Song of the Sea), #2F5380 (Galaxy Blue), #EBD6B6 (Champagne Gold), #CA98CC (Pastel Violet), #5CA55D (Endo). It mixes blue, yellow, pink, green tones and feels cool overall. The strongest text pairing is #2F5380 on #EBD6B6 with a contrast ratio of 5.55:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Song of the Sea	rgb(79, 113, 159)	hsl(214, 34%, 47%)
Galaxy Blue	rgb(47, 83, 128)	hsl(213, 46%, 34%)
Champagne Gold	rgb(235, 214, 182)	hsl(36, 57%, 82%)
Pastel Violet	rgb(202, 152, 204)	hsl(298, 34%, 70%)
Endo	rgb(92, 165, 93)	hsl(121, 29%, 50%)

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.

Aa5.55:1 Good#2F5380 on #EBD6B6
Aa5.55:1 Good#EBD6B6 on #2F5380
Aa3.53:1 Poor#4F719F on #EBD6B6
Aa3.53:1 Poor#EBD6B6 on #4F719F
Aa3.32:1 Poor#2F5380 on #CA98CC
Aa3.32:1 Poor#CA98CC on #2F5380

Color blindness preview

CSS variables

/* Song of the Sea to Endo — https://swatchly.xyz/palette/4f719f-2f5380-ebd6b6-ca98cc-5ca55d */
:root {
  --song-of-the-sea: #4f719f;
  --galaxy-blue: #2f5380;
  --champagne-gold: #ebd6b6;
  --pastel-violet: #ca98cc;
  --endo: #5ca55d;
}

Tailwind CSS v4

/* Song of the Sea to Endo — https://swatchly.xyz/palette/4f719f-2f5380-ebd6b6-ca98cc-5ca55d */
@theme {
  --color-song-of-the-sea: #4f719f;
  --color-song-of-the-sea-50: #eff6ff;
  --color-song-of-the-sea-100: #e0edff;
  --color-song-of-the-sea-200: #c1dbff;
  --color-song-of-the-sea-300: #a6c5f0;
  --color-song-of-the-sea-400: #84a6d5;
  --color-song-of-the-sea-500: #688bbb;
  --color-song-of-the-sea-600: #4f719f;
  --color-song-of-the-sea-700: #3b5983;
  --color-song-of-the-sea-800: #2b456a;
  --color-song-of-the-sea-900: #1e3554;
  --color-song-of-the-sea-950: #102137;
  --color-galaxy-blue: #2f5380;
  --color-galaxy-blue-50: #eff6ff;
  --color-galaxy-blue-100: #deedff;
  --color-galaxy-blue-200: #bcd9ff;
  --color-galaxy-blue-300: #a0c2ef;
  --color-galaxy-blue-400: #7ca2d3;
  --color-galaxy-blue-500: #6086b6;
  --color-galaxy-blue-600: #466b98;
  --color-galaxy-blue-700: #2f5380;
  --color-galaxy-blue-800: #244164;
  --color-galaxy-blue-900: #19314f;
  --color-galaxy-blue-950: #0d1e34;
  --color-champagne-gold: #ebd6b6;
  --color-champagne-gold-50: #fff5e5;
  --color-champagne-gold-100: #f8ebd7;
  --color-champagne-gold-200: #ebd6b6;
  --color-champagne-gold-300: #d1c0a5;
  --color-champagne-gold-400: #b3a082;
  --color-champagne-gold-500: #978466;
  --color-champagne-gold-600: #7c694d;
  --color-champagne-gold-700: #635339;
  --color-champagne-gold-800: #4e4029;
  --color-champagne-gold-900: #3d311d;
  --color-champagne-gold-950: #261e10;
  --color-pastel-violet: #ca98cc;
  --color-pastel-violet-50: #fff5ff;
  --color-pastel-violet-100: #ffe9ff;
  --color-pastel-violet-200: #f5d1f7;
  --color-pastel-violet-300: #e4bae5;
  --color-pastel-violet-400: #ca98cc;
  --color-pastel-violet-500: #ab7bad;
  --color-pastel-violet-600: #8d5f90;
  --color-pastel-violet-700: #724874;
  --color-pastel-violet-800: #5a365c;
  --color-pastel-violet-900: #462747;
  --color-pastel-violet-950: #2c162d;
  --color-endo: #5ca55d;
  --color-endo-50: #e7ffe6;
  --color-endo-100: #d1fdd0;
  --color-endo-200: #b9eeb8;
  --color-endo-300: #9fdb9e;
  --color-endo-400: #7abf7a;
  --color-endo-500: #5ca55d;
  --color-endo-600: #3f8741;
  --color-endo-700: #286d2b;
  --color-endo-800: #16561b;
  --color-endo-900: #0a4210;
  --color-endo-950: #032906;
}