Vibrant Coastal Color Palette
This palette exudes a vibrant coastal energy, blending deep teal and fresh mint with lively citrus green, and punctuated by bold coral and rich raspberry for a lively, modern feel.
Practical uses and creative applications
The Vibrant Coastal Color Palette seamlessly combines refreshing oceanic tones and lively accents, making it an ideal choice for creatives looking to evoke a sense of tranquility and adventure. With deep blues like #556270, paired with the uplifting turquoise of #4ECDC4, this palette captures the essence of coastal living.
Designers can utilize these colors in branding projects aimed at lifestyle brands, travel agencies, or wellness products, where a mix of calm and energy is essential in creating an inviting atmosphere. In web design, the Vibrant Coastal Color Palette can enhance user experience by providing a visually appealing interface that resonates with beach lovers and adventurers alike.
The bright greens (#C7F464) and coral tones (#FF6B6B) not only add a touch of vibrancy but also promote engagement and positivity. Perfect for packaging designs, this palette can attract attention on store shelves, making it suitable for eco-friendly products, summer collections, or artisanal goods.
Whether you're a graphic designer, product developer, or interior decorator, this palette offers versatile options that embody a breezy, coastal charm.
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.921 0.006 255.48) | #e2e5e9 | hsl(214, 14%, 90%) |
|
|
| 100 | oklch(0.839 0.012 247.98) | #c4cbd2 | hsl(210, 13%, 80%) |
|
|
| 200 | oklch(0.755 0.020 248.09) | #a6b1bc | hsl(210, 14%, 69%) |
|
|
| 300 | oklch(0.668 0.027 252.00) | #8996a5 | hsl(212, 13%, 59%) |
|
|
| 400 | oklch(0.580 0.034 251.47) | #6c7c8e | hsl(212, 14%, 49%) |
|
|
| 500 | oklch(0.490 0.028 250.33) | #556270 | hsl(211, 14%, 39%) |
|
|
| 600 | oklch(0.437 0.024 250.66) | #48535f | hsl(211, 14%, 33%) |
|
|
| 700 | oklch(0.386 0.021 251.12) | #3c454f | hsl(212, 14%, 27%) |
|
|
| 800 | oklch(0.330 0.017 251.83) | #2f363e | hsl(212, 14%, 21%) |
|
|
| 900 | oklch(0.274 0.013 253.04) | #23282e | hsl(213, 14%, 16%) |
|
|
| 950 | oklch(0.212 0.009 255.61) | #16191d | hsl(214, 14%, 10%) |
|
dsfds
| 50 | oklch(0.946 0.030 191.59) | #d7f4f2 | hsl(176, 57%, 90%) |
|
|
| 100 | oklch(0.909 0.049 191.59) | #bcece9 | hsl(176, 56%, 83%) |
|
|
| 200 | oklch(0.872 0.068 190.22) | #a0e4df | hsl(176, 56%, 76%) |
|
|
| 300 | oklch(0.840 0.086 189.14) | #85ddd6 | hsl(175, 56%, 69%) |
|
|
| 400 | oklch(0.807 0.101 188.94) | #69d5cd | hsl(176, 56%, 62%) |
|
|
| 500 | oklch(0.776 0.112 188.54) | #4ecdc4 | hsl(176, 56%, 55%) |
|
|
| 600 | oklch(0.711 0.111 188.21) | #34b8af | hsl(176, 56%, 46%) |
|
|
| 700 | oklch(0.607 0.094 188.50) | #2a948d | hsl(176, 56%, 37%) |
|
|
| 800 | oklch(0.496 0.076 187.77) | #20706a | hsl(176, 56%, 28%) |
|
|
| 900 | oklch(0.380 0.057 188.15) | #154c48 | hsl(176, 57%, 19%) |
|
|
| 950 | oklch(0.254 0.035 188.99) | #0b2826 | hsl(176, 57%, 10%) |
|
dsfds
| 50 | oklch(0.969 0.060 121.58) | #eefccf | hsl(79, 88%, 90%) |
|
|
| 100 | oklch(0.955 0.085 122.11) | #e6faba | hsl(79, 86%, 85%) |
|
|
| 200 | oklch(0.943 0.112 122.88) | #def9a4 | hsl(79, 88%, 81%) |
|
|
| 300 | oklch(0.930 0.135 123.00) | #d7f78f | hsl(78, 87%, 76%) |
|
|
| 400 | oklch(0.920 0.158 123.82) | #cff679 | hsl(79, 87%, 72%) |
|
|
| 500 | oklch(0.908 0.177 124.49) | #c7f464 | hsl(79, 87%, 67%) |
|
|
| 600 | oklch(0.882 0.215 126.61) | #b3f02d | hsl(79, 87%, 56%) |
|
|
| 700 | oklch(0.798 0.206 127.98) | #96d40f | hsl(79, 87%, 45%) |
|
|
| 800 | oklch(0.639 0.164 127.76) | #6f9d0b | hsl(79, 87%, 33%) |
|
|
| 900 | oklch(0.470 0.118 126.87) | #496607 | hsl(78, 87%, 21%) |
|
|
| 950 | oklch(0.286 0.069 125.78) | #223003 | hsl(79, 88%, 10%) |
|
dsfds
| 50 | oklch(0.890 0.058 18.30) | #ffcccc | hsl(0, 100%, 90%) |
|
|
| 100 | oklch(0.851 0.081 18.89) | #ffb9b9 | hsl(0, 100%, 86%) |
|
|
| 200 | oklch(0.811 0.107 19.65) | #ffa5a5 | hsl(0, 100%, 82%) |
|
|
| 300 | oklch(0.776 0.132 20.53) | #ff9292 | hsl(0, 100%, 79%) |
|
|
| 400 | oklch(0.741 0.158 21.62) | #ff7e7e | hsl(0, 100%, 75%) |
|
|
| 500 | oklch(0.712 0.181 22.84) | #ff6b6b | hsl(0, 100%, 71%) |
|
|
| 600 | oklch(0.645 0.241 27.38) | #ff2d2d | hsl(0, 100%, 59%) |
|
|
| 700 | oklch(0.596 0.245 29.23) | #ee0000 | hsl(0, 100%, 47%) |
|
|
| 800 | oklch(0.473 0.194 29.23) | #af0000 | hsl(0, 100%, 34%) |
|
|
| 900 | oklch(0.345 0.141 29.23) | #710000 | hsl(0, 100%, 22%) |
|
|
| 950 | oklch(0.202 0.083 29.23) | #330000 | hsl(0, 100%, 10%) |
|
dsfds
| 50 | oklch(0.906 0.028 12.15) | #f2d9db | hsl(355, 49%, 90%) |
|
|
| 100 | oklch(0.838 0.051 12.08) | #e9bdc1 | hsl(355, 50%, 83%) |
|
|
| 200 | oklch(0.771 0.075 12.66) | #e0a1a7 | hsl(354, 50%, 75%) |
|
|
| 300 | oklch(0.704 0.101 14.45) | #d7858c | hsl(355, 51%, 68%) |
|
|
| 400 | oklch(0.640 0.127 15.67) | #cd6972 | hsl(355, 50%, 61%) |
|
|
| 500 | oklch(0.581 0.152 17.69) | #c44d58 | hsl(354, 50%, 54%) |
|
|
| 600 | oklch(0.513 0.150 18.70) | #ac3944 | hsl(354, 50%, 45%) |
|
|
| 700 | oklch(0.439 0.125 18.91) | #8a2e36 | hsl(355, 50%, 36%) |
|
|
| 800 | oklch(0.364 0.100 18.58) | #692329 | hsl(355, 50%, 27%) |
|
|
| 900 | oklch(0.286 0.073 18.05) | #48181c | hsl(355, 50%, 19%) |
|
|
| 950 | oklch(0.200 0.042 16.72) | #260d0f | hsl(355, 49%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
