Cerulean is a soothing sky blue with a calm, cool tone. Nestled between blue and green on the color wheel, it evokes the serene beauty of ocean blue. Closely related shades include azure and teal. Use cerulean to bring tranquility to designs, perfect for creating refreshing and airy spaces.
Cerulean is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #007BA7
- RGB value: 0.0% red, 48.2% green, 65.5% 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 cerulean, consider:
- Sky Blue (#82C8E5): Sky Blue offers a light and breezy demeanor similar to Cerulean, blending hints of blue and white to capture the openness of a clear sky.
- Powder Blue (#B8E3E9): With a soft, muted tone, Powder Blue shares Cerulean's tranquil and refreshing qualities, echoing the gentleness of a cloudless day.
- Aqua (#00FFF0): Aqua brings a vivid touch, similar to Cerulean's lively nature, featuring a blend of blue and green that mirrors the clarity of turquoise waters.
- Turquoise (#40E0D0): Turquoise presents a dynamic and vibrant variation, reminiscent of Cerulean's spirited energy, with a harmonious mix of blue and green tones that evoke oceanic freshness.
To complement Cerulean, consider pairing it with:
- Burnt Orange (#BE5103): Provides a striking contrast to Cerulean’s calm ocean blue, creating a dynamic and warm color palette.
- Mustard Yellow (#FFCE1B): Offers a bold, sunny contrast that highlights Cerulean’s refreshing cool tone.
- Coral (#FF8559): Enhances Cerulean's blue hue with its vibrant, warm undertones, creating a lively and energetic appeal.
- Peach (#FFD3AC): Softens Cerulean’s intensity, offering a gentle, pastel contrast that evokes a serene, balanced aesthetic.
While Cerulean is known for its cool tone and soothing presence, it may clash with:
- Crimson Red (#B22222): With its deep and bold hue, crimson red creates a jarring contrast against cerulean’s calm, cool essence, leading to an uneasy pairing.
- Vermilion (#E73121): This fiery shade holds a striking warmth that competes with cerulean’s relaxed vibe, causing an intense visual conflict.
- Neon Orange (#FF5C00): The vibrant, attention-grabbing nature of neon orange may overshadow cerulean, resulting in a discordant color palette.
- Hot Pink (#FF46A2): Hot pink’s vivid and energetic hue can overwhelm the tranquil presence of cerulean, disrupting the harmony of the combination.
- Yellow-Orange (#FFB343): The warmth and brightness of yellow-orange clash with cerulean’s cool tone, creating a stark contrast that can feel unsettling.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Aqua Voyage
Copper Tides
Arctic Voyage
Contrast checker
Contrast 4.78
- Large Text
#007BA7
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Fail | |
Pass | Pass | |
Pass | Pass |
Contrast 4.39
- Large Text
#007BA7
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Pass | Fail | |
Pass | Fail |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #007BA7, known as Cerulean, has RGB values of R:0, G:123, B:167 and CMYK values of C:100, M:26, Y:0, K:35.
| VALUE | CSS | |
|---|---|---|
| HEX | #007BA7 | #007BA7 |
| RGB DECIMAL | 0, 123, 167 | RGB(0,123,167) |
| RGB PERCENTAGE | 0.0, 48.2, 65.5 | RGB(0.0%,48.2%,65.5%) |
| CMYK | 100, 26, 0, 35 | |
| HSL | HSL(195.8, 100.0%, 32.7%) | HSL(195.8, 100.0%, 32.7%) |
| HSV (OR HSB) | 195.8°, 100.0, 65.5 | |
| WEB SAFE | #0102153 | #0102153 |
| BINARY | 00000000, 01111011, 10100111 | |
| iOS - SwiftUI | Color(red: 0.000, green: 0.482, blue: 0.655) | |
| iOS - UIKit | UIColor(red: 0.000, green: 0.482, blue: 0.655, alpha: 1) | |
| Android - Compose | Color(0xFF007BA7) |
