Colors EncyclopediaNamed color
Jade
Jade color #00A86B: RGB 0, 168, 107 and HSL 158°, 100%, 33%. Explore its cool green profile, contrast, CSS, palettes and harmonies.
Use this color
Create with Jade
Open a professional color tool with #00A86B 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 Jade 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-jade: #00A86B;
.bg-jade { background-color: #00A86B; }
.text-jade { color: #00A86B; }Color history, meaning and use · Editorially reviewed
About Jade Color
Jade is not one uniform green. Museum collections show pale apple, blue-green, deep green, and nearly black material, with color only one part of an object’s significance. In ancient Mesoamerica, scarce jadeite and other greenstones were worked with demanding abrasion techniques and connected with water, young plants, fertility, permanence, and elite exchange.
A digital Jade can suggest polished stone and cultivated green without becoming as bright as emerald. It pairs naturally with cream, mineral gray, and warm metal colors. Designers should avoid treating the name as a universal sample: geology, translucency, surface polish, lighting, and cultural context all alter how physical jade is perceived.
The HEX value is an independent screen reference, not a gemological classification or a color standard for jade objects.
WCAG Accessibility
Contrast checks for Jade against black and white text.
Black text6.81:1AA Pass
White text3.08:1AA Fail
Downloadable color reference infographic
Jade Color Reference Infographic
Save a high-resolution infographic of Jade, 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.2907
Black text6.81:1AA Pass
White text3.08:1AA Fail
hexCanonical HEX valuergbRed, green, blue channelshslHue, saturation, lightnesscmykApproximate print conversionwcagAA and AAA contrast optionsharmoniesMathematical harmony setsvariantsGenerated tone variantsnearestColorsKnowledge graph neighborsStructured sections
Color systems
{
"hex": "#00A86B",
"rgb": [
0,
168,
107
],
"hsl": [
158,
100,
33
],
"cmyk": [
100,
0,
36,
34
],
"luminance": 0.2907,
"contrast": {
"black": 6.81,
"white": 3.08
}
}WCAG
{
"AA": [
"#000000",
"#1A1A1A"
],
"AAA": []
}Harmonies
{
"complementary": "#A8003E",
"analogous": [
"#00A816",
"#0092A8"
],
"triadic": [
"#6B00A8",
"#A86B00"
],
"tetradic": [
"#1600A8",
"#A8003E",
"#92A800"
],
"splitComplementary": [
"#A80092",
"#A81600"
],
"monochromatic": [
"#05FFA3",
"#00A86B",
"#004D30"
]
}Variants
{
"light": "#05FFA3",
"dark": "#004D30",
"saturated": "#00A86B",
"desaturated": "#139666",
"pastel": "#39EFAC",
"neon": "#00D184"
}Pairings
{
"best": [
"#000000",
"#A8003E",
"#00A816",
"#0092A8"
],
"avoid": [
"#139666",
"#05FFA3"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#05FFA3",
"#139666"
]
}Knowledge graph
{
"nearestColors": [
"shamrock",
"persian-green",
"peacock-teal",
"dark-cyan",
"traffic-green"
],
"generatedPalettes": [
"jade"
],
"generatedComparisons": [
"jade-vs-persian-green",
"jade-vs-shamrock",
"spring-green-vs-jade"
],
"relatedFamilies": [
"/colors/by-family/green",
"/colors/by-temperature/cool",
"/colors/by-tone/jewel-tone"
],
"relatedTools": [
"/harmonies/jade",
"/wcag/jade",
"/css/colors/jade",
"/hex/00a86b",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/green",
"/colors/by-temperature/cool",
"/colors/by-tone/jewel-tone"
],
"narrower": [
"/palettes/jade"
],
"related": [
"/colors/shamrock",
"/colors/persian-green",
"/colors/peacock-teal",
"/colors/dark-cyan",
"/colors/traffic-green",
"/compare/jade-vs-persian-green",
"/compare/jade-vs-shamrock",
"/compare/spring-green-vs-jade",
"/harmonies/jade",
"/wcag/jade",
"/css/colors/jade",
"/hex/00a86b",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
}
}Full JSON dataset
{
"slug": "jade",
"name": "Jade",
"hex": "#00A86B",
"uses": [
"natural palettes",
"wellness branding",
"sustainability design"
],
"psychology": {
"associations": [
"nature",
"growth",
"balance"
],
"contexts": [
"wellness",
"outdoor brands",
"gardening",
"organic products"
],
"avoidIn": [
"urgent error states"
]
},
"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": "green",
"temperature": "cool",
"tone": [
"jewel-tone"
],
"editorialNotes": "Curated internal color record with computed technical properties.",
"tags": [
"green",
"cool",
"jewel-tone",
"natural-palettes",
"wellness-branding",
"sustainability-design",
"nature",
"growth",
"balance"
],
"popularity": 84,
"rgb": [
0,
168,
107
],
"hsl": [
158,
100,
33
],
"cmyk": [
100,
0,
36,
34
],
"luminance": 0.2907,
"contrast": {
"black": 6.81,
"white": 3.08
},
"harmonies": {
"complementary": "#A8003E",
"analogous": [
"#00A816",
"#0092A8"
],
"triadic": [
"#6B00A8",
"#A86B00"
],
"tetradic": [
"#1600A8",
"#A8003E",
"#92A800"
],
"splitComplementary": [
"#A80092",
"#A81600"
],
"monochromatic": [
"#05FFA3",
"#00A86B",
"#004D30"
]
},
"variants": {
"light": "#05FFA3",
"dark": "#004D30",
"saturated": "#00A86B",
"desaturated": "#139666",
"pastel": "#39EFAC",
"neon": "#00D184"
},
"wcag": {
"AA": [
"#000000",
"#1A1A1A"
],
"AAA": []
},
"css": {
"variable": "--color-jade: #00A86B;",
"utility": ".bg-jade { background-color: #00A86B; }",
"textUtility": ".text-jade { color: #00A86B; }"
},
"nearestColors": [
"shamrock",
"persian-green",
"peacock-teal",
"dark-cyan",
"traffic-green"
],
"generatedPalettes": [
"jade"
],
"generatedComparisons": [
"jade-vs-persian-green",
"jade-vs-shamrock",
"spring-green-vs-jade"
],
"relatedFamilies": [
"/colors/by-family/green",
"/colors/by-temperature/cool",
"/colors/by-tone/jewel-tone"
],
"relatedTools": [
"/harmonies/jade",
"/wcag/jade",
"/css/colors/jade",
"/hex/00a86b",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/green",
"/colors/by-temperature/cool",
"/colors/by-tone/jewel-tone"
],
"narrower": [
"/palettes/jade"
],
"related": [
"/colors/shamrock",
"/colors/persian-green",
"/colors/peacock-teal",
"/colors/dark-cyan",
"/colors/traffic-green",
"/compare/jade-vs-persian-green",
"/compare/jade-vs-shamrock",
"/compare/spring-green-vs-jade",
"/harmonies/jade",
"/wcag/jade",
"/css/colors/jade",
"/hex/00a86b",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
},
"pairings": {
"best": [
"#000000",
"#A8003E",
"#00A816",
"#0092A8"
],
"avoid": [
"#139666",
"#05FFA3"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#05FFA3",
"#139666"
]
}
}