Modern Twilight Color Palette
This palette blends deep twilight blues and serene teal with vibrant pops of sunlit orange and fiery red, evoking a stylish, modern aesthetic that balances calm sophistication with energetic warmth.
Practical uses and creative applications
The Modern Twilight Color Palette features a captivating blend of deep blues and vibrant accents, making it an ideal choice for designers looking to evoke a sense of tranquility paired with energy. With its primary colors#565175 (deep slate), #538a95 (soft teal), and #67b79e (fresh mint)this palette captures the soothing essence of twilight while the bright hues of #ffb727 (golden yellow) and #e4491c (fiery red) add a striking contrast.
This unique combination is perfect for branding projects that aim to convey a modern yet approachable feel, making it suitable for startups in the wellness, tech, or lifestyle sectors. Web designers will find the Modern Twilight palette particularly appealing for creating engaging user interfaces that balance professionalism with warmth.
The cooler tones can be used to establish a calming atmosphere, while the brighter colors can effectively draw attention to key elements like call-to-action buttons or important notifications. Moreover, this palette is equally effective in packaging design, especially for products that promote relaxation or creativity, appealing to consumers who appreciate thoughtful aesthetics.
Interior designers and creative professionals can harness the Modern Twilight palette to create spaces that feel both contemporary and inviting. Whether it’s for residential projects or commercial environments, this color scheme can transform any room, making it ideal for trendy cafes or serene home offices.
By blending these colors thoughtfully, designers can craft a mood that encourages relaxation and inspiration, catering to audiences who value both style and function.
Tailwind color scales
Browse Tailwind CSS color scales. Copy OKLCH, HEX, or HSL with one click. Preview colors in real UI examples and check contrast for accessibility.
dsfds
| 50 | oklch(0.913 0.012 291.27) | #e2e1ea | hsl(247, 18%, 90%) |
|
|
| 100 | oklch(0.822 0.027 293.06) | #c5c2d5 | hsl(249, 18%, 80%) |
|
|
| 200 | oklch(0.728 0.040 291.92) | #a7a3bf | hsl(249, 18%, 69%) |
|
|
| 300 | oklch(0.632 0.057 291.93) | #8a84aa | hsl(249, 18%, 59%) |
|
|
| 400 | oklch(0.535 0.072 290.75) | #6d6694 | hsl(249, 18%, 49%) |
|
|
| 500 | oklch(0.455 0.058 290.24) | #565175 | hsl(248, 18%, 39%) |
|
|
| 600 | oklch(0.408 0.052 289.82) | #494564 | hsl(248, 18%, 33%) |
|
|
| 700 | oklch(0.358 0.043 289.54) | #3c3952 | hsl(247, 18%, 27%) |
|
|
| 800 | oklch(0.309 0.036 291.03) | #302d41 | hsl(249, 18%, 22%) |
|
|
| 900 | oklch(0.257 0.028 290.39) | #232130 | hsl(248, 19%, 16%) |
|
|
| 950 | oklch(0.201 0.018 289.78) | #16151e | hsl(247, 18%, 10%) |
|
dsfds
| 50 | oklch(0.929 0.013 214.36) | #deeaed | hsl(192, 29%, 90%) |
|
|
| 100 | oklch(0.867 0.026 212.25) | #c1d8dd | hsl(191, 29%, 81%) |
|
|
| 200 | oklch(0.804 0.037 209.46) | #a4c6cc | hsl(189, 28%, 72%) |
|
|
| 300 | oklch(0.738 0.049 211.59) | #87b3bc | hsl(190, 28%, 63%) |
|
|
| 400 | oklch(0.675 0.060 211.55) | #6aa1ac | hsl(190, 28%, 55%) |
|
|
| 500 | oklch(0.600 0.060 211.77) | #538a95 | hsl(190, 28%, 45%) |
|
|
| 600 | oklch(0.530 0.053 213.04) | #46747e | hsl(191, 29%, 38%) |
|
|
| 700 | oklch(0.460 0.045 212.50) | #395f67 | hsl(190, 29%, 31%) |
|
|
| 800 | oklch(0.385 0.036 212.15) | #2c494f | hsl(190, 28%, 24%) |
|
|
| 900 | oklch(0.309 0.028 210.85) | #1f3438 | hsl(190, 29%, 17%) |
|
|
| 950 | oklch(0.225 0.018 214.99) | #121e21 | hsl(192, 29%, 10%) |
|
dsfds
| 50 | oklch(0.936 0.022 174.98) | #dcefe9 | hsl(161, 37%, 90%) |
|
|
| 100 | oklch(0.891 0.034 175.50) | #c5e3da | hsl(162, 35%, 83%) |
|
|
| 200 | oklch(0.848 0.049 174.73) | #add8cb | hsl(162, 36%, 76%) |
|
|
| 300 | oklch(0.805 0.062 173.60) | #96cdbc | hsl(161, 35%, 70%) |
|
|
| 400 | oklch(0.763 0.076 172.74) | #7ec2ad | hsl(161, 36%, 63%) |
|
|
| 500 | oklch(0.721 0.088 171.49) | #67b79e | hsl(161, 36%, 56%) |
|
|
| 600 | oklch(0.652 0.092 170.87) | #4da288 | hsl(162, 36%, 47%) |
|
|
| 700 | oklch(0.556 0.077 170.83) | #3e826d | hsl(161, 35%, 38%) |
|
|
| 800 | oklch(0.456 0.062 170.74) | #2f6252 | hsl(161, 35%, 28%) |
|
|
| 900 | oklch(0.353 0.045 171.03) | #204338 | hsl(161, 35%, 19%) |
|
|
| 950 | oklch(0.238 0.028 171.52) | #10231d | hsl(161, 37%, 10%) |
|
dsfds
| 50 | oklch(0.954 0.048 84.56) | #ffeecc | hsl(40, 100%, 90%) |
|
|
| 100 | oklch(0.926 0.078 84.35) | #ffe3ab | hsl(40, 100%, 84%) |
|
|
| 200 | oklch(0.899 0.106 83.84) | #ffd88a | hsl(40, 100%, 77%) |
|
|
| 300 | oklch(0.873 0.131 82.86) | #ffcd69 | hsl(40, 100%, 71%) |
|
|
| 400 | oklch(0.849 0.150 81.14) | #ffc248 | hsl(40, 100%, 64%) |
|
|
| 500 | oklch(0.826 0.163 78.34) | #ffb727 | hsl(40, 100%, 58%) |
|
|
| 600 | oklch(0.779 0.165 73.72) | #f5a400 | hsl(40, 100%, 48%) |
|
|
| 700 | oklch(0.661 0.140 73.71) | #c58300 | hsl(40, 100%, 39%) |
|
|
| 800 | oklch(0.539 0.114 75.16) | #946300 | hsl(40, 100%, 29%) |
|
|
| 900 | oklch(0.408 0.086 75.76) | #644200 | hsl(40, 100%, 20%) |
|
|
| 950 | oklch(0.266 0.055 80.87) | #332200 | hsl(40, 100%, 10%) |
|
dsfds
| 50 | oklch(0.913 0.038 36.23) | #fadad1 | hsl(13, 80%, 90%) |
|
|
| 100 | oklch(0.845 0.069 36.53) | #f5bdad | hsl(13, 78%, 82%) |
|
|
| 200 | oklch(0.780 0.103 36.56) | #f1a089 | hsl(13, 79%, 74%) |
|
|
| 300 | oklch(0.720 0.137 36.67) | #ed8365 | hsl(13, 79%, 66%) |
|
|
| 400 | oklch(0.665 0.170 36.94) | #e86640 | hsl(14, 79%, 58%) |
|
|
| 500 | oklch(0.620 0.199 35.66) | #e4491c | hsl(14, 79%, 50%) |
|
|
| 600 | oklch(0.546 0.174 35.73) | #c03d17 | hsl(13, 79%, 42%) |
|
|
| 700 | oklch(0.470 0.148 35.83) | #9c3112 | hsl(13, 79%, 34%) |
|
|
| 800 | oklch(0.390 0.118 36.32) | #77260e | hsl(14, 79%, 26%) |
|
|
| 900 | oklch(0.304 0.088 36.31) | #521a0a | hsl(13, 78%, 18%) |
|
|
| 950 | oklch(0.214 0.056 37.70) | #2e0e05 | hsl(13, 80%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
