Olympic Blue to Sage Sensation Color Palette

About this palette

Olympic Blue to Sage Sensation is a 4-color cool palette: #4C97E7 (Olympic Blue), #596500 (Serrano Pepper), #5A0023 (Merguez), #AFE081 (Sage Sensation). It mixes blue, green, red tones and feels cool overall. The strongest text pairing is #5A0023 on #AFE081 with a contrast ratio of 9.46:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Olympic Blue	rgb(76, 151, 231)	hsl(211, 76%, 60%)
Serrano Pepper	rgb(89, 101, 0)	hsl(67, 100%, 20%)
Merguez	rgb(90, 0, 35)	hsl(337, 100%, 18%)
Sage Sensation	rgb(175, 224, 129)	hsl(91, 61%, 69%)

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.

Aa9.46:1 Very good#5A0023 on #AFE081
Aa9.46:1 Very good#AFE081 on #5A0023
Aa4.72:1 Good#4C97E7 on #5A0023
Aa4.72:1 Good#5A0023 on #4C97E7
Aa4.20:1 Poor#596500 on #AFE081
Aa4.20:1 Poor#AFE081 on #596500

Color blindness preview

CSS variables

/* Olympic Blue to Sage Sensation — https://swatchly.xyz/palette/4c97e7-596500-5a0023-afe081 */
:root {
  --olympic-blue: #4c97e7;
  --serrano-pepper: #596500;
  --merguez: #5a0023;
  --sage-sensation: #afe081;
}

Tailwind CSS v4

/* Olympic Blue to Sage Sensation — https://swatchly.xyz/palette/4c97e7-596500-5a0023-afe081 */
@theme {
  --color-olympic-blue: #4c97e7;
  --color-olympic-blue-50: #f2f8ff;
  --color-olympic-blue-100: #e6f2ff;
  --color-olympic-blue-200: #c8e2ff;
  --color-olympic-blue-300: #a4cfff;
  --color-olympic-blue-400: #6cb1fd;
  --color-olympic-blue-500: #4c97e7;
  --color-olympic-blue-600: #2d79c6;
  --color-olympic-blue-700: #115fa6;
  --color-olympic-blue-800: #004987;
  --color-olympic-blue-900: #003768;
  --color-olympic-blue-950: #002143;
  --color-serrano-pepper: #596500;
  --color-serrano-pepper-50: #f1fbcd;
  --color-serrano-pepper-100: #e7f2be;
  --color-serrano-pepper-200: #d4e1a4;
  --color-serrano-pepper-300: #bfcd86;
  --color-serrano-pepper-400: #a1af60;
  --color-serrano-pepper-500: #879541;
  --color-serrano-pepper-600: #6e7b25;
  --color-serrano-pepper-700: #596500;
  --color-serrano-pepper-800: #454f00;
  --color-serrano-pepper-900: #353d00;
  --color-serrano-pepper-950: #212600;
  --color-merguez: #5a0023;
  --color-merguez-50: #fff1f3;
  --color-merguez-100: #ffe3e7;
  --color-merguez-200: #ffc6d0;
  --color-merguez-300: #faa5b5;
  --color-merguez-400: #dd8194;
  --color-merguez-500: #c06377;
  --color-merguez-600: #a0485d;
  --color-merguez-700: #823347;
  --color-merguez-800: #662335;
  --color-merguez-900: #5a0023;
  --color-merguez-950: #320b16;
  --color-sage-sensation: #afe081;
  --color-sage-sensation-50: #dcfac3;
  --color-sage-sensation-100: #cef0b1;
  --color-sage-sensation-200: #afe081;
  --color-sage-sensation-300: #9ec977;
  --color-sage-sensation-400: #7fac51;
  --color-sage-sensation-500: #659133;
  --color-sage-sensation-600: #4d7717;
  --color-sage-sensation-700: #3b6100;
  --color-sage-sensation-800: #2e4d00;
  --color-sage-sensation-900: #223b00;
  --color-sage-sensation-950: #132500;
}