Cinnabar is a vibrant red shade with a hint of orange undertones. Positioned between red and orange on the color wheel, it exudes a fiery, energetic, and commanding warmth. The color captures the intensity of deep hues like vermilion and scarlet, making it ideal for designs that require a bold, attention-grabbing presence.
Cinnabar is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #E84B3D
- RGB value: 91% red, 29.4% green and 23.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 a few ways to consider using cinnabar in your designs:
- Highlight important elements. Use cinnabar for elements you want to highlight, such as call-to-action buttons, urgent notifications, or progress bars. Its visibility ensures these elements won’t be overlooked.
- Balance with neutrals. Pair cinnabar with neutral colors like grays, blacks, or whites to balance its intensity. This combination can make UI visually appealing without overwhelming the user.
- Use sparingly for small accents. Due to its powerful presence, use cinnabar sparingly as an accent color to draw attention to specific parts of your interface without dominating the overall design.
- Create emotional impact. Leverage cinnabar in areas of your UI where you want to stimulate quick decision-making, communicate urgency, or influence purchase behaviors.
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 vibrant and earthy spectrum as cinnabar, consider:
- Vermilion (#E34234) offers a slightly more orange hue, closely resembling the vividness of cinnabar.
- Scarlet (#ED2100) shines with a brighter red tone, providing a striking look that echoes the intensity of cinnabar.
- Tomato red (#FF6347) is lighter and leans more towards orange, maintaining the lively spirit of cinnabar.
- Firebrick (#B22222) presents a deeper, more subdued red yet still holds onto the richness found in cinnabar.
To complement cinnabar's warm tones, consider pairing it with:
- Navy blue (#000080) provides a deep, stark contrast that enhances cinnabar’s boldness.
- Almond (#EFDECD) is a soft, neutral shade that subtly complements the earthy tones of cinnabar.
- Hunter green (#355E3B) introduces a dark, rich green that harmonizes with cinnabar’s warmth.
- Gold (#EFBF04) adds a luxurious touch that enriches the visual appeal of cinnabar.
- Cream (#FDFBD4) serves as a gentle background that allows the vibrancy of cinnabar to stand out.
Other colors worth considering include steel blue for a serene backdrop, sage green for an organic touch, and tan to maintain an earthy vibe.
While cinnabar is versatile, it may clash with:
- Bright pink (#FF69B4) creates a visually jarring combination with cinnabar due to its intense saturation.
- Chartreuse (#CCFF00) can be overly vibrant when paired with cinnabar, potentially leading to a discordant look.
- Teal (#069494) might introduce too much coolness, contrasting sharply with the warmth of cinnabar.
- Lavender (#D3D3FF) is too pale and subdued, which can wash out when placed next to the boldness of cinnabar.
- Light gray (#D3D3D3) often appears dull and uninspired next to the richness of cinnabar.
Cinnabar, a vibrant red color, symbolizes passion, energy, and action. This rich, striking hue has been associated with power, wealth, and prestige, often used historically by emperors and nobility. It's also linked to good fortune and celebration in many cultures, particularly in Asia, where red is considered auspicious.
In color psychology, cinnabar stimulates emotions, increases enthusiasm, and can even raise blood pressure and respiration rates due to its intensity. It is a highly visible color that can evoke excitement or aggression, making it a powerful tool in influencing psychological responses.
In UI design, cinnabar can attract attention and encourage user action. It is ideal for call-to-action buttons, warning messages, or any interactive elements where you want to draw the user's eye quickly. However, due to its intensity, use it sparingly to avoid overwhelming users or causing visual fatigue.
Cinnabar dates back over 2,000 years, originating from the natural mineral used to create the vermilion pigment. This bright red mercury sulfide mineral was valued for its vivid hue and used extensively in art and decoration, especially in Chinese lacquerware.
While valued in the West for pigments, alchemy, and medicine (despite its toxic mercury content), synthetic alternatives eventually replaced natural cinnabar.
Color variations
Shades
Tints
Tones
Hues
Color Harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom Palettes
Sundried Tomatoes
Lovebird
Ruby Grapefruit
Contrast 3.81
- Large Text
#E84B3D
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Pass | Fail | |
Pass | Fail |
Contrast 5.5
- Large Text
#E84B3D
- 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 #E84B3D, known as cinnabar, has RGB values of R:232, G:75, B:61 and CMYK values of C:0, M:0.68, Y:0.74, K:0.09.
| VALUE | CSS | |
|---|---|---|
| HEX | E84B3D | #E84B3D |
| RGB DECIMAL | 232, 75, 61 | rgb(232,75,61) |
| RGB PERCENTAGE | 91, 29.4, 23.9 | rgb(91%,29.4%,23.9%) |
| CMYK | 0, 68, 74, 9 | |
| HSL | 4.9°, 78.8, 57.5 | hsl(4.9,78.8%,57.5%) |
| HSV (OR HSB) | 4.9°, 73.7, 91 | |
| WEB SAFE | FF3333 | #FF3333 |
| CIE-LAB | 54.584, 59.65, 42.215 | |
| XYZ | 36.639, 22.529, 6.834 | |
| xyY | 0.555, 0.341, 22.529 | |
| CIE-LCH | 54.584, 73.076, 35.288 | |
| CIE-LUV | 54.584, 122.84, 31.85 | |
| HUNTER-LAB | 47.465, 54.723, 24.689 | |
| BINARY | 11101000, 01001011, 00111101 | |
| iOS - SwiftUI | Color(red: 232/255, green: 75/255, blue: 61/255) | |
| iOS - UIKit | UIColor(red: 232/255.0, green: 75/255.0, blue: 61/255.0, alpha: 1.0) | |
| Android - Compose | Color(0xFFE84B3D) |
