Nautical Charm Color Palette
This palette exudes a sophisticated nautical charm, blending deep navy blues with vibrant golden yellows and a soft creamy white, evoking a sense of calm elegance and sunny optimism.
Practical uses and creative applications
The Nautical Charm Color Palette seamlessly blends deep oceanic hues with warm sunlit accents, making it an ideal choice for branding and web design that aims to evoke a sense of adventure and tranquility. The rich navy (#001740) and vibrant blue (#0F2A71) serve as a strong foundation, perfect for conveying reliability and professionalism, while the cheerful yellows (#F5C402, #FFDB5F) add a touch of optimism and energy.
This palette is especially suited for brands related to travel, coastal living, or outdoor activities, allowing creatives to create engaging visuals that resonate with their audience. For interior designers, the Nautical Charm Color Palette offers an inviting atmosphere perfect for homes, cafes, or boutique hotels.
The combination of deep blues with soft neutrals (#FFFDF0) creates a serene environment that feels both refreshing and cozy. Whether you're designing a beach-inspired living room or a stylish restaurant, these colors can help establish a cohesive theme that enhances the overall experience.
This palette appeals to designers and creatives who want to infuse their projects with a sense of calm while capturing the essence of coastal beauty.
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.
| 50 | oklch(0.898 0.049 262.61) | #ccdeff | hsl(219, 100%, 90%) |
|
|
| 100 | oklch(0.745 0.131 261.24) | #7dacff | hsl(218, 100%, 75%) |
|
|
| 200 | oklch(0.607 0.213 261.01) | #2e79ff | hsl(218, 100%, 59%) |
|
|
| 300 | oklch(0.493 0.226 261.87) | #0050de | hsl(218, 100%, 44%) |
|
|
| 400 | oklch(0.361 0.160 261.40) | #00338f | hsl(219, 100%, 28%) |
|
|
| 500 | oklch(0.218 0.084 259.03) | #001740 | hsl(218, 100%, 13%) |
|
|
| 600 | oklch(0.212 0.081 258.76) | #00163d | hsl(218, 100%, 12%) |
|
|
| 700 | oklch(0.207 0.080 258.78) | #00153b | hsl(219, 100%, 12%) |
|
|
| 800 | oklch(0.202 0.076 258.47) | #001438 | hsl(219, 100%, 11%) |
|
|
| 900 | oklch(0.197 0.075 258.49) | #001336 | hsl(219, 100%, 11%) |
|
|
| 950 | oklch(0.191 0.071 258.13) | #001233 | hsl(219, 100%, 10%) |
|
| 50 | oklch(0.898 0.040 268.52) | #d2ddf9 | hsl(223, 76%, 90%) |
|
|
| 100 | oklch(0.763 0.098 268.45) | #98b0f1 | hsl(224, 76%, 77%) |
|
|
| 200 | oklch(0.634 0.159 266.22) | #5d84ea | hsl(223, 77%, 64%) |
|
|
| 300 | oklch(0.515 0.218 264.23) | #2357e2 | hsl(224, 77%, 51%) |
|
|
| 400 | oklch(0.419 0.177 264.05) | #1740ab | hsl(223, 76%, 38%) |
|
|
| 500 | oklch(0.316 0.127 264.32) | #0f2a71 | hsl(223, 77%, 25%) |
|
|
| 600 | oklch(0.291 0.114 264.28) | #0d2563 | hsl(223, 77%, 22%) |
|
|
| 700 | oklch(0.266 0.102 264.34) | #0b2056 | hsl(223, 77%, 19%) |
|
|
| 800 | oklch(0.241 0.087 264.83) | #0a1b48 | hsl(224, 76%, 16%) |
|
|
| 900 | oklch(0.215 0.074 264.94) | #08163b | hsl(224, 76%, 13%) |
|
|
| 950 | oklch(0.187 0.059 264.45) | #06112d | hsl(223, 76%, 10%) |
|
| 50 | oklch(0.966 0.053 94.43) | #fff4cc | hsl(47, 100%, 90%) |
|
|
| 100 | oklch(0.941 0.095 96.12) | #feeca2 | hsl(48, 98%, 82%) |
|
|
| 200 | oklch(0.917 0.130 95.48) | #fee378 | hsl(48, 99%, 73%) |
|
|
| 300 | oklch(0.895 0.157 94.36) | #feda4e | hsl(48, 99%, 65%) |
|
|
| 400 | oklch(0.874 0.172 92.68) | #fdd124 | hsl(48, 98%, 57%) |
|
|
| 500 | oklch(0.840 0.171 90.40) | #f5c402 | hsl(48, 98%, 48%) |
|
|
| 600 | oklch(0.738 0.151 90.74) | #cea502 | hsl(48, 98%, 41%) |
|
|
| 700 | oklch(0.633 0.129 91.25) | #a78601 | hsl(48, 99%, 33%) |
|
|
| 800 | oklch(0.523 0.107 92.00) | #806701 | hsl(48, 98%, 25%) |
|
|
| 900 | oklch(0.408 0.083 93.28) | #594801 | hsl(48, 98%, 18%) |
|
|
| 950 | oklch(0.281 0.058 92.90) | #332800 | hsl(47, 100%, 10%) |
|
| 50 | oklch(0.966 0.053 94.43) | #fff4cc | hsl(47, 100%, 90%) |
|
|
| 100 | oklch(0.951 0.075 94.27) | #ffefb6 | hsl(47, 100%, 86%) |
|
|
| 200 | oklch(0.937 0.095 94.14) | #ffeaa0 | hsl(47, 100%, 81%) |
|
|
| 300 | oklch(0.924 0.114 93.80) | #ffe58b | hsl(47, 100%, 77%) |
|
|
| 400 | oklch(0.911 0.131 93.50) | #ffe075 | hsl(47, 100%, 73%) |
|
|
| 500 | oklch(0.899 0.146 93.00) | #ffdb5f | hsl(47, 100%, 69%) |
|
|
| 600 | oklch(0.870 0.171 90.51) | #ffce23 | hsl(47, 100%, 57%) |
|
|
| 700 | oklch(0.791 0.162 87.90) | #e6b300 | hsl(47, 100%, 45%) |
|
|
| 800 | oklch(0.633 0.129 87.67) | #ab8400 | hsl(46, 100%, 34%) |
|
|
| 900 | oklch(0.466 0.095 89.06) | #6f5600 | hsl(46, 100%, 22%) |
|
|
| 950 | oklch(0.281 0.058 92.90) | #332800 | hsl(47, 100%, 10%) |
|
| 50 | oklch(0.974 0.057 99.87) | #fff8cc | hsl(52, 100%, 90%) |
|
|
| 100 | oklch(0.977 0.050 99.84) | #fff9d3 | hsl(52, 100%, 91%) |
|
|
| 200 | oklch(0.981 0.042 99.82) | #fffada | hsl(52, 100%, 93%) |
|
|
| 300 | oklch(0.985 0.033 99.52) | #fffbe2 | hsl(52, 100%, 94%) |
|
|
| 400 | oklch(0.988 0.025 99.52) | #fffce9 | hsl(52, 100%, 96%) |
|
|
| 500 | oklch(0.992 0.017 99.59) | #fffdf0 | hsl(52, 100%, 97%) |
|
|
| 600 | oklch(0.950 0.112 100.54) | #fff197 | hsl(52, 100%, 80%) |
|
|
| 700 | oklch(0.917 0.174 99.94) | #ffe53e | hsl(52, 100%, 62%) |
|
|
| 800 | oklch(0.828 0.171 97.73) | #e5c600 | hsl(52, 100%, 45%) |
|
|
| 900 | oklch(0.576 0.119 98.19) | #8c7900 | hsl(52, 100%, 27%) |
|
|
| 950 | oklch(0.292 0.061 99.88) | #332c00 | hsl(52, 100%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection
