Vibrant Coastal Color Palette
This palette radiates a vibrant coastal charm, blending soothing teal (#45aab8) with sunny yellows (#e1d772, #faf4b1) and a bold pop of coral (#f06b50), all anchored by deep charcoal (#394240) for a stylish, relaxed vibe.
Practical uses and creative applications
The Vibrant Coastal Color Palette is a refreshing blend of hues that encapsulates the essence of sun-soaked beaches and lively seaside adventures. Featuring shades like the tranquil teal (#45aab8) and the sunny yellow (#e1d772), this palette is ideal for designers looking to evoke a sense of joy and relaxation.
It's perfect for branding projects that aim to communicate a vibrant, coastal lifestyle, making it an excellent choice for businesses in the travel, hospitality, and wellness industries. Web designers can leverage this color scheme to create engaging, visually appealing websites that invite users to explore and connect.
The combination of soft neutrals like the sandy beige (#faf4b1) and the grounded slate (#394240) provides a balanced backdrop, allowing the bolder coral accent (#f06b50) to pop and draw attention to key elements. Whether used in packaging for a new product line or to refresh coastal-themed interiors, this palette inspires a bright, breezy atmosphere that resonates with creatives and audiences alike.
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.935 0.022 207.58) | #daeef1 | hsl(188, 45%, 90%) |
|
|
| 100 | oklch(0.885 0.039 206.48) | #bce1e6 | hsl(187, 46%, 82%) |
|
|
| 200 | oklch(0.833 0.056 207.68) | #9ed3db | hsl(188, 46%, 74%) |
|
|
| 300 | oklch(0.783 0.071 206.11) | #80c6cf | hsl(187, 45%, 66%) |
|
|
| 400 | oklch(0.733 0.085 207.30) | #62b8c4 | hsl(187, 45%, 58%) |
|
|
| 500 | oklch(0.685 0.094 207.83) | #45aab8 | hsl(187, 45%, 50%) |
|
|
| 600 | oklch(0.604 0.082 208.01) | #3a8f9b | hsl(187, 46%, 42%) |
|
|
| 700 | oklch(0.519 0.070 206.99) | #2f747d | hsl(187, 45%, 34%) |
|
|
| 800 | oklch(0.431 0.057 207.05) | #245960 | hsl(187, 45%, 26%) |
|
|
| 900 | oklch(0.336 0.042 207.45) | #193d42 | hsl(187, 45%, 18%) |
|
|
| 950 | oklch(0.237 0.026 208.08) | #0e2225 | hsl(188, 45%, 10%) |
|
dsfds
| 50 | oklch(0.959 0.039 102.43) | #f6f3d5 | hsl(55, 65%, 90%) |
|
|
| 100 | oklch(0.939 0.057 102.06) | #f2edc1 | hsl(54, 65%, 85%) |
|
|
| 200 | oklch(0.922 0.076 102.90) | #eee8ad | hsl(54, 66%, 81%) |
|
|
| 300 | oklch(0.902 0.092 103.33) | #e9e29a | hsl(55, 64%, 76%) |
|
|
| 400 | oklch(0.885 0.109 103.81) | #e5dd86 | hsl(55, 65%, 71%) |
|
|
| 500 | oklch(0.866 0.124 103.59) | #e1d772 | hsl(55, 65%, 66%) |
|
|
| 600 | oklch(0.826 0.151 103.77) | #d7ca43 | hsl(55, 65%, 55%) |
|
|
| 700 | oklch(0.731 0.143 102.95) | #b9ab27 | hsl(54, 65%, 44%) |
|
|
| 800 | oklch(0.588 0.114 103.27) | #897f1d | hsl(54, 65%, 33%) |
|
|
| 900 | oklch(0.436 0.082 102.91) | #5a5313 | hsl(54, 65%, 21%) |
|
|
| 950 | oklch(0.269 0.046 103.61) | #2a2709 | hsl(55, 65%, 10%) |
|
dsfds
| 50 | oklch(0.972 0.053 102.73) | #fcf8cf | hsl(55, 88%, 90%) |
|
|
| 100 | oklch(0.969 0.060 102.30) | #fcf7c9 | hsl(54, 89%, 89%) |
|
|
| 200 | oklch(0.967 0.067 103.92) | #fbf7c3 | hsl(56, 88%, 87%) |
|
|
| 300 | oklch(0.963 0.073 103.49) | #fbf6bd | hsl(55, 89%, 86%) |
|
|
| 400 | oklch(0.959 0.079 103.92) | #faf5b7 | hsl(56, 87%, 85%) |
|
|
| 500 | oklch(0.956 0.085 103.57) | #faf4b1 | hsl(55, 88%, 84%) |
|
|
| 600 | oklch(0.921 0.149 104.38) | #f5ea6a | hsl(55, 87%, 69%) |
|
|
| 700 | oklch(0.893 0.182 103.68) | #f1e024 | hsl(55, 88%, 54%) |
|
|
| 800 | oklch(0.743 0.155 103.66) | #bdaf0c | hsl(55, 88%, 39%) |
|
|
| 900 | oklch(0.528 0.108 102.95) | #776d08 | hsl(55, 87%, 25%) |
|
|
| 950 | oklch(0.289 0.058 103.73) | #302c03 | hsl(55, 88%, 10%) |
|
dsfds
| 50 | oklch(0.926 0.003 197.10) | #e4e7e7 | hsl(180, 6%, 90%) |
|
|
| 100 | oklch(0.826 0.009 179.55) | #c0c8c6 | hsl(165, 7%, 77%) |
|
|
| 200 | oklch(0.724 0.015 180.53) | #9ca9a6 | hsl(166, 7%, 64%) |
|
|
| 300 | oklch(0.617 0.023 181.43) | #778a86 | hsl(167, 8%, 50%) |
|
|
| 400 | oklch(0.497 0.018 181.21) | #586663 | hsl(167, 7%, 37%) |
|
|
| 500 | oklch(0.370 0.012 180.74) | #394240 | hsl(167, 7%, 24%) |
|
|
| 600 | oklch(0.341 0.011 187.54) | #323a39 | hsl(173, 7%, 21%) |
|
|
| 700 | oklch(0.314 0.010 176.58) | #2c3331 | hsl(163, 7%, 19%) |
|
|
| 800 | oklch(0.283 0.009 184.63) | #252b2a | hsl(170, 8%, 16%) |
|
|
| 900 | oklch(0.251 0.008 182.35) | #1e2322 | hsl(168, 8%, 13%) |
|
|
| 950 | oklch(0.219 0.005 196.82) | #181b1b | hsl(180, 6%, 10%) |
|
dsfds
| 50 | oklch(0.907 0.042 30.85) | #fbd7d0 | hsl(10, 84%, 90%) |
|
|
| 100 | oklch(0.860 0.066 32.50) | #f9c2b6 | hsl(11, 85%, 85%) |
|
|
| 200 | oklch(0.812 0.092 31.68) | #f7ac9d | hsl(10, 85%, 79%) |
|
|
| 300 | oklch(0.766 0.117 32.19) | #f49683 | hsl(10, 84%, 74%) |
|
|
| 400 | oklch(0.724 0.143 32.70) | #f2816a | hsl(10, 84%, 68%) |
|
|
| 500 | oklch(0.685 0.170 33.11) | #f06b50 | hsl(10, 84%, 63%) |
|
|
| 600 | oklch(0.625 0.213 33.07) | #ec411e | hsl(10, 84%, 52%) |
|
|
| 700 | oklch(0.539 0.190 32.75) | #c42f11 | hsl(10, 84%, 42%) |
|
|
| 800 | oklch(0.436 0.150 32.83) | #92230d | hsl(10, 84%, 31%) |
|
|
| 900 | oklch(0.329 0.109 33.19) | #611708 | hsl(10, 85%, 21%) |
|
|
| 950 | oklch(0.211 0.061 34.69) | #2f0b04 | hsl(10, 84%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
