Serenity is a calming, soft blue with a hint of gray. It sits between blue and gray on the color wheel, evoking peace and relaxation. Related shades include powder blue and periwinkle. Perfect for designs aiming to create a tranquil, soothing atmosphere.
Serenity is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #B3CEE5
- RGB value: 70.2% red, 80.8% green, 89.8% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines
For variations within the same spectrum as Serenity, consider:
- misty blue (#b5c7eb): This color offers a soft, tranquil vibe with a slightly gray undertone, echoing the peaceful essence of serenity.
- sky blue (#82c8e5): Evoking open skies, this light, airy shade provides a calming effect similar to serenity’s tranquil allure.
- powder blue (#b8e3e9): A gentle, light tone with a hint of brightness that mirrors serenity’s soothing and peaceful qualities.
- baby blue (#8fd9fb): With its soft, pastel hue, this color conveys the same gentle and soothing feeling as serenity, maintaining a sense of innocence and calm.
To complement Serenity, consider pairing it with:
- Teal (#069494): Teal's deep, oceanic tones bring out the serenity and calmness in Serenity, creating a refreshing and balanced palette.
- Mint Blue (#98fbcb): The lightness of mint blue mirrors the tranquility of Serenity, enhancing its calming effect while adding a subtle pop of color.
- Peacock Blue (#096c6c): Peacock blue introduces a rich, jewel-like intensity that contrasts with Serenity, offering depth and sophistication.
- Slate Gray (#6d8196): Slate gray provides a neutral, grounding base that complements Serenity's soothing vibe, allowing it to be the focal point.
- Lavender (#d3d3ff): The soft, delicate hue of lavender pairs beautifully with Serenity, adding a gentle, whimsical touch to the palette.
While Serenity is a calming and soothing shade, it may clash with:
- Neon Pink (#ff13f0): Its vibrant and electric tone overshadows Serenity’s tranquil vibe, creating a stark and jarring contrast.
- Neon Green (#2cff05): This intense brightness conflicts with the peaceful aura of Serenity, making the combination visually unsettling.
- Neon Orange (#ff5c00): The high saturation of neon orange disrupts Serenity’s subtlety, resulting in an overwhelming visual clash.
- Neon Blue (#2323ff): Like a loud firework at a quiet gathering, neon blue’s boldness breaks the soft harmony of Serenity.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Bliss Dusk
Bliss Murmur
Pastel Breeze
Contrast checker
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
1.63:1
WCAG 2.2 Simple Contrast
Normal Text
- Fail
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Fail
- AA
- 3:1
- Fail
- AAA
- 4.5:1
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
12.88:1
WCAG 2.2 Simple Contrast
Normal Text
- Pass
- AA
- 4.5:1
- Pass
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Pass
- AAA
- 4.5:1
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #B3CEE5, known as Serenity, has RGB values of R:179, G:206, B:229 and CMYK values of C:22, M:10, Y:0, K:10.
| VALUE | CSS | |
|---|---|---|
| HEX | #B3CEE5 | #B3CEE5 |
| RGB DECIMAL | 179, 206, 229 | RGB(179,206,229) |
| RGB PERCENTAGE | 70.2, 80.8, 89.8 | RGB(70.2%,80.8%,89.8%) |
| CMYK | 22, 10, 0, 10 | |
| HSL | HSL(207.6, 49.0%, 80.0%) | HSL(207.6, 49.0%, 80.0%) |
| HSV (OR HSB) | 207.6°, 21.8, 89.8 | |
| WEB SAFE | #204204204 | #204204204 |
| BINARY | 10110011, 11001110, 11100101 | |
| iOS - SwiftUI | Color(red: 0.702, green: 0.808, blue: 0.898) | |
| iOS - UIKit | UIColor(red: 0.702, green: 0.808, blue: 0.898, alpha: 1) | |
| Android - Compose | Color(0xFFB3CEE5) |
