Sage Sensation to Blasphemous Blue color palette

B7E488Sage Sensation 94CA98Irish Spring 72AFA3Turquoise Fantasies 5095A9Rainy Mood 2E79ADBlue Triumph 005BAFBlasphemous Blue

Open in generator Export PNG, PDF, ASE…

About this palette

Sage Sensation to Blasphemous Blue is a 6-color cool palette: #B7E488 (Sage Sensation), #94CA98 (Irish Spring), #72AFA3 (Turquoise Fantasies), #5095A9 (Rainy Mood), #2E79AD (Blue Triumph), #005BAF (Blasphemous Blue). It mixes green, turquoise, blue tones and feels cool overall. The strongest text pairing is #B7E488 on #005BAF with a contrast ratio of 4.64:1, and 1 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sage Sensation	rgb(183, 228, 136)	hsl(89, 63%, 71%)
Irish Spring	rgb(148, 202, 152)	hsl(124, 34%, 69%)
Turquoise Fantasies	rgb(114, 175, 163)	hsl(168, 28%, 57%)
Rainy Mood	rgb(80, 149, 169)	hsl(193, 36%, 49%)
Blue Triumph	rgb(46, 121, 173)	hsl(205, 58%, 43%)
Blasphemous Blue	rgb(0, 91, 175)	hsl(209, 100%, 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.

Aa4.64:1 Good#B7E488 on #005BAF
Aa4.64:1 Good#005BAF on #B7E488
Aa3.58:1 Poor#94CA98 on #005BAF
Aa3.58:1 Poor#005BAF on #94CA98
Aa3.25:1 Poor#B7E488 on #2E79AD
Aa3.25:1 Poor#2E79AD on #B7E488

Color blindness preview

CSS variables

/* Sage Sensation to Blasphemous Blue — https://swatchly.xyz/palette/b7e488-94ca98-72afa3-5095a9-2e79ad-005baf */
:root {
  --sage-sensation: #b7e488;
  --irish-spring: #94ca98;
  --turquoise-fantasies: #72afa3;
  --rainy-mood: #5095a9;
  --blue-triumph: #2e79ad;
  --blasphemous-blue: #005baf;
}

Tailwind CSS v4

/* Sage Sensation to Blasphemous Blue — https://swatchly.xyz/palette/b7e488-94ca98-72afa3-5095a9-2e79ad-005baf */
@theme {
  --color-sage-sensation: #b7e488;
  --color-sage-sensation-50: #e2fdc9;
  --color-sage-sensation-100: #d5f3b9;
  --color-sage-sensation-200: #b7e488;
  --color-sage-sensation-300: #a5cc7e;
  --color-sage-sensation-400: #85ae57;
  --color-sage-sensation-500: #6a9338;
  --color-sage-sensation-600: #52781c;
  --color-sage-sensation-700: #3e6103;
  --color-sage-sensation-800: #2f4c00;
  --color-sage-sensation-900: #243b00;
  --color-sage-sensation-950: #152500;
  --color-irish-spring: #94ca98;
  --color-irish-spring-50: #dcfcde;
  --color-irish-spring-100: #cef2d0;
  --color-irish-spring-200: #b5dfb7;
  --color-irish-spring-300: #94ca98;
  --color-irish-spring-400: #78ab7c;
  --color-irish-spring-500: #5d9061;
  --color-irish-spring-600: #45764a;
  --color-irish-spring-700: #325f37;
  --color-irish-spring-800: #234c28;
  --color-irish-spring-900: #193c1d;
  --color-irish-spring-950: #0c2610;
  --color-turquoise-fantasies: #72afa3;
  --color-turquoise-fantasies-50: #dcfef6;
  --color-turquoise-fantasies-100: #cff4ec;
  --color-turquoise-fantasies-200: #b5e2d9;
  --color-turquoise-fantasies-300: #99cdc2;
  --color-turquoise-fantasies-400: #72afa3;
  --color-turquoise-fantasies-500: #579388;
  --color-turquoise-fantasies-600: #3d786d;
  --color-turquoise-fantasies-700: #296057;
  --color-turquoise-fantasies-800: #1a4c44;
  --color-turquoise-fantasies-900: #0f3b34;
  --color-turquoise-fantasies-950: #062520;
  --color-rainy-mood: #5095a9;
  --color-rainy-mood-50: #e8f9ff;
  --color-rainy-mood-100: #d0f4ff;
  --color-rainy-mood-200: #b1e3f2;
  --color-rainy-mood-300: #95cee0;
  --color-rainy-mood-400: #6fb0c3;
  --color-rainy-mood-500: #5095a9;
  --color-rainy-mood-600: #34798c;
  --color-rainy-mood-700: #1e6172;
  --color-rainy-mood-800: #0d4c5b;
  --color-rainy-mood-900: #033a47;
  --color-rainy-mood-950: #00242e;
  --color-blue-triumph: #2e79ad;
  --color-blue-triumph-50: #edf7ff;
  --color-blue-triumph-100: #dcefff;
  --color-blue-triumph-200: #b9e0ff;
  --color-blue-triumph-300: #90ccfc;
  --color-blue-triumph-400: #69aee2;
  --color-blue-triumph-500: #4b93c9;
  --color-blue-triumph-600: #2e79ad;
  --color-blue-triumph-700: #16608f;
  --color-blue-triumph-800: #034b75;
  --color-blue-triumph-900: #00395b;
  --color-blue-triumph-950: #00243b;
  --color-blasphemous-blue: #005baf;
  --color-blasphemous-blue-50: #eff6ff;
  --color-blasphemous-blue-100: #deedff;
  --color-blasphemous-blue-200: #bfdcff;
  --color-blasphemous-blue-300: #9ac7ff;
  --color-blasphemous-blue-400: #61a8fe;
  --color-blasphemous-blue-500: #428de5;
  --color-blasphemous-blue-600: #2572c7;
  --color-blasphemous-blue-700: #005baf;
  --color-blasphemous-blue-800: #00478b;
  --color-blasphemous-blue-900: #00366d;
  --color-blasphemous-blue-950: #002248;
}