Bold Modern Color Palette
Bright and bold, this palette bursts with vibrant yellow and striking pink, tempered by deep charcoal and soft grays, creating a modern, edgy vibe that balances energy with sophistication.
Practical uses and creative applications
The Bold Modern Color Palette is a striking combination of vivid hues that can elevate any design project. Featuring a vibrant yellow (#F8E71C), a passionate pink (#FF2A54), and a sophisticated blend of deep grays (#463939, #B7B7B7, #9F9F9F), this palette is ideal for brands looking to make a powerful statement.
It's particularly suitable for web design, where the contrasting colors can guide user attention and enhance visual hierarchy. Whether you're developing a modern e-commerce site or a dynamic portfolio, these colors will help you create an engaging and memorable user experience.
This palette speaks to creatives and designers who want to evoke a sense of energy and innovation. It's perfect for branding projects aimed at tech startups, fashion brands, or any business that thrives on a modern aesthetic.
Additionally, the versatility of this palette extends to packaging design, where the bold colors can attract customers on the shelves. In interior design, these hues can be used to create a contemporary space that feels both inviting and energetic, making it perfect for creative studios or collaborative workspaces.
Embrace the Bold Modern Color Palette to infuse your projects with a fresh, vibrant vibe!.
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.
| 50 | oklch(0.976 0.057 104.18) | #fdface | hsl(56, 92%, 90%) |
|
|
| 100 | oklch(0.961 0.096 104.21) | #fcf6aa | hsl(56, 93%, 83%) |
|
|
| 200 | oklch(0.946 0.129 104.33) | #fbf287 | hsl(55, 94%, 76%) |
|
|
| 300 | oklch(0.935 0.159 104.81) | #faef63 | hsl(56, 94%, 68%) |
|
|
| 400 | oklch(0.924 0.178 104.54) | #f9eb40 | hsl(55, 94%, 61%) |
|
|
| 500 | oklch(0.913 0.189 103.97) | #f8e71c | hsl(55, 94%, 54%) |
|
|
| 600 | oklch(0.842 0.177 103.49) | #e0cf07 | hsl(55, 94%, 45%) |
|
|
| 700 | oklch(0.717 0.150 103.90) | #b4a706 | hsl(56, 94%, 36%) |
|
|
| 800 | oklch(0.587 0.123 103.96) | #897f04 | hsl(55, 94%, 28%) |
|
|
| 900 | oklch(0.446 0.093 103.98) | #5d5603 | hsl(55, 94%, 19%) |
|
|
| 950 | oklch(0.295 0.061 105.52) | #312e02 | hsl(56, 92%, 10%) |
|
| 50 | oklch(0.892 0.059 5.19) | #ffccd6 | hsl(348, 100%, 90%) |
|
|
| 100 | oklch(0.829 0.099 6.82) | #ffacbc | hsl(348, 100%, 84%) |
|
|
| 200 | oklch(0.769 0.142 8.33) | #ff8ba2 | hsl(348, 100%, 77%) |
|
|
| 300 | oklch(0.718 0.181 10.83) | #ff6b88 | hsl(348, 100%, 71%) |
|
|
| 400 | oklch(0.676 0.216 13.84) | #ff4a6e | hsl(348, 100%, 65%) |
|
|
| 500 | oklch(0.648 0.240 17.89) | #ff2a54 | hsl(348, 100%, 58%) |
|
|
| 600 | oklch(0.617 0.250 23.68) | #f80031 | hsl(348, 100%, 49%) |
|
|
| 700 | oklch(0.523 0.211 23.23) | #c70027 | hsl(348, 100%, 39%) |
|
|
| 800 | oklch(0.423 0.170 22.41) | #95001d | hsl(348, 100%, 29%) |
|
|
| 900 | oklch(0.318 0.128 20.32) | #640014 | hsl(348, 100%, 20%) |
|
|
| 950 | oklch(0.204 0.082 15.35) | #33000a | hsl(348, 100%, 10%) |
|
| 50 | oklch(0.920 0.005 17.26) | #e8e3e3 | hsl(0, 10%, 90%) |
|
|
| 100 | oklch(0.811 0.014 17.44) | #cabebe | hsl(0, 10%, 77%) |
|
|
| 200 | oklch(0.703 0.023 17.70) | #ad9a9a | hsl(0, 10%, 64%) |
|
|
| 300 | oklch(0.587 0.033 18.12) | #8f7575 | hsl(0, 10%, 51%) |
|
|
| 400 | oklch(0.477 0.026 18.12) | #6b5757 | hsl(0, 10%, 38%) |
|
|
| 500 | oklch(0.358 0.018 18.05) | #463939 | hsl(0, 10%, 25%) |
|
|
| 600 | oklch(0.330 0.017 18.07) | #3e3232 | hsl(0, 11%, 22%) |
|
|
| 700 | oklch(0.300 0.015 18.01) | #352b2b | hsl(0, 10%, 19%) |
|
|
| 800 | oklch(0.274 0.012 17.91) | #2d2525 | hsl(0, 10%, 16%) |
|
|
| 900 | oklch(0.242 0.009 17.81) | #241e1e | hsl(0, 9%, 13%) |
|
|
| 950 | oklch(0.211 0.008 17.81) | #1c1717 | hsl(0, 10%, 10%) |
|
| 50 | oklch(0.925 0.000 89.88) | #e6e6e6 | hsl(0, 0%, 90%) |
|
|
| 100 | oklch(0.894 0.000 89.88) | #dcdcdc | hsl(0, 0%, 86%) |
|
|
| 200 | oklch(0.867 0.000 89.88) | #d3d3d3 | hsl(0, 0%, 83%) |
|
|
| 300 | oklch(0.839 0.000 89.88) | #cacaca | hsl(0, 0%, 79%) |
|
|
| 400 | oklch(0.808 0.000 89.88) | #c0c0c0 | hsl(0, 0%, 75%) |
|
|
| 500 | oklch(0.779 0.000 89.88) | #b7b7b7 | hsl(0, 0%, 72%) |
|
|
| 600 | oklch(0.680 0.000 89.88) | #989898 | hsl(0, 0%, 60%) |
|
|
| 700 | oklch(0.573 0.000 89.88) | #787878 | hsl(0, 0%, 47%) |
|
|
| 800 | oklch(0.464 0.000 89.88) | #595959 | hsl(0, 0%, 35%) |
|
|
| 900 | oklch(0.345 0.000 89.88) | #393939 | hsl(0, 0%, 22%) |
|
|
| 950 | oklch(0.218 0.000 89.88) | #1a1a1a | hsl(0, 0%, 10%) |
|
| 50 | oklch(0.925 0.000 89.88) | #e6e6e6 | hsl(0, 0%, 90%) |
|
|
| 100 | oklch(0.879 0.000 89.88) | #d7d7d7 | hsl(0, 0%, 84%) |
|
|
| 200 | oklch(0.836 0.000 89.88) | #c9c9c9 | hsl(0, 0%, 79%) |
|
|
| 300 | oklch(0.792 0.000 89.88) | #bbbbbb | hsl(0, 0%, 73%) |
|
|
| 400 | oklch(0.748 0.000 89.88) | #adadad | hsl(0, 0%, 68%) |
|
|
| 500 | oklch(0.703 0.000 89.88) | #9f9f9f | hsl(0, 0%, 62%) |
|
|
| 600 | oklch(0.613 0.000 89.88) | #848484 | hsl(0, 0%, 52%) |
|
|
| 700 | oklch(0.524 0.000 89.88) | #6a6a6a | hsl(0, 0%, 42%) |
|
|
| 800 | oklch(0.428 0.000 89.88) | #4f4f4f | hsl(0, 0%, 31%) |
|
|
| 900 | oklch(0.325 0.000 89.88) | #343434 | hsl(0, 0%, 20%) |
|
|
| 950 | oklch(0.218 0.000 89.88) | #1a1a1a | hsl(0, 0%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection
