Blue Gray
HEX: #6699CC | Modern Palette
Color Specifications
#6699CC
102, 153, 204
210°, 50% ,80%
50, 25, 0, 20
About Blue Gray
Blue Gray (#6699CC) is a color with RGB(102, 153, 204) and HSL(210°, 50%, 80%). In design, it fits Cool styles and is suitable for Text, Button, Background. Its complementary color is Brown Yellow (#CC9966), which creates strong contrast. Its triadic palette includes #CC6699 and #99CC66. The name comes from Blue Gray (English).
- HEX: #6699CC
- RGB: 102, 153, 204
- HSL: 210°, 50%, 80%
- Style: Cool
- Use case: Text, Button, Background
- Complementary color: Brown Yellow (#CC9966)
- Triadic colors: #CC6699, #99CC66
- The name comes from Blue Gray (English).
Live Components
Color Palettes
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 #6699CC from deepest shade to lightest tint.
Color Characteristics
Accessibility Simulation
#8D8DCD
#9494CC
#57A1A1
#959595
Frequently Asked Questions
Name, History & Etymology
History
The concept of 'blue-gray' as a distinct color has been present in human perception for millennia, observed in natural elements like stormy skies, certain minerals (e.g., slate, some types of granite), and animal fur/feathers. As a named color, its usage became more formalized with the development of color systems and the increasing precision of language. In art, it's a fundamental shade for depicting skies, water, and shadows. In fashion and interior design, it gained significant popularity in the 20th and 21st centuries for its versatility and calming effect, often associated with sophistication and modernity. The specific hex code #6699cc is a modern digital representation of one particular shade within the broader 'blue-gray' spectrum.
First Recorded Use
The specific compound 'blue-gray' as a color descriptor likely emerged as English color vocabulary became more nuanced, allowing for the combination of primary and secondary color terms with modifiers like 'gray' to describe intermediate hues. While 'blue' and 'gray' have ancient origins, their combination to precisely describe this specific shade became more common in written records from the late 17th century onwards, particularly in descriptions of natural phenomena, textiles, and art.
Cultural Associations
Blue-gray often evokes feelings of calmness, serenity, and stability. It can also be associated with melancholy or introspection, particularly in its darker variations. In many cultures, blue is linked to the sky and sea, symbolizing peace, wisdom, and truth, while gray often represents neutrality, sophistication, or sometimes somberness. The combination creates a balanced color that is neither overtly warm nor cool, making it highly adaptable. It's frequently used in professional settings to convey trustworthiness and competence, and in homes to create a tranquil atmosphere. It's a common color for uniforms, particularly in naval contexts, due to its association with water and its practical ability to hide dirt.
Code Snippets
/* Background */
.element {
background-color: #6699CC;
}
/* Text */
.element {
color: #6699CC;
}
/* Border */
.element {
border: 1px solid #6699CC;
}/* Linear gradient to complementary */
.element {
background: linear-gradient(
to right,
#6699CC,
#E6CCB3
);
}
/* Radial gradient */
.element {
background: radial-gradient(
circle,
#6699CC,
#E6CCB3
);
}// SCSS variable
$blue-gray: #6699CC;
// With RGB channels (useful for rgba() usage)
$blue-gray-r: 102;
$blue-gray-g: 153;
$blue-gray-b: 204;
// Usage
.element {
background-color: $blue-gray;
color: rgba($blue-gray-r, $blue-gray-g, $blue-gray-b, 0.8);
}