
Figma color wheel
Want to find the perfect complementary or analogous colors to match scarlet?
Skip to main content
Everything you need to know about scarlet to inspire your next design.
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.
Shades
Tints
Tones
Hues
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Garnet
Macaw
Fireworks
Scarlet is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
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:
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:
To complement scarlet, consider pairing it with:
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:
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.
Contrast 4.36
#ED2100
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Pass | Fail | |
Pass | Fail |
Contrast 4.82
#ED2100
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Fail | |
Pass | Pass | |
Pass | Pass |
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) |

Want to find the perfect complementary or analogous colors to match scarlet?

Discover the earthy richness of chili red.

Uncover the playful and cheerful color of pink.