Celeste is a calming, light blue shade that echoes the serene vibe of a clear sky. On the color wheel, it floats between blue and green. Related to pastel blue and sky blue, celeste adds a gentle atmosphere to designs. It’s perfect for creating a refreshing and airy feel.
Celeste is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #B2FFFF
- RGB value: 69.8% red, 100.0% green, 100.0% 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 celeste, consider:
- Sky Blue (#82c8e5): Sky Blue offers a light and airy feel, similar to Celeste, with its subtle hint of blue that evokes the expansive sky above—a natural choice for a tranquil, calm atmosphere.
- Light Blue (#90d5ff): Light Blue captures a gentle, serene essence with its soft, soothing hue. Like Celeste, it radiates calmness and an ethereal quality that can enhance any peaceful setting.
- Powder Blue (#b8e3e9): Powder Blue resembles Celeste with its delicate pastel tone and airy presence, perfect for adding a whisper of tranquility to any space, akin to an early morning sky.
- Pastel Blue (#b3ebf2): Pastel Blue shares a soft, muted quality with Celeste. Its gentle shade hints at both freshness and peace, evoking a serene ambiance perfect for subtle and calming color palettes.
To complement Celeste, consider pairing it with:
- Coral (#FF8559): This warm hue balances Celeste's cool tone, adding vibrancy and energy without overwhelming the delicate tranquility of the base color.
- Rose Gold (#DEA193): With its subtle metallic sheen, rose gold provides a sophisticated and warm contrast to Celeste’s refreshing tint, creating a balanced and elegant palette.
- Misty Blue (#B5C7EB): A perfect partner for Celeste, misty blue enhances the airy, serene qualities of a color celeste turquesa, adding depth while maintaining a gentle blue harmony.
- Peach (#FFD3AC): This soft and warm hue complements Celeste's cool undertone by introducing a touch of warmth, offering a cozy yet refreshing combination.
- Soft Pink (#E89EB8): Soft pink’s gentle pastel hue aligns beautifully with Celeste’s tranquil color, adding a subtle and harmonious contrast for a serene look.
While Celeste is a subtle turquoise, it may clash with:
- Forest Green (#2E6F40): Its earthy depth battles Celeste's airy presence, creating an unbalanced pairing.
- Red-Brown (#942222): Red-brown’s muted warmth and Celeste’s cool vibes conflict, leading to visual disharmony.
- Burnt Orange (#BE5103): The fiery intensity of burnt orange competes fiercely with Celeste’s tranquil tone.
- Royal Blue (#305CDE): Royal blue's regal richness overpowers Celeste’s understated soft hue.
- Neon Pink (#FF13F0): Its high-voltage vibrancy overwhelms Celeste’s gentle and calming shade.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Tropical Mist
Cotton Candy
Frosted Melon
Contrast checker
Contrast 1.13
- Large Text
#B2FFFF
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 18.64
- Large Text
#B2FFFF
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #B2FFFF, known as Celeste, has RGB values of R:178, G:255, B:255 and CMYK values of C:30, M:0, Y:0, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #B2FFFF | #B2FFFF |
| RGB DECIMAL | 178, 255, 255 | RGB(178,255,255) |
| RGB PERCENTAGE | 69.8, 100.0, 100.0 | RGB(69.8%,100.0%,100.0%) |
| CMYK | 30, 0, 0, 0 | |
| HSL | HSL(180.0, 100.0%, 84.9%) | HSL(180.0, 100.0%, 84.9%) |
| HSV (OR HSB) | 180.0°, 30.2, 100.0 | |
| WEB SAFE | #153255255 | #153255255 |
| BINARY | 10110010, 11111111, 11111111 | |
| iOS - SwiftUI | Color(red: 0.698, green: 1.000, blue: 1.000) | |
| iOS - UIKit | UIColor(red: 0.698, green: 1.000, blue: 1.000, alpha: 1) | |
| Android - Compose | Color(0xFFB2FFFF) |
