Viridian
HEX: #40826D | Modern Palette
Color Specifications
#40826D
64, 130, 109
160°, 50% ,50%
50.77, 0, 16.15, 49.02
About Viridian
Viridian (#40826D) is a color with RGB(64, 130, 109) and HSL(160.91°, 50.77%, 50.98%). In design, it fits Cool styles and is suitable for Text, Button, Logo. Its complementary color is #824055, which creates strong contrast. Its triadic palette includes #6D4082 and #826D40. The name comes from viridis (Latin).
- HEX: #40826D
- RGB: 64, 130, 109
- HSL: 160.91°, 50.77%, 50.98%
- Style: Cool
- Use case: Text, Button, Logo
- Complementary color: #824055
- Triadic colors: #6D4082, #826D40
- The name comes from viridis (Latin).
Live Components
Color Palettes
Viridian #40826D 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
Viridian #40826D pairs with #824055 as its complementary color, and #6D4082 and #826D40 in triadic combinations. These harmony relationships help create balanced color combinations for UI, branding, and design work.
Frequently Asked Questions
Name, History & Etymology
History
Viridian is a hydrated chromium(III) oxide green pigment, known for its permanence and transparency. It quickly replaced the less stable emerald green in artists' palettes. Its chemical stability made it a valuable addition to painting and industrial applications. The pigment's rich, deep green was highly prized by Impressionist and Post-Impressionist painters.
First Recorded Use
The term 'viridian' as a specific pigment name emerged in the mid-19th century. It was first synthesized in 1838 by Pannetier and Binet in Paris.
Cultural Associations
In art, viridian is often associated with natural landscapes and foliage due to its vibrant green. Its use marked a shift towards more stable and reliable synthetic pigments in the 19th century. The color is sometimes seen as a sophisticated and deep green, distinct from more common greens.
Code Snippets
/* Background */
.element {
background-color: #40826D;
}
/* Text */
.element {
color: #40826D;
}
/* Border */
.element {
border: 1px solid #40826D;
}
/* Linear gradient to complementary */
.element {
background: linear-gradient(
to right,
#40826D,
#C1436B
);
}
/* Radial gradient */
.element {
background: radial-gradient(
circle,
#40826D,
#C1436B
);
}
// SCSS variable
$viridian: #40826D;
// With RGB channels (useful for rgba() usage)
$viridian-r: 64;
$viridian-g: 130;
$viridian-b: 109;
// Usage
.element {
background-color: $viridian;
color: rgba($viridian-r, $viridian-g, $viridian-b, 0.8);
}