Oh Boy! to Blueberry Color Palette

About this palette

Oh Boy! to Blueberry is a 5-color cool, monochromatic, gradient palette: #BED4FC (Oh Boy!), #9EADE1 (Wondrous Wisteria), #8086C7 (Galactic Gossamer), #6361AC (Bellflower), #493B91 (Blueberry). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #BED4FC on #493B91 with a contrast ratio of 6.05:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Oh Boy!	rgb(190, 212, 252)	hsl(219, 91%, 87%)
Wondrous Wisteria	rgb(158, 173, 225)	hsl(227, 53%, 75%)
Galactic Gossamer	rgb(128, 134, 199)	hsl(235, 39%, 64%)
Bellflower	rgb(99, 97, 172)	hsl(242, 31%, 53%)
Blueberry	rgb(73, 59, 145)	hsl(250, 42%, 40%)

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.05:1 Good#BED4FC on #493B91
Aa6.05:1 Good#493B91 on #BED4FC
Aa4.11:1 Poor#9EADE1 on #493B91
Aa4.11:1 Poor#493B91 on #9EADE1
Aa3.65:1 Poor#BED4FC on #6361AC
Aa3.65:1 Poor#6361AC on #BED4FC

Color blindness preview

CSS variables

/* Oh Boy! to Blueberry — https://swatchly.xyz/palette/bed4fc-9eade1-8086c7-6361ac-493b91 */
:root {
  --oh-boy: #bed4fc;
  --wondrous-wisteria: #9eade1;
  --galactic-gossamer: #8086c7;
  --bellflower: #6361ac;
  --blueberry: #493b91;
}

Tailwind CSS v4

/* Oh Boy! to Blueberry — https://swatchly.xyz/palette/bed4fc-9eade1-8086c7-6361ac-493b91 */
@theme {
  --color-oh-boy: #bed4fc;
  --color-oh-boy-50: #ecf3ff;
  --color-oh-boy-100: #dce8ff;
  --color-oh-boy-200: #bed4fc;
  --color-oh-boy-300: #abbee0;
  --color-oh-boy-400: #8b9fc4;
  --color-oh-boy-500: #7185a9;
  --color-oh-boy-600: #586b8d;
  --color-oh-boy-700: #445574;
  --color-oh-boy-800: #34425e;
  --color-oh-boy-900: #26334a;
  --color-oh-boy-950: #161f30;
  --color-wondrous-wisteria: #9eade1;
  --color-wondrous-wisteria-50: #f8faff;
  --color-wondrous-wisteria-100: #eef2ff;
  --color-wondrous-wisteria-200: #d7e0ff;
  --color-wondrous-wisteria-300: #becbf6;
  --color-wondrous-wisteria-400: #9eade1;
  --color-wondrous-wisteria-500: #818fc1;
  --color-wondrous-wisteria-600: #6472a2;
  --color-wondrous-wisteria-700: #4d5985;
  --color-wondrous-wisteria-800: #3a446a;
  --color-wondrous-wisteria-900: #2a3253;
  --color-wondrous-wisteria-950: #181e34;
  --color-galactic-gossamer: #8086c7;
  --color-galactic-gossamer-50: #f4f6ff;
  --color-galactic-gossamer-100: #e9ecff;
  --color-galactic-gossamer-200: #d3d8ff;
  --color-galactic-gossamer-300: #bac1fa;
  --color-galactic-gossamer-400: #9aa1e0;
  --color-galactic-gossamer-500: #8086c7;
  --color-galactic-gossamer-600: #656aa8;
  --color-galactic-gossamer-700: #4f538b;
  --color-galactic-gossamer-800: #3c3f71;
  --color-galactic-gossamer-900: #2d2f59;
  --color-galactic-gossamer-950: #1b1c3a;
  --color-bellflower: #6361ac;
  --color-bellflower-50: #f3f4ff;
  --color-bellflower-100: #e8e9ff;
  --color-bellflower-200: #d1d3ff;
  --color-bellflower-300: #b7b9ff;
  --color-bellflower-400: #9898e5;
  --color-bellflower-500: #7d7cc9;
  --color-bellflower-600: #6361ac;
  --color-bellflower-700: #4e4b8e;
  --color-bellflower-800: #3c3974;
  --color-bellflower-900: #2e2b5c;
  --color-bellflower-950: #1c193d;
  --color-blueberry: #493b91;
  --color-blueberry-50: #f4f4ff;
  --color-blueberry-100: #e9e9ff;
  --color-blueberry-200: #d1d0ff;
  --color-blueberry-300: #b8b3ff;
  --color-blueberry-400: #968fea;
  --color-blueberry-500: #7a71cc;
  --color-blueberry-600: #6055aa;
  --color-blueberry-700: #493b91;
  --color-blueberry-800: #382f70;
  --color-blueberry-900: #2b2259;
  --color-blueberry-950: #1a143b;
}