Modern Serenity Color Palette
This palette radiates a crisp, modern serenity with deep ocean blues and vibrant sky tones, harmoniously balanced by soft greys that evoke a sense of calm sophistication and contemporary elegance.
Practical uses and creative applications
The Modern Serenity Color Palette features a sophisticated blend of deep blues and soft grays, making it an ideal choice for those looking to create a tranquil and contemporary aesthetic. With its striking main colors#204C85, #00A4DA, #C2C3C5, #D2D2D4, and #E1E1E2this palette is perfect for branding initiatives that aim to convey professionalism and calm.
Whether you’re designing a sleek website, crafting eye-catching packaging, or refreshing interior spaces, these colors provide a balanced foundation that resonates well with audiences seeking sophistication and clarity. Ideal for designers, creatives, and brands in fields such as tech, wellness, and lifestyle, the Modern Serenity Color Palette evokes feelings of peace and productivity.
Its versatile hues can enhance user experience in web design, creating an inviting atmosphere that encourages engagement. Additionally, when applied to packaging, these colors can communicate a sense of reliability and modernity, appealing to discerning consumers.
Embrace the Modern Serenity palette to elevate your projects and inspire a sense of calm and focus in your audience.
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.911 0.028 256.49) | #d6e3f5 | hsl(215, 61%, 90%) |
|
|
| 100 | oklch(0.811 0.063 254.50) | #a6c4ea | hsl(214, 62%, 78%) |
|
|
| 200 | oklch(0.709 0.098 255.13) | #77a4de | hsl(214, 61%, 67%) |
|
|
| 300 | oklch(0.610 0.136 256.06) | #4884d3 | hsl(214, 61%, 55%) |
|
|
| 400 | oklch(0.515 0.137 256.12) | #2b67b4 | hsl(214, 61%, 44%) |
|
|
| 500 | oklch(0.417 0.107 256.14) | #204c85 | hsl(214, 61%, 32%) |
|
|
| 600 | oklch(0.376 0.096 256.79) | #1c4173 | hsl(214, 61%, 28%) |
|
|
| 700 | oklch(0.336 0.082 255.80) | #173760 | hsl(214, 61%, 23%) |
|
|
| 800 | oklch(0.293 0.070 256.74) | #132c4e | hsl(215, 61%, 19%) |
|
|
| 900 | oklch(0.250 0.054 255.07) | #0e223b | hsl(213, 62%, 14%) |
|
|
| 950 | oklch(0.203 0.041 256.83) | #0a1729 | hsl(215, 61%, 10%) |
|
| 50 | oklch(0.938 0.043 220.52) | #ccf2ff | hsl(195, 100%, 90%) |
|
|
| 100 | oklch(0.885 0.081 221.16) | #9ce6ff | hsl(195, 100%, 81%) |
|
|
| 200 | oklch(0.837 0.113 222.74) | #6cdaff | hsl(195, 100%, 71%) |
|
|
| 300 | oklch(0.799 0.137 224.87) | #3bcfff | hsl(195, 100%, 62%) |
|
|
| 400 | oklch(0.765 0.151 229.65) | #0bc3ff | hsl(195, 100%, 52%) |
|
|
| 500 | oklch(0.674 0.136 230.88) | #00a4da | hsl(195, 100%, 43%) |
|
|
| 600 | oklch(0.597 0.120 230.64) | #008bb9 | hsl(195, 100%, 36%) |
|
|
| 700 | oklch(0.517 0.103 229.61) | #007297 | hsl(195, 100%, 30%) |
|
|
| 800 | oklch(0.434 0.085 228.92) | #005976 | hsl(195, 100%, 23%) |
|
|
| 900 | oklch(0.343 0.067 228.10) | #003f54 | hsl(195, 100%, 16%) |
|
|
| 950 | oklch(0.250 0.048 225.89) | #002633 | hsl(195, 100%, 10%) |
|
| 50 | oklch(0.922 0.001 286.37) | #e5e5e6 | hsl(240, 2%, 90%) |
|
|
| 100 | oklch(0.901 0.003 286.35) | #dedee0 | hsl(240, 3%, 87%) |
|
|
| 200 | oklch(0.882 0.002 247.84) | #d7d8d9 | hsl(210, 3%, 85%) |
|
|
| 300 | oklch(0.860 0.002 247.84) | #d0d1d2 | hsl(210, 2%, 82%) |
|
|
| 400 | oklch(0.839 0.003 264.54) | #c9cacc | hsl(220, 3%, 79%) |
|
|
| 500 | oklch(0.817 0.003 264.54) | #c2c3c5 | hsl(220, 3%, 77%) |
|
|
| 600 | oklch(0.708 0.005 258.33) | #9fa1a4 | hsl(216, 3%, 63%) |
|
|
| 700 | oklch(0.593 0.008 268.50) | #7c7e83 | hsl(223, 3%, 50%) |
|
|
| 800 | oklch(0.478 0.005 258.34) | #5b5d60 | hsl(216, 3%, 37%) |
|
|
| 900 | oklch(0.352 0.004 264.52) | #3a3b3d | hsl(220, 3%, 23%) |
|
|
| 950 | oklch(0.214 0.002 286.23) | #19191a | hsl(240, 2%, 10%) |
|
| 50 | oklch(0.922 0.001 286.37) | #e5e5e6 | hsl(240, 2%, 90%) |
|
|
| 100 | oklch(0.910 0.001 286.37) | #e1e1e2 | hsl(240, 2%, 88%) |
|
|
| 200 | oklch(0.898 0.003 286.35) | #dddddf | hsl(240, 3%, 87%) |
|
|
| 300 | oklch(0.889 0.001 286.37) | #dadadb | hsl(240, 1%, 86%) |
|
|
| 400 | oklch(0.877 0.003 286.34) | #d6d6d8 | hsl(240, 2%, 84%) |
|
|
| 500 | oklch(0.864 0.003 286.34) | #d2d2d4 | hsl(240, 2%, 83%) |
|
|
| 600 | oklch(0.746 0.006 286.26) | #acacb0 | hsl(240, 2%, 68%) |
|
|
| 700 | oklch(0.622 0.007 286.18) | #86868b | hsl(240, 2%, 54%) |
|
|
| 800 | oklch(0.494 0.008 286.11) | #616166 | hsl(240, 3%, 39%) |
|
|
| 900 | oklch(0.361 0.005 286.14) | #3d3d40 | hsl(240, 2%, 25%) |
|
|
| 950 | oklch(0.214 0.002 286.23) | #19191a | hsl(240, 2%, 10%) |
|
| 50 | oklch(0.922 0.001 286.37) | #e5e5e6 | hsl(240, 2%, 90%) |
|
|
| 100 | oklch(0.919 0.001 286.37) | #e4e4e5 | hsl(240, 2%, 90%) |
|
|
| 200 | oklch(0.916 0.001 286.37) | #e3e3e4 | hsl(240, 2%, 89%) |
|
|
| 300 | oklch(0.916 0.001 286.37) | #e3e3e4 | hsl(240, 2%, 89%) |
|
|
| 400 | oklch(0.913 0.001 286.37) | #e2e2e3 | hsl(240, 2%, 89%) |
|
|
| 500 | oklch(0.910 0.001 286.37) | #e1e1e2 | hsl(240, 2%, 88%) |
|
|
| 600 | oklch(0.783 0.004 286.30) | #b8b8bb | hsl(240, 2%, 73%) |
|
|
| 700 | oklch(0.654 0.004 286.28) | #909093 | hsl(240, 1%, 57%) |
|
|
| 800 | oklch(0.518 0.005 286.24) | #68686b | hsl(240, 1%, 41%) |
|
|
| 900 | oklch(0.373 0.005 286.15) | #404043 | hsl(240, 2%, 26%) |
|
|
| 950 | oklch(0.214 0.002 286.23) | #19191a | hsl(240, 2%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection
