Celeste

HEX: #B2FFFF | Modern Palette

On White
1.13:1
FAIL
On Black
18.64:1
PASS

Color Specifications

HEX
#B2FFFF
RGB
178, 255, 255
HSL
180°, 100% ,84%
CMYK
30, 0, 0, 0

About Celeste

Celeste (#B2FFFF) is a color with RGB(178, 255, 255) and HSL(180°, 100%, 84.9%). It is commonly associated with Playful moods. In design, it fits Neon, Cool styles and is suitable for Text, Button, Background. Its complementary color is #FFB2B2, which creates strong contrast. Its triadic palette includes #FFB2FF and #FFFFB2. The name comes from caelestis (Latin).

  • HEX: #B2FFFF
  • RGB: 178, 255, 255
  • HSL: 180°, 100%, 84.9%
  • Mood: Playful
  • Style: Neon, Cool
  • Use case: Text, Button, Background
  • Complementary color: #FFB2B2
  • Triadic colors: #FFB2FF, #FFFFB2
  • The name comes from caelestis (Latin).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.

Color Harmonies

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

Shades & Tints

A seamless scale of #B2FFFF from deepest shade to lightest tint.

Color Characteristics

Mood
Playful
Style
Neon Cool
Use case
Text Button Background

Accessibility Simulation

Deuteranopia #ECECFF
Protanopia #F8F8FF
Tritanopia #B2FFFF
Achromatopsia #F1F1F1

Frequently Asked Questions

Celeste (#B2FFFF) is a color with RGB(178, 255, 255) and HSL(180°, 100%, 84.9%).

#B2FFFF pairs strongly with #FFB2B2 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#B2FFFF is suitable for Text, Button, Background and works well with Neon, Cool styles.

#B2FFFF is commonly associated with Playful.

The name Celeste is linked to caelestis from Latin, meaning heavenly, divine.

Name, History & Etymology

Origin Word caelestis
Meaning heavenly, divine
Language Latin
First Recorded Use Medieval

History

The name Celeste derives from the Latin word 'caelestis', meaning 'heavenly' or 'of the sky'. It was often used in reference to the heavens or divine beings. As a given name, it has been used for centuries, particularly in Catholic cultures where it can be associated with the Virgin Mary, often referred to as 'Queen of Heaven'. It saw a resurgence in popularity in the 19th and 20th centuries in various Western countries. The color 'Celeste' (a pale sky blue) is also named after this concept.

First Recorded Use

As a given name, it gained popularity in the medieval period, particularly in Romance language speaking countries.

Cultural Associations

Celeste is a popular name in many Romance language countries (e.g., Italy, Spain, France, Portugal, and Latin America). It is also recognized and used in English-speaking countries. The name evokes images of the sky, heaven, and often has connotations of purity, serenity, and divinity. It is sometimes used as a surname as well. The color Celeste is a specific shade of light blue, often associated with the sky or the Italian national sports teams (e.g., cycling).

Similar Named Colors
Waterspout #A4F4F9 ΔE 2.96
Pale Blue #AFEEEE ΔE 3.80
Electric Blue #7DF9FF ΔE 5.56
Diamond #B9F2FF ΔE 7.02

Code Snippets

/* Background */
.element {
    background-color: #B2FFFF;
}

/* Text */
.element {
    color: #B2FFFF;
}

/* Border */
.element {
    border: 1px solid #B2FFFF;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #B2FFFF,
        #FFB2B2
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #B2FFFF,
        #FFB2B2
    );
}

// SCSS variable
$celeste: #B2FFFF;

// With RGB channels (useful for rgba() usage)
$celeste-r: 178;
$celeste-g: 255;
$celeste-b: 255;

// Usage
.element {
    background-color: $celeste;
    color: rgba($celeste-r, $celeste-g, $celeste-b, 0.8);
}