Blush Hour to Snarky Mint color palette

About this palette

Blush Hour to Snarky Mint is a 5-color vibrant, cool palette: #FF6D90 (Blush Hour), #004BB1 (Once in a Blue Moon), #D55362 (Cranberry Splash), #244700 (British Racing Green), #9AE26E (Snarky Mint). It mixes pink, blue, red, green tones and feels cool overall. The strongest text pairing is #244700 on #9AE26E with a contrast ratio of 6.82:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Blush Hourrgb(255, 109, 144)hsl(346, 100%, 71%)
Once in a Blue Moonrgb(0, 75, 177)hsl(215, 100%, 35%)
Cranberry Splashrgb(213, 83, 98)hsl(353, 61%, 58%)
British Racing Greenrgb(36, 71, 0)hsl(90, 100%, 14%)
Snarky Mintrgb(154, 226, 110)hsl(97, 67%, 66%)

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.

  • Aa6.82:1 Good#244700 on #9AE26E
  • Aa6.82:1 Good#9AE26E on #244700
  • Aa5.10:1 Good#004BB1 on #9AE26E
  • Aa5.10:1 Good#9AE26E on #004BB1
  • Aa3.97:1 Poor#FF6D90 on #244700
  • Aa3.97:1 Poor#244700 on #FF6D90

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Blush Hour to Snarky Mint — https://swatchly.xyz/palette/ff6d90-004bb1-d55362-244700-9ae26e */
:root {
  --blush-hour: #ff6d90;
  --once-in-a-blue-moon: #004bb1;
  --cranberry-splash: #d55362;
  --british-racing-green: #244700;
  --snarky-mint: #9ae26e;
}

Tailwind CSS v4

/* Blush Hour to Snarky Mint — https://swatchly.xyz/palette/ff6d90-004bb1-d55362-244700-9ae26e */
@theme {
  --color-blush-hour: #ff6d90;
  --color-blush-hour-50: #fff3f5;
  --color-blush-hour-100: #ffe6ea;
  --color-blush-hour-200: #ffcad2;
  --color-blush-hour-300: #ffa8b7;
  --color-blush-hour-400: #ff6d90;
  --color-blush-hour-500: #de4f75;
  --color-blush-hour-600: #bd315b;
  --color-blush-hour-700: #9d1745;
  --color-blush-hour-800: #7f0234;
  --color-blush-hour-900: #640027;
  --color-blush-hour-950: #410016;
  --color-once-in-a-blue-moon: #004bb1;
  --color-once-in-a-blue-moon-50: #f0f6ff;
  --color-once-in-a-blue-moon-100: #e0ecff;
  --color-once-in-a-blue-moon-200: #c0d9ff;
  --color-once-in-a-blue-moon-300: #9bc2ff;
  --color-once-in-a-blue-moon-400: #649fff;
  --color-once-in-a-blue-moon-500: #3e81eb;
  --color-once-in-a-blue-moon-600: #2365ca;
  --color-once-in-a-blue-moon-700: #004bb1;
  --color-once-in-a-blue-moon-800: #023a8b;
  --color-once-in-a-blue-moon-900: #002c6f;
  --color-once-in-a-blue-moon-950: #001a4a;
  --color-cranberry-splash: #d55362;
  --color-cranberry-splash-50: #fff1f1;
  --color-cranberry-splash-100: #ffe3e4;
  --color-cranberry-splash-200: #ffc6c8;
  --color-cranberry-splash-300: #ffa3a7;
  --color-cranberry-splash-400: #f2727e;
  --color-cranberry-splash-500: #d55362;
  --color-cranberry-splash-600: #b53749;
  --color-cranberry-splash-700: #962236;
  --color-cranberry-splash-800: #7a1127;
  --color-cranberry-splash-900: #62061c;
  --color-cranberry-splash-950: #41010f;
  --color-british-racing-green: #244700;
  --color-british-racing-green-50: #e6fed8;
  --color-british-racing-green-100: #daf5ca;
  --color-british-racing-green-200: #c3e3b0;
  --color-british-racing-green-300: #a9cd93;
  --color-british-racing-green-400: #86ad6d;
  --color-british-racing-green-500: #69904f;
  --color-british-racing-green-600: #4f7435;
  --color-british-racing-green-700: #3a5b22;
  --color-british-racing-green-800: #244700;
  --color-british-racing-green-900: #1e350b;
  --color-british-racing-green-950: #102104;
  --color-snarky-mint: #9ae26e;
  --color-snarky-mint-50: #f2ffeb;
  --color-snarky-mint-100: #daffc7;
  --color-snarky-mint-200: #bff1a3;
  --color-snarky-mint-300: #9ae26e;
  --color-snarky-mint-400: #7dbe53;
  --color-snarky-mint-500: #5da12a;
  --color-snarky-mint-600: #438300;
  --color-snarky-mint-700: #336700;
  --color-snarky-mint-800: #265000;
  --color-snarky-mint-900: #1b3c00;
  --color-snarky-mint-950: #0f2600;
}

Similar palettes