Vermilion is a rich, vibrant shade of red with warm and energetic qualities. Like other red shades, vermilion symbolizes strength, passion, and love while carrying connotations of danger and power.
Vermilion is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #E73121
- RGB value: 90.6% red, 19.2% green, and 12.9% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
Here are some ways to use vermilion in your designs:
- Create some excitement. Vermilion’s vibrant nature can energize a design, making it great for gaming, entertainment, or fitness apps.
- Draw attention to key elements. Use vermilion strategically to highlight important CTAs, notifications, or interactive elements like hover states to provide visual feedback.
- Evoke a sense of urgency: Vermilion’s boldness creates a sense of immediacy and excitement, making it ideal for highlighting limited-time offers or countdown timers.
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same bold spectrum as vermilion, consider:
- Scarlet (#ED2100) is a fiery red with strong saturation, evoking passion and energy.
- Chili red (#CD1C18) presents a deeper, earthier red with a hint of brown.
- Red (#FF2C2C) is a pure, vibrant red, delivering maximum impact and attention.
- Red-orange (#FF4B33) introduces a touch of orange, creating a brighter hue.
To complement vermilion, consider pairing it with:
- Jet black (#252525) creates a dramatic contrast that highlights vermilion’s intensity, resulting in an edgy look.
- Yellow-orange (#FFB343) intensifies vermilion’s warmth, creating a playful combination that evokes sunshine and excitement.
- Copper (#C68346) complements vermilion’s fiery undertones, adding depth and richness.
- Blue (#0000FF) provides a striking contrast that creates a dynamic and visually interesting combination.
- Hunter green (#2C5F34) offers a grounding, earthy counterpoint to vermilion.
Other colors worth considering include neutral tones like cream or gray for a softer look or complementary colors like turquoise to enhance its vibrancy.
While vermilion is bold and fiery, it may clash with:
- Yellow-green (#CCFF00) creates a jarring contrast between warm and cool tones, resulting in a visually harsh combination.
- Fuchsia (#FF00FF) competes with vermilion’s intensity, creating a chaotic and overwhelming visual experience.
- Cyan (#00FFFF) offers a sharp, contrasting coolness that clashes with vermilion's warmth.
- Lavender (#D3D3FF) is too soft to complement vermilion’s boldness, creating a visually uninteresting combination.
- Neon orange (#FF5C00) is too similar to vermilion, creating a muddy effect.
Vermilion symbolizes passion, energy, and excitement. The color has cultural significance in many societies, representing everything from good fortune to spiritual energy.
In color psychology, vermilion is considered stimulating and attention-grabbing. It evokes feelings of warmth, enthusiasm, and desire. This fiery color can also be associated with importance.
In UI design, vermilion can create a sense of excitement and urgency. It effectively draws attention to CTAs, highlights progress, and conveys energy and vitality. However, it’s crucial to use it sparingly to avoid overwhelming the design.
Vermilion’s origins trace back to ancient civilizations in China, where it was used it for ceremonial and artistic purposes.
The pigment was traditionally made from cinnabar, a mineral containing mercury sulfide. Due to its toxicity, producing vermilion was hazardous, adding to its value.
Various cultures have used vermilion for painting, sculpture, and decorative arts. Its vivid color and historical significance have ensured its popularity. Today, synthetic vermilion is now available, removing the health risks once associated with its production.
Color variations
Shades
Tints
Tones
Hues
Color Harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom Palettes
Circus Tent
Exotic Bird
Sangria
Contrast 4.32
- Large Text
#E73121
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Pass | Fail | |
Pass | Fail |
Contrast 4.86
- Large Text
#E73121
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Fail | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #E73121, known as vermilion, has RGB values of R:231, G:49, B:33 and CMYK values of C:0, M:0.79, Y:0.86, K:0.09.
| VALUE | CSS | |
|---|---|---|
| HEX | E73121 | #E73121 |
| RGB DECIMAL | 231, 49, 33 | RGB(231,49,33) |
| RGB PERCENTAGE | 90.6, 19.2, 12.9 | RGB(90.6%,19.2%,12.9%) |
| CMYK | 0, 79, 86, 9 | |
| HSL | 4.8°, 80.5, 51.8 | HSL(4.8°,80.5%,51.8%) |
| HSV (OR HSB) | 4.8°, 85.7, 90.6 | |
| WEB SAFE | FF3333 | #FF3333 |
| CIE-LAB | 51.036, 67.131, 52.869 | |
| XYZ | 34.33, 19.3, 3.356 | |
| xyY | 0.602, 0.339, 19.3 | |
| CIE-LCH | 51.036, 85.45, 38.222 | |
| CIE-LUV | 51.036, 141.6, 34.421 | |
| HUNTER-LAB | 43.931, 62.607, 26.222 | |
| BINARY | 11100111, 00110001, 00100001 | |
| iOS - SwiftUI | Color(red: 0.906, green: 0.192, blue: 0.129) | |
| iOS - UIKit | UIColor(red: 0.906, green: 0.192, blue: 0.129, alpha: 1) | |
| Android - Compose | Color(0xFFE73121) |
