Black Stallion to Hello Summer color palette
About this palette
Black Stallion to Hello Summer is a 5-color cool palette: #001D1D (Black Stallion), #005E7B (Blue-Collar), #EAF0FF (Cotton Boll), #0099AC (Munsell Blue), #5AB9F8 (Hello Summer). It mixes turquoise, blue, white tones and feels cool overall. The strongest text pairing is #001D1D on #EAF0FF with a contrast ratio of 15.42:1, and 4 of its 10 color pairs pass WCAG AA for normal text.
Color codes
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Black Stallion | rgb(0, 29, 29) | hsl(180, 100%, 6%) | |
| Blue-Collar | rgb(0, 94, 123) | hsl(194, 100%, 24%) | |
| Cotton Boll | rgb(234, 240, 255) | hsl(223, 100%, 96%) | |
| Munsell Blue | rgb(0, 153, 172) | hsl(187, 100%, 34%) | |
| Hello Summer | rgb(90, 185, 248) | hsl(204, 92%, 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.
- Aa15.42:1 #001D1D on #EAF0FF
- Aa15.42:1 #EAF0FF on #001D1D
- Aa8.15:1 #001D1D on #5AB9F8
- Aa8.15:1 #5AB9F8 on #001D1D
- Aa6.38:1 #005E7B on #EAF0FF
- Aa6.38:1 #EAF0FF on #005E7B
- Aa5.15:1 #001D1D on #0099AC
- Aa5.15:1 #0099AC on #001D1D
Color blindness preview
- Protanopia
- Deuteranopia
- Tritanopia
- Achromatopsia
- Dog vision
CSS variables
/* Black Stallion to Hello Summer — https://swatchly.xyz/palette/001d1d-005e7b-eaf0ff-0099ac-5ab9f8 */
:root {
--black-stallion: #001d1d;
--blue-collar: #005e7b;
--cotton-boll: #eaf0ff;
--munsell-blue: #0099ac;
--hello-summer: #5ab9f8;
}
Tailwind CSS v4
/* Black Stallion to Hello Summer — https://swatchly.xyz/palette/001d1d-005e7b-eaf0ff-0099ac-5ab9f8 */
@theme {
--color-black-stallion: #001d1d;
--color-black-stallion-50: #e7faf9;
--color-black-stallion-100: #dbf0f0;
--color-black-stallion-200: #c4dddd;
--color-black-stallion-300: #abc7c7;
--color-black-stallion-400: #89a9a8;
--color-black-stallion-500: #6c8c8b;
--color-black-stallion-600: #516f6f;
--color-black-stallion-700: #3c5756;
--color-black-stallion-800: #2b4241;
--color-black-stallion-900: #1d3030;
--color-black-stallion-950: #001d1d;
--color-blue-collar: #005e7b;
--color-blue-collar-50: #e9f8ff;
--color-blue-collar-100: #d2f1ff;
--color-blue-collar-200: #abe1f9;
--color-blue-collar-300: #8dcbe7;
--color-blue-collar-400: #65accb;
--color-blue-collar-500: #4690af;
--color-blue-collar-600: #297593;
--color-blue-collar-700: #005e7b;
--color-blue-collar-800: #014961;
--color-blue-collar-900: #00394c;
--color-blue-collar-950: #002331;
--color-cotton-boll: #eaf0ff;
--color-cotton-boll-50: #eaf0ff;
--color-cotton-boll-100: #e3e7f1;
--color-cotton-boll-200: #d0d4df;
--color-cotton-boll-300: #b9becb;
--color-cotton-boll-400: #9aa0ad;
--color-cotton-boll-500: #808593;
--color-cotton-boll-600: #676c78;
--color-cotton-boll-700: #515561;
--color-cotton-boll-800: #3e424c;
--color-cotton-boll-900: #2f333b;
--color-cotton-boll-950: #1d1f25;
--color-munsell-blue: #0099ac;
--color-munsell-blue-50: #e3fbff;
--color-munsell-blue-100: #c5f6ff;
--color-munsell-blue-200: #98e7f6;
--color-munsell-blue-300: #75d3e3;
--color-munsell-blue-400: #43b4c7;
--color-munsell-blue-500: #0099ac;
--color-munsell-blue-600: #007b8b;
--color-munsell-blue-700: #00626f;
--color-munsell-blue-800: #004c57;
--color-munsell-blue-900: #003b43;
--color-munsell-blue-950: #00252a;
--color-hello-summer: #5ab9f8;
--color-hello-summer-50: #f5fbff;
--color-hello-summer-100: #e7f5ff;
--color-hello-summer-200: #c5e6ff;
--color-hello-summer-300: #9ad5ff;
--color-hello-summer-400: #5ab9f8;
--color-hello-summer-500: #399ad6;
--color-hello-summer-600: #087cb7;
--color-hello-summer-700: #006292;
--color-hello-summer-800: #004b72;
--color-hello-summer-900: #003957;
--color-hello-summer-950: #002237;
}
Similar palettes
- E4F5FF6DC4FD5C91B5005A7B132530Cotton Boll to Dark
- 314A632382C1E3EFFF121E2881BBEBBluedgeons to Electric Eel
- 0C1A201F415019698D41A7D397CCE2F0FAFFBlack Stallion to Cotton Ball
- 005F8765B0D9BEE6FF0093D6003C59001522Blue Velvet to Midnight Edition
- 022B3C0087AE5BD2F7005C73CEEEFFOceanic Noir to Veiling Waterfalls
- 18295429527C81C2FB358FA6E4F8FFSpace Cadet to Calm Waters
- 005973EAF2FF5076B11E1E2E82CBF6Deep Lagoon to Nevermind Nirvana
- 3C437974BAE3688BAC072528E2FCFFEvening Magic to Calm Waters