Rufous
HEX: #A81C07 | Modern Palette
Color Specifications
#A81C07
168, 28, 7
7°, 92% ,34%
0, 83, 96, 34
About Rufous
Rufous (#A81C07) is a color with RGB(168, 28, 7) and HSL(7.8°, 92%, 34.3%). It is commonly associated with Bold moods. In design, it fits Vivid, Warm styles and is suitable for Text, Button, Accent. Its complementary color is #0793A8, which creates strong contrast. Its triadic palette includes #07A81C and #1C07A8. The name comes from rūfus (Latin).
- HEX: #A81C07
- RGB: 168, 28, 7
- HSL: 7.8°, 92%, 34.3%
- Mood: Bold
- Style: Vivid, Warm
- Use case: Text, Button, Accent
- Complementary color: #0793A8
- Triadic colors: #07A81C, #1C07A8
- The name comes from rūfus (Latin).
Live Components
Color Palettes
Rufous #A81C07 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
Rufous #A81C07 pairs with #0793A8 as its complementary color, and #07A81C and #1C07A8 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 word 'rufous' entered English from the Latin 'rūfus'. It was primarily used in scientific and descriptive contexts, particularly in ornithology and zoology, to describe the reddish-brown or rusty coloration of animals. Its use became more common as natural history studies advanced, requiring precise terminology for color descriptions. It is a direct descendant of the Latin term without significant intermediate linguistic changes in its core meaning.
First Recorded Use
late 14th century
Cultural Associations
While 'rufous' is a descriptive term, it doesn't carry significant cultural connotations beyond its literal meaning of color. It is widely recognized within scientific communities, especially among birdwatchers and naturalists, as a specific shade of reddish-brown. It is less common in everyday speech compared to 'red' or 'brown'.
Code Snippets
/* Background */
.element {
background-color: #A81C07;
}
/* Text */
.element {
color: #A81C07;
}
/* Border */
.element {
border: 1px solid #A81C07;
}
/* Linear gradient to complementary */
.element {
background: linear-gradient(
to right,
#A81C07,
#0793A8
);
}
/* Radial gradient */
.element {
background: radial-gradient(
circle,
#A81C07,
#0793A8
);
}
// SCSS variable
$rufous: #A81C07;
// With RGB channels (useful for rgba() usage)
$rufous-r: 168;
$rufous-g: 28;
$rufous-b: 7;
// Usage
.element {
background-color: $rufous;
color: rgba($rufous-r, $rufous-g, $rufous-b, 0.8);
}