Cadet Blue
HEX: #5F9EA0 | Modern Palette
Color Specifications
#5F9EA0
95, 158, 160
181°, 40% ,62%
40.63, 1.25, 0, 37.25
About Cadet Blue
Cadet Blue (#5F9EA0) is a color with RGB(95, 158, 160) and HSL(181.85°, 40.63%, 62.75%). It is commonly associated with Calm moods. In design, it fits Cool styles and is suitable for Text, Logo, Print. Its complementary color is #A0615F, which creates strong contrast. Its triadic palette includes #A05F9E and #9EA05F. The name comes from Cadet Blue (English).
- HEX: #5F9EA0
- RGB: 95, 158, 160
- HSL: 181.85°, 40.63%, 62.75%
- Mood: Calm
- Style: Cool
- Use case: Text, Logo, Print
- Complementary color: #A0615F
- Triadic colors: #A05F9E, #9EA05F
- The name comes from Cadet Blue (English).
Live Components
Color Palettes
Cadet Blue #5F9EA0 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
Cadet Blue #5F9EA0 pairs with #A0615F as its complementary color, and #A05F9E and #9EA05F in triadic combinations. These harmony relationships help create balanced color combinations for UI, branding, and design work.
Frequently Asked Questions
Name, History & Etymology
History
The color 'Cadet Blue' was first recorded as a color name in English in 1887. Its name likely derives from the color of uniforms worn by military cadets, particularly in naval academies or military schools. The specific shade is a medium tone of blue-green or cyan, often described as a grayish-blue or a pale teal. It gained popularity in various contexts beyond uniforms, including interior design and fashion, for its calming and sophisticated qualities.
First Recorded Use
1887
Cultural Associations
Cadet Blue is often associated with professionalism, discipline, and a sense of calm. Due to its military origins, it can evoke feelings of order and tradition. In modern contexts, it is seen as a versatile and gender-neutral color, often used in corporate branding, home decor, and apparel for its understated elegance.
Code Snippets
/* Background */
.element {
background-color: #5F9EA0;
}
/* Text */
.element {
color: #5F9EA0;
}
/* Border */
.element {
border: 1px solid #5F9EA0;
}
/* Linear gradient to complementary */
.element {
background: linear-gradient(
to right,
#5F9EA0,
#C77C79
);
}
/* Radial gradient */
.element {
background: radial-gradient(
circle,
#5F9EA0,
#C77C79
);
}
// SCSS variable
$cadet-blue: #5F9EA0;
// With RGB channels (useful for rgba() usage)
$cadet-blue-r: 95;
$cadet-blue-g: 158;
$cadet-blue-b: 160;
// Usage
.element {
background-color: $cadet-blue;
color: rgba($cadet-blue-r, $cadet-blue-g, $cadet-blue-b, 0.8);
}