Coastal Vibes Color Palette
This vibrant palette blends deep teal and refreshing aqua with soft lemon and zesty orange, evoking a lively coastal vibe filled with sunny optimism and playful energy.
Practical uses and creative applications
The Coastal Vibes Color Palette beautifully captures the essence of coastal living, making it an ideal choice for designers and creatives looking to evoke a refreshing, breezy atmosphere. With harmonious shades like the deep teal of #00686c and the vibrant turquoise of #32c2b9, this palette is perfect for branding projects that seek to communicate tranquility and natural beauty.
The sunny yellows (#fad928) and warm oranges (#ff9915) add an energetic touch, making it suitable for everything from web design to packaging that aims to capture the joy of seaside adventures. Ideal for businesses in the wellness, travel, or lifestyle sectors, the Coastal Vibes Color Palette can elevate your brand identity while resonating with audiences who value authenticity and relaxation.
It's particularly effective in interior design, where these colors can transform a space into a serene coastal retreat. Whether you’re a graphic designer crafting a beach-themed website or a creative looking to infuse warmth into product packaging, this palette offers a versatile range that inspires a laid-back yet vibrant mood.
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.961 0.050 199.44) | #ccfdff | hsl(182, 100%, 90%) |
|
|
100 | oklch(0.921 0.107 198.40) | #86fbff | hsl(182, 100%, 76%) |
|
|
200 | oklch(0.895 0.140 198.87) | #40f8ff | hsl(182, 100%, 63%) |
|
|
300 | oklch(0.865 0.147 199.66) | #00eff8 | hsl(182, 100%, 49%) |
|
|
400 | oklch(0.676 0.115 199.21) | #00acb2 | hsl(182, 100%, 35%) |
|
|
500 | oklch(0.470 0.080 199.43) | #00686c | hsl(182, 100%, 21%) |
|
|
600 | oklch(0.435 0.074 199.91) | #005d61 | hsl(182, 100%, 19%) |
|
|
700 | oklch(0.398 0.068 199.07) | #005255 | hsl(182, 100%, 17%) |
|
|
800 | oklch(0.362 0.061 199.62) | #00474a | hsl(182, 100%, 15%) |
|
|
900 | oklch(0.323 0.055 198.49) | #003c3e | hsl(182, 100%, 12%) |
|
|
950 | oklch(0.284 0.048 199.13) | #003133 | hsl(182, 100%, 10%) |
|
dsfds
50 | oklch(0.947 0.032 191.87) | #d6f5f3 | hsl(176, 61%, 90%) |
|
|
100 | oklch(0.904 0.057 190.73) | #b4ece8 | hsl(176, 60%, 82%) |
|
|
200 | oklch(0.862 0.080 190.81) | #92e3de | hsl(176, 59%, 73%) |
|
|
300 | oklch(0.823 0.099 189.74) | #70dad3 | hsl(176, 59%, 65%) |
|
|
400 | oklch(0.787 0.114 189.39) | #4ed1c9 | hsl(176, 59%, 56%) |
|
|
500 | oklch(0.739 0.118 188.60) | #32c2b9 | hsl(176, 59%, 48%) |
|
|
600 | oklch(0.650 0.103 189.12) | #2aa39c | hsl(177, 59%, 40%) |
|
|
700 | oklch(0.560 0.088 187.91) | #22857e | hsl(176, 59%, 33%) |
|
|
800 | oklch(0.464 0.072 188.52) | #1a6661 | hsl(176, 59%, 25%) |
|
|
900 | oklch(0.363 0.054 189.60) | #124744 | hsl(177, 60%, 17%) |
|
|
950 | oklch(0.258 0.036 189.22) | #0a2927 | hsl(176, 61%, 10%) |
|
dsfds
50 | oklch(0.962 0.041 107.14) | #f5f5d6 | hsl(60, 61%, 90%) |
|
|
100 | oklch(0.956 0.047 105.95) | #f4f3cf | hsl(58, 63%, 88%) |
|
|
200 | oklch(0.949 0.053 106.22) | #f2f1c8 | hsl(59, 62%, 87%) |
|
|
300 | oklch(0.941 0.060 106.46) | #f0efc1 | hsl(59, 61%, 85%) |
|
|
400 | oklch(0.937 0.067 106.71) | #efeeba | hsl(59, 62%, 83%) |
|
|
500 | oklch(0.930 0.074 106.91) | #edecb3 | hsl(59, 62%, 82%) |
|
|
600 | oklch(0.878 0.124 107.69) | #dfdd78 | hsl(59, 62%, 67%) |
|
|
700 | oklch(0.829 0.159 108.23) | #d1ce3d | hsl(59, 62%, 53%) |
|
|
800 | oklch(0.677 0.134 108.51) | #9f9d26 | hsl(59, 61%, 39%) |
|
|
900 | oklch(0.486 0.094 108.67) | #646318 | hsl(59, 61%, 24%) |
|
|
950 | oklch(0.273 0.048 109.19) | #29290a | hsl(60, 61%, 10%) |
|
dsfds
50 | oklch(0.969 0.054 98.14) | #fef6cd | hsl(50, 96%, 90%) |
|
|
100 | oklch(0.950 0.087 98.63) | #fdf0ac | hsl(50, 95%, 83%) |
|
|
200 | oklch(0.934 0.118 99.47) | #fceb8b | hsl(51, 95%, 77%) |
|
|
300 | oklch(0.917 0.144 98.83) | #fce56a | hsl(51, 96%, 70%) |
|
|
400 | oklch(0.902 0.164 98.34) | #fbdf49 | hsl(51, 96%, 64%) |
|
|
500 | oklch(0.887 0.175 97.35) | #fad928 | hsl(51, 95%, 57%) |
|
|
600 | oklch(0.840 0.172 95.40) | #edc806 | hsl(50, 95%, 48%) |
|
|
700 | oklch(0.714 0.146 96.00) | #bea104 | hsl(51, 96%, 38%) |
|
|
800 | oklch(0.579 0.118 96.21) | #8f7903 | hsl(51, 96%, 29%) |
|
|
900 | oklch(0.440 0.090 96.72) | #615202 | hsl(51, 96%, 19%) |
|
|
950 | oklch(0.285 0.058 97.74) | #322a01 | hsl(50, 96%, 10%) |
|
dsfds
50 | oklch(0.944 0.045 74.78) | #ffe9cc | hsl(34, 100%, 90%) |
|
|
100 | oklch(0.906 0.077 74.19) | #ffd9a7 | hsl(34, 100%, 83%) |
|
|
200 | oklch(0.869 0.107 72.86) | #ffc983 | hsl(34, 100%, 76%) |
|
|
300 | oklch(0.834 0.134 71.25) | #ffb95e | hsl(34, 100%, 68%) |
|
|
400 | oklch(0.802 0.156 68.23) | #ffa93a | hsl(34, 100%, 61%) |
|
|
500 | oklch(0.772 0.171 63.60) | #ff9915 | hsl(34, 100%, 54%) |
|
|
600 | oklch(0.703 0.164 60.21) | #e78200 | hsl(34, 100%, 45%) |
|
|
700 | oklch(0.600 0.139 61.15) | #ba6900 | hsl(34, 100%, 36%) |
|
|
800 | oklch(0.493 0.113 62.64) | #8d5000 | hsl(34, 100%, 28%) |
|
|
900 | oklch(0.377 0.085 64.21) | #603600 | hsl(34, 100%, 19%) |
|
|
950 | oklch(0.254 0.055 70.14) | #331d00 | hsl(34, 100%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.