Colors EncyclopediaUse this color
Create with Vermilion
Open a professional color tool with #E34234 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 Vermilion 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-vermilion: #E34234;
.bg-vermilion { background-color: #E34234; }
.text-vermilion { color: #E34234; }Color history, meaning and use · Editorially reviewed
About Vermilion Color
Vermilion is historically connected with cinnabar, the naturally occurring mercury sulfide mineral, and with manufactured pigment of the same basic composition. The vivid red-orange was used across cultures for centuries, but its material history also includes the health and handling concerns associated with mercury compounds.
In a digital palette, Vermilion offers a warmer and more orange-leaning alternative to a central red. It is effective for energetic accents, editorial illustration, and historically informed schemes. Its visual intensity should be separated from the chemistry of old pigment: a screen color carries no mercury hazard, while physical artists’ materials require their own safety documentation.
The HEX value describes emitted screen color only; it is not a recipe, safety statement, or substitute for pigment-specific guidance.
WCAG Accessibility
Contrast checks for Vermilion against black and white text.
Black text5.1:1AA Pass
White text4.12:1AA Fail
Downloadable color reference infographic
Vermilion Color Reference Infographic
Save a high-resolution infographic of Vermilion, 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.2048
Black text5.1:1AA Pass
White text4.12: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": "#E34234",
"rgb": [
227,
66,
52
],
"hsl": [
5,
76,
55
],
"cmyk": [
0,
71,
77,
11
],
"luminance": 0.2048,
"contrast": {
"black": 5.1,
"white": 4.12
}
}WCAG
{
"AA": [
"#000000"
],
"AAA": []
}Harmonies
{
"complementary": "#35D5E3",
"analogous": [
"#E3357E",
"#E39B35"
],
"triadic": [
"#35E344",
"#4435E3"
],
"tetradic": [
"#7EE335",
"#35D5E3",
"#9B35E3"
],
"splitComplementary": [
"#35E39B",
"#357EE3"
],
"monochromatic": [
"#EE8F86",
"#E34234",
"#A62317"
]
}Variants
{
"light": "#EE8F86",
"dark": "#A62317",
"saturated": "#FD2F1C",
"desaturated": "#CA594E",
"pastel": "#EBB2AD",
"neon": "#FF5242"
}Pairings
{
"best": [
"#000000",
"#35D5E3",
"#E3357E",
"#E39B35"
],
"avoid": [
"#CA594E",
"#EE8F86"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#EE8F86",
"#CA594E"
]
}Knowledge graph
{
"nearestColors": [
"cinnabar",
"poppy-red",
"persian-red",
"fire-opal",
"spinel"
],
"generatedPalettes": [
"vermilion"
],
"generatedComparisons": [
"cinnabar-vs-vermilion",
"persian-red-vs-vermilion",
"poppy-red-vs-vermilion",
"tulip-red-vs-vermilion"
],
"relatedFamilies": [
"/colors/by-family/red",
"/colors/by-temperature/warm",
"/colors/by-tone/vibrant"
],
"relatedTools": [
"/harmonies/vermilion",
"/wcag/vermilion",
"/css/colors/vermilion",
"/hex/e34234",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/red",
"/colors/by-temperature/warm",
"/colors/by-tone/vibrant"
],
"narrower": [
"/palettes/vermilion"
],
"related": [
"/colors/cinnabar",
"/colors/poppy-red",
"/colors/persian-red",
"/colors/fire-opal",
"/colors/spinel",
"/compare/cinnabar-vs-vermilion",
"/compare/persian-red-vs-vermilion",
"/compare/poppy-red-vs-vermilion",
"/compare/tulip-red-vs-vermilion",
"/harmonies/vermilion",
"/wcag/vermilion",
"/css/colors/vermilion",
"/hex/e34234",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
}
}Full JSON dataset
{
"slug": "vermilion",
"name": "Vermilion",
"hex": "#E34234",
"uses": [
"branding accents",
"editorial palettes",
"product design"
],
"psychology": {
"associations": [
"energy",
"intensity",
"attention"
],
"contexts": [
"fashion",
"food",
"sports",
"retail"
],
"avoidIn": [
"low-stimulation wellness interfaces"
]
},
"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": "red",
"temperature": "warm",
"tone": [
"vibrant"
],
"editorialNotes": "Curated internal color record with computed technical properties.",
"tags": [
"red",
"warm",
"vibrant",
"branding-accents",
"editorial-palettes",
"product-design",
"energy",
"intensity",
"attention"
],
"popularity": 84,
"rgb": [
227,
66,
52
],
"hsl": [
5,
76,
55
],
"cmyk": [
0,
71,
77,
11
],
"luminance": 0.2048,
"contrast": {
"black": 5.1,
"white": 4.12
},
"harmonies": {
"complementary": "#35D5E3",
"analogous": [
"#E3357E",
"#E39B35"
],
"triadic": [
"#35E344",
"#4435E3"
],
"tetradic": [
"#7EE335",
"#35D5E3",
"#9B35E3"
],
"splitComplementary": [
"#35E39B",
"#357EE3"
],
"monochromatic": [
"#EE8F86",
"#E34234",
"#A62317"
]
},
"variants": {
"light": "#EE8F86",
"dark": "#A62317",
"saturated": "#FD2F1C",
"desaturated": "#CA594E",
"pastel": "#EBB2AD",
"neon": "#FF5242"
},
"wcag": {
"AA": [
"#000000"
],
"AAA": []
},
"css": {
"variable": "--color-vermilion: #E34234;",
"utility": ".bg-vermilion { background-color: #E34234; }",
"textUtility": ".text-vermilion { color: #E34234; }"
},
"nearestColors": [
"cinnabar",
"poppy-red",
"persian-red",
"fire-opal",
"spinel"
],
"generatedPalettes": [
"vermilion"
],
"generatedComparisons": [
"cinnabar-vs-vermilion",
"persian-red-vs-vermilion",
"poppy-red-vs-vermilion",
"tulip-red-vs-vermilion"
],
"relatedFamilies": [
"/colors/by-family/red",
"/colors/by-temperature/warm",
"/colors/by-tone/vibrant"
],
"relatedTools": [
"/harmonies/vermilion",
"/wcag/vermilion",
"/css/colors/vermilion",
"/hex/e34234",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/red",
"/colors/by-temperature/warm",
"/colors/by-tone/vibrant"
],
"narrower": [
"/palettes/vermilion"
],
"related": [
"/colors/cinnabar",
"/colors/poppy-red",
"/colors/persian-red",
"/colors/fire-opal",
"/colors/spinel",
"/compare/cinnabar-vs-vermilion",
"/compare/persian-red-vs-vermilion",
"/compare/poppy-red-vs-vermilion",
"/compare/tulip-red-vs-vermilion",
"/harmonies/vermilion",
"/wcag/vermilion",
"/css/colors/vermilion",
"/hex/e34234",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
},
"pairings": {
"best": [
"#000000",
"#35D5E3",
"#E3357E",
"#E39B35"
],
"avoid": [
"#CA594E",
"#EE8F86"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#EE8F86",
"#CA594E"
]
}
}