Scarlet is a bright shade of red tinted with a bit of orange, giving it a dramatic, fiery quality. Found close to red on the color wheel, scarlet evokes passionate emotions like courage, joy, devotion, and love.
Scarlet is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #ED2100
- RGB value: 92.9% red, 12.9% green, and 0% 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 scarlet in your designs:
- Create a refined palette. Pair scarlet with neutral colors for elegant, eye-catching designs—great for luxury or academic websites.
- Instill urgency. Scarlet suggests action and change, so it’s excellent for progress bars, CTA buttons, and other clickable elements.
- Share visual feedback. Scarlet pops on the screen, making it helpful in presenting critical information like error messages or alerts.
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 scarlet, consider:
- Cinnabar (#E84B3D) adds brown and orange tones for a more subdued, spicy look.
- Red-orange (#FF4B33) eases up on the red while evoking fire and passion.
- Chili red (#CD1C18) is a darker, less saturated red with a hint of earthiness.
- Rose (#FF1D8D) offers more pink to create a playful vibe.
To complement scarlet, consider pairing it with:
- Champagne (#F7E6CA) balances the vividness of scarlet to create a sophisticated contrast.
- Cognac (#A2574F) is the perfect warm, rich brown to soften scarlet’s sharpness.
- Rosewater (#FFD6D1) is a pale pink shade that suggests romance when paired with scarlet.
- Black (#000000) provides a deep, alluring contrast with the brightness of scarlet.
Other colors worth considering are beige and cream for elegant pairings. Gold and amber play into scarlet’s fiery hues.
While scarlet is warm and passionate, it may clash with:
- Fuchsia (#FE3894) has an intense brightness that can overpower scarlet.
- Chartreuse (#CCFF00) is a yellow-green shade that clashes with scarlet due to its coolness and high saturation.
- Red (#FF2C2C) pairs poorly with scarlet because of their proximity on the color wheel.
- Mauve (#E0AFFF) has a mix of pink and purple hues that conflict with scarlet’s red and orange tones.
Scarlet symbolizes passion, courage, and sacrifice. Its fiery nature and intense red-orange hues connote action, desire, and revolution.
In color psychology, scarlet has a stimulating, energizing effect due to its association with passionate emotion. Its boldness and warmth also promote feelings of heat, love, and movement.
In UI design, scarlet can inspire users to take action. Its brightness makes it ideal for CTA buttons, error messages, notifications, and other key design elements.
In the 8th century BC, scarlet was used as a dye in places like Persia and Rome. High-ranking Roman officers wore scarlet cloaks to symbolize their power, a practice later adopted by the Catholic Church for cardinals' robes.
During the French Revolution, scarlet became linked with social upheaval, as it represented the blood of martyrs. The color gained more significance with the publication of Nathaniel Hawthorne’s “The Scarlet Letter” in 1850, becoming a universal symbol for forbidden passions.
Today, scarlet is still a popular academic color and is used by the Catholic Church and various militaries to signify rank and authority.
Color variations
Shades
Tints
Tones
Hues
Color Harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom Palettes
Garnet
Macaw
Fireworks
Contrast 4.36
- Large Text
#ED2100
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Pass | Fail | |
Pass | Fail |
Contrast 4.82
- Large Text
#ED2100
- 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 #ED2100, known as scarlet, has RGB values of R:237, G:33, B:0 and CMYK values of C:0, M:0.86, Y:1, K:0.07.
| VALUE | CSS | |
|---|---|---|
| HEX | ED2100 | #ED2100 |
| RGB DECIMAL | 237, 33, 0 | RGB(237,33,0) |
| RGB PERCENTAGE | 92.9, 12.9, 0 | RGB(92.9%,12.9%,0%) |
| CMYK | 0, 86, 100, 7 | |
| HSL | 8.4°, 100, 46.5 | HSL(8.4°,100%,46.5%) |
| HSV (OR HSB) | 8.4°, 100, 92.9 | |
| WEB SAFE | FF3300 | #FF3300 |
| CIE-LAB | 50.8, 72.05, 64.05 | |
| XYZ | 35.471, 19.097, 1.818 | |
| xyY | 0.629, 0.339, 19.097 | |
| CIE-LCH | 50.8, 96.403, 41.636 | |
| CIE-LUV | 50.8, 155.559, 37.416 | |
| HUNTER-LAB | 43.7, 68.412, 28.123 | |
| BINARY | 11101101, 00100001, 00000000 | |
| iOS - SwiftUI | Color(red: 0.929, green: 0.129, blue: 0) | |
| iOS - UIKit | UIColor(red: 0.929, green: 0.129, blue: 0, alpha: 1) | |
| Android - Compose | Color(0xFFED2100) |
