#36454F
RGB(54, 69, 79)
#1E272E
#323E47
#36454F
#3D5361
#466474
#517889
#6C93A4
#9CB9C4
#C5D6DC
#E0EAED
#F3F7F8
Color Values
HEX
#36454F
RGB
rgb(54, 69, 79)
HSL
hsl(204°, 19%, 26%)
CMYK
32%, 13%, 0%, 69%
HSV
204°, 32%, 31%
XYZ
5.06, 5.61, 8.21
Color Variations
Triadic Colors
#36454F
#4F3645
#454F36
Analogous Colors
#36454F
#36394F
#364F4D
Monochromatic Colors
#171D22
#212B31
#2C3840
#36454F
CSS Examples
Charcoal Gradient
.charcoal-gradient {
background: linear-gradient(
135deg,
#36454f,
#466474 50%,
#36454f
);
box-shadow:
inset 0 2px 4px rgba(255,255,255,0.1),
inset 0 -2px 4px rgba(0,0,0,0.2);
border-radius: 8px;
}Charcoal Paper
.charcoal-paper {
background-color: #36454f;
background-image:
url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23466474' fill-opacity='0.4'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
}Charcoal Button
.charcoal-button {
background: #36454f;
color: #f3f7f8;
border: 1px solid #517889;
text-transform: uppercase;
letter-spacing: 1.5px;
transition: all 0.3s ease;
&:hover {
background: #3d5361;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
}Charcoal Card
.charcoal-card {
background: #36454f;
border-radius: 12px;
border: 1px solid #466474;
box-shadow:
0 8px 16px rgba(0,0,0,0.2),
inset 0 1px 0 rgba(255,255,255,0.1);
backdrop-filter: blur(8px);
transition: transform 0.3s ease;
}Charcoal Pattern
.charcoal-pattern {
background:
linear-gradient(45deg, transparent 48%, #466474 49%, #466474 51%, transparent 52%),
linear-gradient(-45deg, transparent 48%, #466474 49%, #466474 51%, transparent 52%);
background-color: #36454f;
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}About Charcoal Gray
Charcoal Gray is a deep, neutral shade that resembles the residue left by burning wood or coal. It's a versatile color that bridges the gap between pure black and medium grays, offering a sophisticated and professional appearance.
Color Characteristics
- Located on the darker end of the gray spectrum
- Contains subtle blue undertones
- Less harsh than pure black
- Excellent for reducing eye strain
Design Applications
Charcoal Gray excels in:
- Professional UI/UX design
- Corporate branding
- Typography and text
- Background elements
- Digital interfaces
Color Combinations
Charcoal Gray pairs well with:
- Cream (#FDFBD4) for soft contrast
- Cherry red (#FF1A1A) for vibrant accents
- Sky blue (#87CEEB) for calming effects
- Pale gold (#E6BE8A) for elegance
- Mint green (#ADEBB3) for freshness
Usage Tips
- Perfect alternative to black for text
- Creates depth in layered designs
- Excellent for professional applications
- Works well in dark mode interfaces
- Ideal for creating subtle contrast
Accessibility Considerations
When using Charcoal Gray in UI design, ensure sufficient contrast with text colors to meet WCAG guidelines. It works particularly well as a background color, offering better readability than pure black while maintaining professional aesthetics.
