Grass to Way Beyond the Blue color palette
5BA62AGrass00ACE3ThalassophileCBA6FFLilacE4A500Illuminate Me0082A8Ahoy! Blue0090D1Way Beyond the Blue
About this palette
Grass to Way Beyond the Blue is a 6-color vibrant, cool palette: #5BA62A (Grass), #00ACE3 (Thalassophile), #CBA6FF (Lilac), #E4A500 (Illuminate Me), #0082A8 (Ahoy! Blue), #0090D1 (Way Beyond the Blue). It mixes green, blue, purple, yellow tones and feels cool overall. The strongest text pairing is #CBA6FF on #0082A8 with a contrast ratio of 2.19:1, and 0 of its 15 color pairs pass WCAG AA for normal text.
Color codes
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Grass | rgb(91, 166, 42) | hsl(96, 60%, 41%) | |
| Thalassophile | rgb(0, 172, 227) | hsl(195, 100%, 45%) | |
| Lilac | rgb(203, 166, 255) | hsl(265, 100%, 83%) | |
| Illuminate Me | rgb(228, 165, 0) | hsl(43, 100%, 45%) | |
| Ahoy! Blue | rgb(0, 130, 168) | hsl(194, 100%, 33%) | |
| Way Beyond the Blue | rgb(0, 144, 209) | hsl(199, 100%, 41%) |
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.
Color blindness preview
- Protanopia
- Deuteranopia
- Tritanopia
- Achromatopsia
- Dog vision
CSS variables
/* Grass to Way Beyond the Blue — https://swatchly.xyz/palette/5ba62a-00ace3-cba6ff-e4a500-0082a8-0090d1 */
:root {
--grass: #5ba62a;
--thalassophile: #00ace3;
--lilac: #cba6ff;
--illuminate-me: #e4a500;
--ahoy-blue: #0082a8;
--way-beyond-the-blue: #0090d1;
}
Tailwind CSS v4
/* Grass to Way Beyond the Blue — https://swatchly.xyz/palette/5ba62a-00ace3-cba6ff-e4a500-0082a8-0090d1 */
@theme {
--color-grass: #5ba62a;
--color-grass-50: #e9ffdf;
--color-grass-100: #d0ffba;
--color-grass-200: #b8f09d;
--color-grass-300: #9ddd7d;
--color-grass-400: #79c052;
--color-grass-500: #5ba62a;
--color-grass-600: #418700;
--color-grass-700: #326b00;
--color-grass-800: #265400;
--color-grass-900: #1b4000;
--color-grass-950: #0e2800;
--color-thalassophile: #00ace3;
--color-thalassophile-50: #e7f7ff;
--color-thalassophile-100: #cfefff;
--color-thalassophile-200: #9fdfff;
--color-thalassophile-300: #5fccfc;
--color-thalassophile-400: #00ace3;
--color-thalassophile-500: #008fbe;
--color-thalassophile-600: #00739a;
--color-thalassophile-700: #005c7b;
--color-thalassophile-800: #004861;
--color-thalassophile-900: #00384c;
--color-thalassophile-950: #002332;
--color-lilac: #cba6ff;
--color-lilac-50: #f5efff;
--color-lilac-100: #ece1ff;
--color-lilac-200: #dcc6ff;
--color-lilac-300: #cba6ff;
--color-lilac-400: #ac89dc;
--color-lilac-500: #926dc2;
--color-lilac-600: #7854a4;
--color-lilac-700: #614089;
--color-lilac-800: #4d3070;
--color-lilac-900: #3d245a;
--color-lilac-950: #26143b;
--color-illuminate-me: #e4a500;
--color-illuminate-me-50: #ffeac7;
--color-illuminate-me-100: #ffdb9d;
--color-illuminate-me-200: #f5c162;
--color-illuminate-me-300: #e4a500;
--color-illuminate-me-400: #c08a00;
--color-illuminate-me-500: #a17300;
--color-illuminate-me-600: #835d00;
--color-illuminate-me-700: #6a4b00;
--color-illuminate-me-800: #553b00;
--color-illuminate-me-900: #442e00;
--color-illuminate-me-950: #2b1c00;
--color-ahoy-blue: #0082a8;
--color-ahoy-blue-50: #e9f8ff;
--color-ahoy-blue-100: #d7f2ff;
--color-ahoy-blue-200: #ace5ff;
--color-ahoy-blue-300: #84d3f5;
--color-ahoy-blue-400: #59b6db;
--color-ahoy-blue-500: #349cc3;
--color-ahoy-blue-600: #0082a8;
--color-ahoy-blue-700: #006786;
--color-ahoy-blue-800: #005069;
--color-ahoy-blue-900: #003e52;
--color-ahoy-blue-950: #002634;
--color-way-beyond-the-blue: #0090d1;
--color-way-beyond-the-blue-50: #ecf7ff;
--color-way-beyond-the-blue-100: #d9efff;
--color-way-beyond-the-blue-200: #b0dfff;
--color-way-beyond-the-blue-300: #7ccbff;
--color-way-beyond-the-blue-400: #40acec;
--color-way-beyond-the-blue-500: #0090d1;
--color-way-beyond-the-blue-600: #0074a9;
--color-way-beyond-the-blue-700: #005c87;
--color-way-beyond-the-blue-800: #00486b;
--color-way-beyond-the-blue-900: #003754;
--color-way-beyond-the-blue-950: #002236;
}
Similar palettes
- 00788EAB55DBDE640000A4E5ACB900D19DFFCelestial to Lilac
- 00C8B6009CB1B5AB00E73461008A49CFA3FFPristine Oceanic to Lilac
- FF93CEEB578C008AD3DC9600008E21Shimmering Love to Emerald
- 79BD122F67FF0093CEFF6FCDD23900D7BC00Kiwi Crush to Groovy Lemon Pie
- 2C60FF0082D0A79500A78FFF00C859C2A4FFBluerocratic to Diva
- F0F0C9C4B9EE632E000090B1914A00BEAC00Silk Star to Muddy Yellow
- 0083B6D5960F695000292A45C9F0FFBCB3FFMediterranean Blue to Purple Illusion
- 8B8B000099E4EE8800006ABE72C2FFCaptain Kirk to Blue Mana