Coastal Vibes Color Palette
This palette radiates a vibrant, coastal energy with deep teal and sun-kissed coral, balanced by soft sandy beige and bright lemon, evoking a lively seaside retreat filled with warmth and carefree charm.
Practical uses and creative applications
The Coastal Vibes Color Palette beautifully captures the essence of seaside serenity, making it an ideal choice for designers and creatives looking to evoke a sense of calm and freshness. Featuring deep oceanic shades like #001f21, paired with the vibrant turquoise of #029b99, this palette instantly transports users to a coastal paradise.
The soft sandy hue of #ebe7b7 adds a warm, inviting touch, while the fiery coral #de4f15 and sunny yellow #ecc039 infuse energy and optimism. This combination is perfect for branding, web design, and packaging that aims to connect with audiences seeking relaxation and inspiration.
Whether you’re designing a beach-themed resort website, creating packaging for eco-friendly products, or refreshing an interior space with nautical charm, the Coastal Vibes Color Palette is versatile enough to suit various applications. Ideal for brands in the wellness, travel, or lifestyle sectors, this palette resonates with audiences who appreciate nature-inspired aesthetics.
By incorporating these colors into your projects, you can create a cohesive and visually appealing experience that not only captures attention but also evokes the serene and invigorating spirit of the coast.
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.959 0.049 201.08) | #ccfcff | hsl(184, 100%, 90%) |
|
|
| 100 | oklch(0.907 0.114 200.86) | #77f7ff | hsl(184, 100%, 73%) |
|
|
| 200 | oklch(0.877 0.145 201.96) | #22f2ff | hsl(184, 100%, 57%) |
|
|
| 300 | oklch(0.733 0.125 202.80) | #00bfcb | hsl(184, 100%, 40%) |
|
|
| 400 | oklch(0.493 0.084 202.46) | #006f76 | hsl(184, 100%, 23%) |
|
|
| 500 | oklch(0.218 0.037 200.88) | #001f21 | hsl(184, 100%, 6%) |
|
|
| 600 | oklch(0.230 0.039 203.34) | #002225 | hsl(185, 100%, 7%) |
|
|
| 700 | oklch(0.244 0.042 200.06) | #002628 | hsl(183, 100%, 8%) |
|
|
| 800 | oklch(0.256 0.044 202.26) | #00292c | hsl(184, 100%, 9%) |
|
|
| 900 | oklch(0.270 0.046 199.43) | #002d2f | hsl(183, 100%, 9%) |
|
|
| 950 | oklch(0.281 0.048 201.42) | #003033 | hsl(184, 100%, 10%) |
|
dsfds
| 50 | oklch(0.963 0.050 196.36) | #cdfefe | hsl(180, 96%, 90%) |
|
|
| 100 | oklch(0.931 0.101 194.02) | #91fefc | hsl(179, 98%, 78%) |
|
|
| 200 | oklch(0.909 0.136 193.88) | #55fdfb | hsl(179, 98%, 66%) |
|
|
| 300 | oklch(0.897 0.151 193.23) | #1afcf9 | hsl(179, 97%, 55%) |
|
|
| 400 | oklch(0.795 0.136 192.98) | #03d7d4 | hsl(179, 97%, 43%) |
|
|
| 500 | oklch(0.624 0.107 193.15) | #029b99 | hsl(179, 97%, 31%) |
|
|
| 600 | oklch(0.561 0.096 192.92) | #028684 | hsl(179, 97%, 27%) |
|
|
| 700 | oklch(0.496 0.085 193.69) | #017170 | hsl(179, 98%, 22%) |
|
|
| 800 | oklch(0.430 0.073 193.48) | #015c5b | hsl(179, 98%, 18%) |
|
|
| 900 | oklch(0.360 0.061 193.16) | #014746 | hsl(179, 97%, 14%) |
|
|
| 950 | oklch(0.287 0.048 194.80) | #013232 | hsl(180, 96%, 10%) |
|
dsfds
| 50 | oklch(0.956 0.035 103.58) | #f4f2d7 | hsl(56, 57%, 90%) |
|
|
| 100 | oklch(0.949 0.041 104.12) | #f2f0d1 | hsl(56, 56%, 88%) |
|
|
| 200 | oklch(0.939 0.046 103.21) | #f0edca | hsl(55, 56%, 87%) |
|
|
| 300 | oklch(0.933 0.051 102.50) | #efebc4 | hsl(54, 57%, 85%) |
|
|
| 400 | oklch(0.926 0.058 103.15) | #ede9bd | hsl(55, 57%, 84%) |
|
|
| 500 | oklch(0.919 0.063 103.59) | #ebe7b7 | hsl(55, 57%, 82%) |
|
|
| 600 | oklch(0.857 0.108 104.37) | #dbd47e | hsl(55, 56%, 68%) |
|
|
| 700 | oklch(0.796 0.143 104.74) | #cbc144 | hsl(56, 56%, 53%) |
|
|
| 800 | oklch(0.649 0.121 104.27) | #9b922b | hsl(55, 57%, 39%) |
|
|
| 900 | oklch(0.466 0.085 104.91) | #615c1b | hsl(56, 56%, 24%) |
|
|
| 950 | oklch(0.264 0.043 105.03) | #28260b | hsl(56, 57%, 10%) |
|
dsfds
| 50 | oklch(0.919 0.038 44.87) | #fbddd0 | hsl(18, 84%, 90%) |
|
|
| 100 | oklch(0.849 0.072 42.46) | #f7bfa9 | hsl(17, 83%, 82%) |
|
|
| 200 | oklch(0.785 0.107 42.93) | #f3a281 | hsl(17, 83%, 73%) |
|
|
| 300 | oklch(0.724 0.142 42.29) | #ef855a | hsl(17, 82%, 65%) |
|
|
| 400 | oklch(0.672 0.176 40.75) | #ec6833 | hsl(17, 83%, 56%) |
|
|
| 500 | oklch(0.616 0.189 38.82) | #de4f15 | hsl(17, 83%, 48%) |
|
|
| 600 | oklch(0.544 0.164 39.16) | #bb4312 | hsl(17, 82%, 40%) |
|
|
| 700 | oklch(0.469 0.140 39.37) | #98360e | hsl(17, 83%, 33%) |
|
|
| 800 | oklch(0.391 0.113 40.01) | #752a0b | hsl(18, 83%, 25%) |
|
|
| 900 | oklch(0.309 0.085 40.17) | #521d08 | hsl(17, 82%, 18%) |
|
|
| 950 | oklch(0.222 0.054 44.12) | #2f1104 | hsl(18, 84%, 10%) |
|
dsfds
| 50 | oklch(0.956 0.043 91.27) | #fbf0d0 | hsl(45, 84%, 90%) |
|
|
| 100 | oklch(0.929 0.071 92.40) | #f8e7b2 | hsl(45, 83%, 84%) |
|
|
| 200 | oklch(0.901 0.096 91.96) | #f5dd94 | hsl(45, 83%, 77%) |
|
|
| 300 | oklch(0.874 0.118 91.41) | #f2d376 | hsl(45, 83%, 71%) |
|
|
| 400 | oklch(0.850 0.138 91.28) | #efca57 | hsl(45, 83%, 64%) |
|
|
| 500 | oklch(0.825 0.152 89.77) | #ecc039 | hsl(45, 82%, 57%) |
|
|
| 600 | oklch(0.774 0.155 87.62) | #dfae15 | hsl(45, 83%, 48%) |
|
|
| 700 | oklch(0.657 0.131 87.42) | #b38b11 | hsl(45, 83%, 38%) |
|
|
| 800 | oklch(0.536 0.106 87.98) | #87690d | hsl(45, 82%, 29%) |
|
|
| 900 | oklch(0.408 0.079 88.94) | #5b4709 | hsl(45, 82%, 20%) |
|
|
| 950 | oklch(0.266 0.050 89.48) | #2f2404 | hsl(45, 84%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
