Colors EncyclopediaUse this color
Create with Jet
Open a professional color tool with #343434 already applied. Each configuration stays canonical to the tool and can be adjusted or shared.
Generate palette & CSS variablesCreate 50–950 tokens and export CSS, SCSS, JSON, or Tailwind.Open configured tool →Open in Gradient StudioStart with Jet and its complementary color.Open configured tool →Mix this colorBlend it with a complementary color and copy color-mix() CSS.Open configured tool →Check contrastOpen the strongest black or white background pairing.Open configured tool →Accessible combinationsReview AA and AAA text options, alternatives, warnings, and UI guidance.Open configured tool →Create glass surfaceUse this color as the tint for a translucent UI panel.Open configured tool →
CSS Utilities
--color-jet: #343434;
.bg-jet { background-color: #343434; }
.text-jet { color: #343434; }Color meaning and use
About Jet Color
Jet uses HEX #343434, RGB 52, 52, 52, and HSL 0°, 0%, 20%. 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.0343; black contrast is 1.69:1 and white contrast is 12.46:1, making white the stronger of those two standard foreground choices.
WCAG Accessibility
Contrast checks for Jet against black and white text.
Black text1.69:1AA Fail
White text12.46:1AA Pass
Downloadable color reference infographic
Jet Color Reference Infographic
Save a high-resolution infographic of Jet, 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.
Luminance0.0343
Black text1.69:1AA Fail
White text12.46:1AA Pass
hexCanonical HEX valuergbRed, green, blue channelshslHue, saturation, lightnesscmykApproximate print conversionwcagAA and AAA contrast optionsharmoniesMathematical harmony setsvariantsGenerated tone variantsnearestColorsKnowledge graph neighborsStructured sections
Color systems
{
"hex": "#343434",
"rgb": [
52,
52,
52
],
"hsl": [
0,
0,
20
],
"cmyk": [
0,
0,
0,
80
],
"luminance": 0.0343,
"contrast": {
"black": 1.69,
"white": 12.46
}
}WCAG
{
"AA": [
"#FFFFFF",
"#F5F5F5"
],
"AAA": [
"#FFFFFF",
"#F5F5F5"
]
}Harmonies
{
"complementary": "#333333",
"analogous": [
"#333333",
"#333333"
],
"triadic": [
"#333333",
"#333333"
],
"tetradic": [
"#333333",
"#333333",
"#333333"
],
"splitComplementary": [
"#333333",
"#333333"
],
"monochromatic": [
"#616161",
"#343434",
"#050505"
]
}Variants
{
"light": "#616161",
"dark": "#050505",
"saturated": "#3E2828",
"desaturated": "#333333",
"pastel": "#737373",
"neon": "#8F0000"
}Pairings
{
"best": [
"#FFFFFF",
"#333333",
"#333333",
"#333333"
],
"avoid": [
"#333333",
"#616161"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#616161",
"#333333"
]
}Knowledge graph
{
"nearestColors": [
"onyx",
"graphite",
"peat",
"gunmetal",
"charcoal-blue"
],
"generatedPalettes": [
"jet"
],
"generatedComparisons": [
"charcoal-blue-vs-jet",
"graphite-vs-jet",
"gunmetal-vs-jet",
"jet-vs-onyx",
"peat-vs-jet"
],
"relatedFamilies": [
"/colors/by-family/gray",
"/colors/by-temperature/neutral",
"/colors/by-tone/dark"
],
"relatedTools": [
"/harmonies/jet",
"/wcag/jet",
"/css/colors/jet",
"/hex/343434",
"/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/jet"
],
"related": [
"/colors/onyx",
"/colors/graphite",
"/colors/peat",
"/colors/gunmetal",
"/colors/charcoal-blue",
"/compare/charcoal-blue-vs-jet",
"/compare/graphite-vs-jet",
"/compare/gunmetal-vs-jet",
"/compare/jet-vs-onyx",
"/compare/peat-vs-jet",
"/harmonies/jet",
"/wcag/jet",
"/css/colors/jet",
"/hex/343434",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
}
}Full JSON dataset
{
"slug": "jet",
"name": "Jet",
"hex": "#343434",
"uses": [
"backgrounds",
"typography",
"product surfaces"
],
"psychology": {
"associations": [
"restraint",
"clarity",
"balance"
],
"contexts": [
"interfaces",
"architecture",
"editorial design",
"packaging"
],
"avoidIn": [
"high-energy accent-only 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 and editorial color systems."
},
"family": "gray",
"temperature": "neutral",
"tone": [
"dark"
],
"editorialNotes": "Curated internal color record with computed technical properties.",
"tags": [
"gray",
"neutral",
"dark",
"backgrounds",
"typography",
"product-surfaces",
"restraint",
"clarity",
"balance"
],
"popularity": 84,
"rgb": [
52,
52,
52
],
"hsl": [
0,
0,
20
],
"cmyk": [
0,
0,
0,
80
],
"luminance": 0.0343,
"contrast": {
"black": 1.69,
"white": 12.46
},
"harmonies": {
"complementary": "#333333",
"analogous": [
"#333333",
"#333333"
],
"triadic": [
"#333333",
"#333333"
],
"tetradic": [
"#333333",
"#333333",
"#333333"
],
"splitComplementary": [
"#333333",
"#333333"
],
"monochromatic": [
"#616161",
"#343434",
"#050505"
]
},
"variants": {
"light": "#616161",
"dark": "#050505",
"saturated": "#3E2828",
"desaturated": "#333333",
"pastel": "#737373",
"neon": "#8F0000"
},
"wcag": {
"AA": [
"#FFFFFF",
"#F5F5F5"
],
"AAA": [
"#FFFFFF",
"#F5F5F5"
]
},
"css": {
"variable": "--color-jet: #343434;",
"utility": ".bg-jet { background-color: #343434; }",
"textUtility": ".text-jet { color: #343434; }"
},
"nearestColors": [
"onyx",
"graphite",
"peat",
"gunmetal",
"charcoal-blue"
],
"generatedPalettes": [
"jet"
],
"generatedComparisons": [
"charcoal-blue-vs-jet",
"graphite-vs-jet",
"gunmetal-vs-jet",
"jet-vs-onyx",
"peat-vs-jet"
],
"relatedFamilies": [
"/colors/by-family/gray",
"/colors/by-temperature/neutral",
"/colors/by-tone/dark"
],
"relatedTools": [
"/harmonies/jet",
"/wcag/jet",
"/css/colors/jet",
"/hex/343434",
"/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/jet"
],
"related": [
"/colors/onyx",
"/colors/graphite",
"/colors/peat",
"/colors/gunmetal",
"/colors/charcoal-blue",
"/compare/charcoal-blue-vs-jet",
"/compare/graphite-vs-jet",
"/compare/gunmetal-vs-jet",
"/compare/jet-vs-onyx",
"/compare/peat-vs-jet",
"/harmonies/jet",
"/wcag/jet",
"/css/colors/jet",
"/hex/343434",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
},
"pairings": {
"best": [
"#FFFFFF",
"#333333",
"#333333",
"#333333"
],
"avoid": [
"#333333",
"#616161"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#616161",
"#333333"
]
}
}