Vibrant Coastal Color Palette
This palette radiates a vibrant coastal energy, blending the cool tranquility of teal (#2197a3) with lively coral pinks (#f71e6c and #f07868), softened by warm sandy tones (#ebb970 and #e7d3b0), evoking a joyful summer sunset by the beach.
Practical uses and creative applications
The Vibrant Coastal Color Palette is a stunning combination of hues that effortlessly captures the essence of seaside charm. With its refreshing teal (#2197a3), bold coral (#f71e6c), warm peach (#f07868), sunny yellow (#ebb970), and soft sand (#e7d3b0), this palette is ideal for brands aiming to evoke a sense of relaxation and energy.
Perfect for web design, the vibrant colors can be used to create engaging landing pages that draw in users and encourage exploration. Designers can utilize these shades to develop eye-catching packaging that stands out on the shelves, making products feel lively and inviting.
This palette is particularly suited for creative professionals in the lifestyle, travel, and wellness sectors. Whether you're a graphic designer crafting a new logo or an interior designer looking to bring a beachy vibe to a space, the Vibrant Coastal Color Palette offers versatility and appeal.
It can effortlessly transform a modern coastal home or a trendy café, creating an atmosphere that feels both invigorating and soothing. By incorporating these colors into your projects, you can transport your audience to a sunny shoreline, making them feel inspired and uplifted.
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.943 0.032 203.97) | #d5f3f6 | hsl(185, 65%, 90%) |
|
|
| 100 | oklch(0.888 0.063 204.82) | #a9e7ee | hsl(186, 67%, 80%) |
|
|
| 200 | oklch(0.837 0.090 204.47) | #7ddbe5 | hsl(186, 67%, 69%) |
|
|
| 300 | oklch(0.790 0.111 204.75) | #51cfdc | hsl(186, 67%, 59%) |
|
|
| 400 | oklch(0.741 0.119 205.44) | #2ac0cf | hsl(185, 66%, 49%) |
|
|
| 500 | oklch(0.621 0.099 205.51) | #2197a3 | hsl(186, 66%, 38%) |
|
|
| 600 | oklch(0.553 0.088 205.17) | #1c818b | hsl(185, 66%, 33%) |
|
|
| 700 | oklch(0.482 0.076 206.01) | #176a73 | hsl(186, 67%, 27%) |
|
|
| 800 | oklch(0.410 0.063 205.64) | #12545b | hsl(186, 67%, 21%) |
|
|
| 900 | oklch(0.335 0.051 205.05) | #0d3e43 | hsl(186, 68%, 16%) |
|
|
| 950 | oklch(0.252 0.035 204.43) | #09272a | hsl(185, 65%, 10%) |
|
dsfds
| 50 | oklch(0.897 0.057 354.63) | #fdcedf | hsl(338, 92%, 90%) |
|
|
| 100 | oklch(0.827 0.101 356.41) | #fcabc8 | hsl(339, 93%, 83%) |
|
|
| 200 | oklch(0.762 0.147 358.16) | #fb87b1 | hsl(338, 94%, 76%) |
|
|
| 300 | oklch(0.706 0.188 0.59) | #f9649a | hsl(338, 93%, 68%) |
|
|
| 400 | oklch(0.662 0.222 4.02) | #f84183 | hsl(338, 93%, 61%) |
|
|
| 500 | oklch(0.633 0.242 8.62) | #f71e6c | hsl(338, 93%, 54%) |
|
|
| 600 | oklch(0.580 0.229 11.67) | #e00856 | hsl(338, 93%, 45%) |
|
|
| 700 | oklch(0.493 0.195 11.11) | #b40645 | hsl(338, 94%, 36%) |
|
|
| 800 | oklch(0.405 0.159 10.53) | #890534 | hsl(339, 93%, 28%) |
|
|
| 900 | oklch(0.309 0.120 8.18) | #5d0324 | hsl(338, 94%, 19%) |
|
|
| 950 | oklch(0.205 0.077 4.15) | #310213 | hsl(338, 92%, 10%) |
|
dsfds
| 50 | oklch(0.905 0.041 27.25) | #fad6d1 | hsl(7, 80%, 90%) |
|
|
| 100 | oklch(0.862 0.062 27.08) | #f8c3bc | hsl(7, 81%, 85%) |
|
|
| 200 | oklch(0.821 0.084 27.23) | #f6b0a7 | hsl(7, 81%, 81%) |
|
|
| 300 | oklch(0.781 0.106 27.58) | #f49d92 | hsl(7, 82%, 76%) |
|
|
| 400 | oklch(0.744 0.128 28.68) | #f28b7d | hsl(7, 82%, 72%) |
|
|
| 500 | oklch(0.708 0.151 29.19) | #f07868 | hsl(7, 82%, 67%) |
|
|
| 600 | oklch(0.632 0.203 30.69) | #eb4833 | hsl(7, 82%, 56%) |
|
|
| 700 | oklch(0.553 0.202 31.07) | #ce2a14 | hsl(7, 82%, 44%) |
|
|
| 800 | oklch(0.446 0.160 31.02) | #991f0f | hsl(7, 82%, 33%) |
|
|
| 900 | oklch(0.332 0.115 30.79) | #64140a | hsl(7, 82%, 22%) |
|
|
| 950 | oklch(0.208 0.061 31.91) | #2e0a05 | hsl(7, 80%, 10%) |
|
dsfds
| 50 | oklch(0.941 0.035 77.09) | #f9e9d2 | hsl(35, 76%, 90%) |
|
|
| 100 | oklch(0.914 0.049 76.11) | #f6dfbf | hsl(35, 75%, 86%) |
|
|
| 200 | oklch(0.890 0.065 77.50) | #f3d6ab | hsl(36, 75%, 81%) |
|
|
| 300 | oklch(0.864 0.080 77.01) | #f0cc97 | hsl(36, 75%, 77%) |
|
|
| 400 | oklch(0.841 0.094 76.45) | #eec384 | hsl(36, 76%, 73%) |
|
|
| 500 | oklch(0.816 0.108 75.73) | #ebb970 | hsl(36, 75%, 68%) |
|
|
| 600 | oklch(0.755 0.138 72.83) | #e4a03c | hsl(36, 76%, 56%) |
|
|
| 700 | oklch(0.665 0.137 69.10) | #c9821c | hsl(35, 76%, 45%) |
|
|
| 800 | oklch(0.537 0.108 70.23) | #956115 | hsl(36, 75%, 33%) |
|
|
| 900 | oklch(0.398 0.077 70.93) | #613f0e | hsl(35, 75%, 22%) |
|
|
| 950 | oklch(0.246 0.044 73.41) | #2d1d06 | hsl(35, 76%, 10%) |
|
dsfds
| 50 | oklch(0.937 0.025 81.12) | #f3e9d8 | hsl(38, 53%, 90%) |
|
|
| 100 | oklch(0.926 0.031 81.75) | #f1e5d0 | hsl(38, 54%, 88%) |
|
|
| 200 | oklch(0.912 0.035 81.27) | #eee0c8 | hsl(38, 53%, 86%) |
|
|
| 300 | oklch(0.900 0.041 81.70) | #ecdcc0 | hsl(38, 54%, 84%) |
|
|
| 400 | oklch(0.886 0.046 81.30) | #e9d7b8 | hsl(38, 53%, 82%) |
|
|
| 500 | oklch(0.874 0.051 81.62) | #e7d3b0 | hsl(38, 53%, 80%) |
|
|
| 600 | oklch(0.788 0.086 81.84) | #d6b579 | hsl(39, 53%, 66%) |
|
|
| 700 | oklch(0.703 0.115 78.56) | #c69643 | hsl(38, 53%, 52%) |
|
|
| 800 | oklch(0.566 0.095 79.07) | #946f2d | hsl(38, 53%, 38%) |
|
|
| 900 | oklch(0.411 0.067 78.97) | #5e461c | hsl(38, 54%, 24%) |
|
|
| 950 | oklch(0.238 0.033 79.47) | #271d0c | hsl(38, 53%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
