White Smoke

HEX: #F5F5F5 | Modern Palette

On White
1.09:1
FAIL
On Black
19.26:1
PASS

Color Specifications

HEX
#F5F5F5
RGB
245, 245, 245
HSL
0°, 0% ,96%
CMYK
0, 0, 0, 4

About White Smoke

White Smoke (#F5F5F5) is a color with RGB(245, 245, 245) and HSL(0°, 0%, 96.1%). It is commonly associated with Minimal moods. In design, it fits Monochrome, Pastel styles and is suitable for Text, Background, Print. Its complementary color is White Smoke (#F5F5F5), which creates strong contrast. Its triadic palette includes White Smoke (#F5F5F5) and White Smoke (#F5F5F5). The name comes from White Smoke (English).

  • HEX: #F5F5F5
  • RGB: 245, 245, 245
  • HSL: 0°, 0%, 96.1%
  • Mood: Minimal
  • Style: Monochrome, Pastel
  • Use case: Text, Background, Print
  • Complementary color: White Smoke (#F5F5F5)
  • Triadic colors: White Smoke (#F5F5F5), White Smoke (#F5F5F5)
  • The name comes from White Smoke (English).

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 #F5F5F5 from deepest shade to lightest tint.

Color Characteristics

Mood
Minimal
Style
Monochrome Pastel
Use case
Text Background Print

Accessibility Simulation

Deuteranopia #F5F5F5
Protanopia #F5F5F5
Tritanopia #F5F5F5
Achromatopsia #F5F5F5

Frequently Asked Questions

White Smoke (#F5F5F5) is a color with RGB(245, 245, 245) and HSL(0°, 0%, 96.1%).

#F5F5F5 pairs strongly with White Smoke (#F5F5F5) as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#F5F5F5 is suitable for Text, Background, Print and works well with Monochrome, Pastel styles.

#F5F5F5 is commonly associated with Minimal.

The name White Smoke is linked to White Smoke from English, meaning A signal indicating a successful conclusion or decision, particularly in the context of a papal election..

Name, History & Etymology

Origin Word White Smoke
Meaning A signal indicating a successful conclusion or decision, particularly in the context of a papal election.
Language English
First Recorded Use 20th Century

History

The tradition of using smoke to signal the outcome of a papal election dates back centuries. Black smoke indicates that a pope has not yet been chosen, while white smoke signifies that a new pope has been elected. This practice became particularly prominent and widely reported in the modern era, leading to the phrase 'white smoke' entering common parlance as a metaphor for any definitive positive outcome or announcement after a period of deliberation or uncertainty.

First Recorded Use

The phrase gained widespread recognition and use following the practice of the Catholic Church during papal conclaves.

Cultural Associations

Beyond its literal meaning in the Vatican, 'white smoke' is now a widely understood idiom in Western cultures. It is frequently used in business, politics, and everyday conversation to announce that a long-awaited decision has been made, a deal has been struck, or a solution has been found. It carries connotations of finality, success, and the end of suspense.

Similar Named Colors
Munsell #F2F3F4 ΔE 0.77
White #FFFFFF ΔE 2.01
Isabelline #F4F0EC ΔE 2.61
Snow #FFFAFA ΔE 2.71

Code Snippets

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

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

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

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

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

// SCSS variable
$white-smoke: #F5F5F5;

// With RGB channels (useful for rgba() usage)
$white-smoke-r: 245;
$white-smoke-g: 245;
$white-smoke-b: 245;

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