Use this color
Create with Carbon Black
Open a professional color tool with #0C0C0C already applied. Each configuration stays canonical to the tool and can be adjusted or shared.
CSS Utilities
--color-carbon-black: #0C0C0C;
.bg-carbon-black { background-color: #0C0C0C; }
.text-carbon-black { color: #0C0C0C; }Color meaning and use
About Carbon Black Color
Carbon Black uses HEX #0C0C0C, RGB 12, 12, 12, and HSL 0°, 0%, 5%. The dataset classifies it in the gray family with neutral temperature and dark visual character.
No separate named-color neighbor is recorded for this entry. Its relative luminance is 0.0037; black contrast is 1.07:1 and white contrast is 19.55:1, making white the stronger of those two standard foreground choices.
WCAG Accessibility
Contrast checks for Carbon Black against black and white text.
Downloadable color reference infographic
Carbon Black Color Reference Infographic
Save a high-resolution infographic of Carbon Black, including its color values, coordinated palette, and black and white text contrast.

Color Harmonies
Variants
Pairings
Machine-readable data
Machine-Readable Color Data (JSON)
Perfect for CSS, design systems, automation, and AI ingestion.
hexCanonical HEX valuergbRed, green, blue channelshslHue, saturation, lightnesscmykApproximate print conversionwcagAA and AAA contrast optionsharmoniesMathematical harmony setsvariantsGenerated tone variantsnearestColorsKnowledge graph neighborsStructured sections
Color systems
{
"hex": "#0C0C0C",
"rgb": [
12,
12,
12
],
"hsl": [
0,
0,
5
],
"cmyk": [
0,
0,
0,
95
],
"luminance": 0.0037,
"contrast": {
"black": 1.07,
"white": 19.55
}
}WCAG
{
"AA": [
"#FFFFFF",
"#F5F5F5"
],
"AAA": [
"#FFFFFF",
"#F5F5F5"
]
}Harmonies
{
"complementary": "#0D0D0D",
"analogous": [
"#0D0D0D",
"#0D0D0D"
],
"triadic": [
"#0D0D0D",
"#0D0D0D"
],
"tetradic": [
"#0D0D0D",
"#0D0D0D",
"#0D0D0D"
],
"splitComplementary": [
"#0D0D0D",
"#0D0D0D"
],
"monochromatic": [
"#3B3B3B",
"#0C0C0C",
"#000000"
]
}Variants
{
"light": "#3B3B3B",
"dark": "#000000",
"saturated": "#100A0A",
"desaturated": "#0D0D0D",
"pastel": "#4D4D4D",
"neon": "#420000"
}Pairings
{
"best": [
"#FFFFFF",
"#0D0D0D",
"#0D0D0D",
"#0D0D0D"
],
"avoid": [
"#0D0D0D",
"#3B3B3B"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#3B3B3B",
"#0D0D0D"
]
}Knowledge graph
{
"nearestColors": [
"black",
"matte-black",
"carbon-fiber",
"raisin",
"rubber"
],
"generatedPalettes": [
"carbon-black"
],
"generatedComparisons": [
"black-vs-carbon-black",
"carbon-black-vs-matte-black"
],
"relatedFamilies": [
"/colors/by-family/gray",
"/colors/by-temperature/neutral",
"/colors/by-tone/dark"
],
"relatedTools": [
"/harmonies/carbon-black",
"/wcag/carbon-black",
"/css/colors/carbon-black",
"/hex/0c0c0c",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/gray",
"/colors/by-temperature/neutral",
"/colors/by-tone/dark"
],
"narrower": [
"/palettes/carbon-black"
],
"related": [
"/colors/black",
"/colors/matte-black",
"/colors/carbon-fiber",
"/colors/raisin",
"/colors/rubber",
"/compare/black-vs-carbon-black",
"/compare/carbon-black-vs-matte-black",
"/harmonies/carbon-black",
"/wcag/carbon-black",
"/css/colors/carbon-black",
"/hex/0c0c0c",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
}
}Full JSON dataset
{
"slug": "carbon-black",
"name": "Carbon Black",
"hex": "#0C0C0C",
"uses": [
"industrial design",
"safety systems",
"hardware palettes"
],
"psychology": {
"associations": [
"utility",
"visibility",
"precision"
],
"contexts": [
"transportation",
"tools",
"hardware",
"signage"
],
"avoidIn": [
"soft wellness palettes"
]
},
"aliases": [],
"sourceType": "curated",
"confidence": "medium",
"reviewStatus": "manual",
"sourceUrl": "https://www.colorsencyclopedia.com/assets/colors.json",
"origin": {
"type": "common",
"notes": "Curated common color reference used in design, material, cultural, and editorial color systems."
},
"family": "gray",
"temperature": "neutral",
"tone": [
"dark"
],
"editorialNotes": "Curated internal color record with computed technical properties.",
"tags": [
"gray",
"neutral",
"dark",
"industrial-design",
"safety-systems",
"hardware-palettes",
"utility",
"visibility",
"precision"
],
"popularity": 84,
"rgb": [
12,
12,
12
],
"hsl": [
0,
0,
5
],
"cmyk": [
0,
0,
0,
95
],
"luminance": 0.0037,
"contrast": {
"black": 1.07,
"white": 19.55
},
"harmonies": {
"complementary": "#0D0D0D",
"analogous": [
"#0D0D0D",
"#0D0D0D"
],
"triadic": [
"#0D0D0D",
"#0D0D0D"
],
"tetradic": [
"#0D0D0D",
"#0D0D0D",
"#0D0D0D"
],
"splitComplementary": [
"#0D0D0D",
"#0D0D0D"
],
"monochromatic": [
"#3B3B3B",
"#0C0C0C",
"#000000"
]
},
"variants": {
"light": "#3B3B3B",
"dark": "#000000",
"saturated": "#100A0A",
"desaturated": "#0D0D0D",
"pastel": "#4D4D4D",
"neon": "#420000"
},
"wcag": {
"AA": [
"#FFFFFF",
"#F5F5F5"
],
"AAA": [
"#FFFFFF",
"#F5F5F5"
]
},
"css": {
"variable": "--color-carbon-black: #0C0C0C;",
"utility": ".bg-carbon-black { background-color: #0C0C0C; }",
"textUtility": ".text-carbon-black { color: #0C0C0C; }"
},
"nearestColors": [
"black",
"matte-black",
"carbon-fiber",
"raisin",
"rubber"
],
"generatedPalettes": [
"carbon-black"
],
"generatedComparisons": [
"black-vs-carbon-black",
"carbon-black-vs-matte-black"
],
"relatedFamilies": [
"/colors/by-family/gray",
"/colors/by-temperature/neutral",
"/colors/by-tone/dark"
],
"relatedTools": [
"/harmonies/carbon-black",
"/wcag/carbon-black",
"/css/colors/carbon-black",
"/hex/0c0c0c",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/gray",
"/colors/by-temperature/neutral",
"/colors/by-tone/dark"
],
"narrower": [
"/palettes/carbon-black"
],
"related": [
"/colors/black",
"/colors/matte-black",
"/colors/carbon-fiber",
"/colors/raisin",
"/colors/rubber",
"/compare/black-vs-carbon-black",
"/compare/carbon-black-vs-matte-black",
"/harmonies/carbon-black",
"/wcag/carbon-black",
"/css/colors/carbon-black",
"/hex/0c0c0c",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
},
"pairings": {
"best": [
"#FFFFFF",
"#0D0D0D",
"#0D0D0D",
"#0D0D0D"
],
"avoid": [
"#0D0D0D",
"#3B3B3B"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#3B3B3B",
"#0D0D0D"
]
}
}