Anthracite Grey Color
What Color is Anthracite Grey?
Anthracite grey is a dark and cool grey. It looks calm and modern like wet stones after rain. This color adds more aesthetics in the visual when there's bright color in the foreground.
| Format | Code | Image |
|---|---|---|
Hex | #3E3E3E |  |
RGB | 62, 62, 62 | |
HSL | 0, 0%, 24% | |
CMYK | 0%, 0%, 0%, 76% | |
OKLCH | oklch(0.364 0.000 263) |
Color Harmonies
Balanced color combinations based on color theory. Click to copy.
Analogous
Adjacent colors - harmony and unity
Monochromatic
Same hue, varied lightness - cohesive designs
Complementary
Opposite colors - high contrast
Split Complementary
Base + adjacent complements - balanced contrast
Triadic
Evenly spaced - vibrant palettes
Square
Four colors at 90° - bold combinations
Tetradic
Rectangle shape - rich variety
Compound
Analogous + complements - sophisticated
Accessibility & Contrast Checker
Ensure your color combinations meet WCAG accessibility standards for readability. Test text contrast against different backgrounds.
Sample Text
The quick brown fox jumps over the lazy dog.
Sample Text
The quick brown fox jumps over the lazy dog.
Sample Text
The quick brown fox jumps over the lazy dog.
Sample Text
The quick brown fox jumps over the lazy dog.
Sample Text
The quick brown fox jumps over the lazy dog.
WCAG Guidelines: AA requires 4.5:1 for normal text, 3:1 for large text. AAA requires 7:1 for normal text, 4.5:1 for large text. Large text is 18pt+ or 14pt bold+.
Code Snippets
Ready-to-use code snippets for CSS, SCSS, Tailwind, and more. Click to copy.
/* Anthracite Grey Color */
:root {
--color-anthracite-grey-color: #3E3E3E;
--color-anthracite-grey-color-rgb: 62, 62, 62;
}
.element {
background-color: var(--color-anthracite-grey-color);
color: rgba(var(--color-anthracite-grey-color-rgb), 0.8);
}// Anthracite Grey Color Variables
$anthracite-grey-color: #3E3E3E;
$anthracite-grey-color-rgb: 62, 62, 62;
// Usage
.element {
background-color: $anthracite-grey-color;
border-color: darken($anthracite-grey-color, 10%);
box-shadow: 0 4px 6px rgba($anthracite-grey-color-rgb, 0.2);
}// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'anthracite-grey-color': '#3E3E3E',
'anthracite-grey-color-light': '#636363',
'anthracite-grey-color-dark': '#171717',
},
},
},
}{
"name": "Anthracite Grey Color",
"hex": "#3E3E3E",
"rgb": {
"r": 62,
"g": 62,
"b": 62
},
"hsl": {
"h": 0,
"s": 0,
"l": 24
}
}Visual Usage Examples
See how Anthracite Grey Color looks in real-world design applications.
Heading Text
This is how body text appears on this background color. Good contrast is essential for readability.