Gray (X11 Gray)
HEX: #BEBEBE | Modern Palette
Color Specifications
#BEBEBE
190, 190, 190
0°, 0% ,74%
0, 0, 0, 25.49
About Gray (X11 Gray)
Gray (X11 Gray) (#BEBEBE) is a color with RGB(190, 190, 190) and HSL(0°, 0%, 74.51%). It is commonly associated with Minimal moods. In design, it fits Monochrome, Pastel styles and is suitable for Text, Background, Border. Its complementary color is Gray (X11 Gray) (#BEBEBE), which creates strong contrast. Its triadic palette includes Gray (X11 Gray) (#BEBEBE) and Gray (X11 Gray) (#BEBEBE). The name comes from Gray (English).
- HEX: #BEBEBE
- RGB: 190, 190, 190
- HSL: 0°, 0%, 74.51%
- Mood: Minimal
- Style: Monochrome, Pastel
- Use case: Text, Background, Border
- Complementary color: Gray (X11 Gray) (#BEBEBE)
- Triadic colors: Gray (X11 Gray) (#BEBEBE), Gray (X11 Gray) (#BEBEBE)
- The name comes from Gray (English).
Live Components
Color Palettes
Gray (X11 Gray) #BEBEBE is used in Monochromatic, Neutral + Accent, Analogous, 3 + 1 + 1 palettes, giving designers ready-made combinations for backgrounds, surfaces, accents, and interface elements.
Color Harmonies
Gray (X11 Gray) #BEBEBE pairs with Gray (X11 Gray) (#BEBEBE) as its complementary color, and Gray (X11 Gray) (#BEBEBE) and Gray (X11 Gray) (#BEBEBE) in triadic combinations. These harmony relationships help create balanced color combinations for UI, branding, and design work.
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
The shade and tint range for Gray (X11 Gray) #BEBEBE moves from dark #0D0D0D tones through the base color to lighter #F2F2F2 tones, making it useful for depth, hierarchy, and background variation.
Color Characteristics
Accessibility Simulation
#BEBEBE
#BEBEBE
#BEBEBE
#BEBEBE
Frequently Asked Questions
Name, History & Etymology
History
The word 'gray' (or 'grey') has ancient Germanic roots, tracing back to Old English 'grǣġ'. It has consistently been used to describe the achromatic color between black and white. The specific 'X11 Gray' refers to a particular shade of gray defined within the X11 color naming system, which is a standard set of color names used in computer graphics, particularly with the X Window System. The hexadecimal code #bebebe represents a specific intensity of red, green, and blue light, resulting in this particular shade of gray.
First Recorded Use
Before 12th Century
Cultural Associations
Gray is often associated with neutrality, balance, sophistication, and formality. It can also evoke feelings of melancholy, modesty, or industrialism. In fashion, it's considered a versatile and classic color. In computing, the X11 color names, including 'Gray', were established for consistency across different display systems and applications, becoming a de facto standard for many years.
Code Snippets
/* Background */
.element {
background-color: #BEBEBE;
}
/* Text */
.element {
color: #BEBEBE;
}
/* Border */
.element {
border: 1px solid #BEBEBE;
}/* Linear gradient to complementary */
.element {
background: linear-gradient(
to right,
#BEBEBE,
#BEBEBE
);
}
/* Radial gradient */
.element {
background: radial-gradient(
circle,
#BEBEBE,
#BEBEBE
);
}// SCSS variable
$gray-(x11-gray): #BEBEBE;
// With RGB channels (useful for rgba() usage)
$gray-(x11-gray)-r: 190;
$gray-(x11-gray)-g: 190;
$gray-(x11-gray)-b: 190;
// Usage
.element {
background-color: $gray-(x11-gray);
color: rgba($gray-(x11-gray)-r, $gray-(x11-gray)-g, $gray-(x11-gray)-b, 0.8);
}