Twilight Express to Leafy Canopy color palette
183B7ATwilight Express2157A3Fist of the North Star9C5C98Bermuda Onion8F991DDensetsu GreenD085F0Fake LoveB1CE0DLeafy Canopy
About this palette
Twilight Express to Leafy Canopy is a 6-color vibrant, cool palette: #183B7A (Twilight Express), #2157A3 (Fist of the North Star), #9C5C98 (Bermuda Onion), #8F991D (Densetsu Green), #D085F0 (Fake Love), #B1CE0D (Leafy Canopy). It mixes blue, pink, green, purple tones and feels cool overall. The strongest text pairing is #183B7A on #B1CE0D with a contrast ratio of 6.02:1, and 1 of its 15 color pairs pass WCAG AA for normal text.
Color codes
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Twilight Express | rgb(24, 59, 122) | hsl(219, 67%, 29%) | |
| Fist of the North Star | rgb(33, 87, 163) | hsl(215, 66%, 38%) | |
| Bermuda Onion | rgb(156, 92, 152) | hsl(304, 26%, 49%) | |
| Densetsu Green | rgb(143, 153, 29) | hsl(65, 68%, 36%) | |
| Fake Love | rgb(208, 133, 240) | hsl(282, 78%, 73%) | |
| Leafy Canopy | rgb(177, 206, 13) | hsl(69, 88%, 43%) |
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.02:1 #183B7A on #B1CE0D
- Aa6.02:1 #B1CE0D on #183B7A
- Aa4.26:1 #183B7A on #D085F0
- Aa4.26:1 #D085F0 on #183B7A
- Aa3.96:1 #2157A3 on #B1CE0D
- Aa3.96:1 #B1CE0D on #2157A3
- Aa3.47:1 #183B7A on #8F991D
- Aa3.47:1 #8F991D on #183B7A
Color blindness preview
- Protanopia
- Deuteranopia
- Tritanopia
- Achromatopsia
- Dog vision
CSS variables
/* Twilight Express to Leafy Canopy — https://swatchly.xyz/palette/183b7a-2157a3-9c5c98-8f991d-d085f0-b1ce0d */
:root {
--twilight-express: #183b7a;
--fist-of-the-north-star: #2157a3;
--bermuda-onion: #9c5c98;
--densetsu-green: #8f991d;
--fake-love: #d085f0;
--leafy-canopy: #b1ce0d;
}
Tailwind CSS v4
/* Twilight Express to Leafy Canopy — https://swatchly.xyz/palette/183b7a-2157a3-9c5c98-8f991d-d085f0-b1ce0d */
@theme {
--color-twilight-express: #183b7a;
--color-twilight-express-50: #f0f5ff;
--color-twilight-express-100: #e1ecff;
--color-twilight-express-200: #c2d9ff;
--color-twilight-express-300: #9dc1ff;
--color-twilight-express-400: #78a0e5;
--color-twilight-express-500: #5c83c9;
--color-twilight-express-600: #4368a9;
--color-twilight-express-700: #2f508b;
--color-twilight-express-800: #183b7a;
--color-twilight-express-900: #162e59;
--color-twilight-express-950: #0b1c3a;
--color-fist-of-the-north-star: #2157a3;
--color-fist-of-the-north-star-50: #eff6ff;
--color-fist-of-the-north-star-100: #dfecff;
--color-fist-of-the-north-star-200: #c1daff;
--color-fist-of-the-north-star-300: #9dc5ff;
--color-fist-of-the-north-star-400: #6fa5f4;
--color-fist-of-the-north-star-500: #5289d9;
--color-fist-of-the-north-star-600: #396ebb;
--color-fist-of-the-north-star-700: #2157a3;
--color-fist-of-the-north-star-800: #174482;
--color-fist-of-the-north-star-900: #0d3368;
--color-fist-of-the-north-star-950: #041f46;
--color-bermuda-onion: #9c5c98;
--color-bermuda-onion-50: #fff0fd;
--color-bermuda-onion-100: #ffe3fc;
--color-bermuda-onion-200: #fbc8f7;
--color-bermuda-onion-300: #ebb1e6;
--color-bermuda-onion-400: #d090cb;
--color-bermuda-onion-500: #b675b2;
--color-bermuda-onion-600: #9c5c98;
--color-bermuda-onion-700: #80457c;
--color-bermuda-onion-800: #663264;
--color-bermuda-onion-900: #50244e;
--color-bermuda-onion-950: #341432;
--color-densetsu-green: #8f991d;
--color-densetsu-green-50: #f5fec4;
--color-densetsu-green-100: #edf6b7;
--color-densetsu-green-200: #dbe599;
--color-densetsu-green-300: #c6d178;
--color-densetsu-green-400: #a9b34a;
--color-densetsu-green-500: #8f991d;
--color-densetsu-green-600: #737b00;
--color-densetsu-green-700: #5b6200;
--color-densetsu-green-800: #464c00;
--color-densetsu-green-900: #353a00;
--color-densetsu-green-950: #202300;
--color-fake-love: #d085f0;
--color-fake-love-50: #fcf5ff;
--color-fake-love-100: #f8e9ff;
--color-fake-love-200: #f0ceff;
--color-fake-love-300: #e6aeff;
--color-fake-love-400: #d085f0;
--color-fake-love-500: #b168d0;
--color-fake-love-600: #944cb1;
--color-fake-love-700: #783593;
--color-fake-love-800: #602477;
--color-fake-love-900: #4b175e;
--color-fake-love-950: #2f0a3d;
--color-leafy-canopy: #b1ce0d;
--color-leafy-canopy-50: #ebffae;
--color-leafy-canopy-100: #e0f599;
--color-leafy-canopy-200: #cae372;
--color-leafy-canopy-300: #b1ce0d;
--color-leafy-canopy-400: #94ad00;
--color-leafy-canopy-500: #7b9000;
--color-leafy-canopy-600: #637400;
--color-leafy-canopy-700: #4e5c00;
--color-leafy-canopy-800: #3d4800;
--color-leafy-canopy-900: #2f3800;
--color-leafy-canopy-950: #1c2300;
}
Similar palettes
- 96EEFF0047557A5299C38EF875A900640014Alpine Expedition to Darkest Dungeon
- 9BDFF7CCB600BC97329D6198005970492846Distant Homeworld to Murasaki
- 955F9F798CE9DDBB5E12331D1D3C7ABermuda Onion to Twilight Express
- 002B18294096B14D97AB9933C3CCFFHaunted Forest to Innocent Snowdrop
- 8ECE9BB378C826448ABBCBFF826800Irish Spring to Muddy Brown
- 53346E653AA67D5FB48CB15CACC900E1FAC8Purple Protégé to Herbal Vapours
- ACA0FFCDE78C9B97005E469E2F3C16Widowmaker to Dark Olive
- 8EAC3B801F448ACEFF2A5B95A55D73German Hop to Cinnapink