
Figma color wheel
Want to find the perfect complementary or analogous colors to match red?
Skip to main content
Everything you need to know about red to inspire your next design.
Red is a bold and vivid hue that sits between orange and purple on the color wheel. Because it’s one of the three primary colors in the RGB color space, red can’t be created by mixing other colors. Instead, other colors are derived from it. This includes deeper hues like maroon and burgundy to softer shades like rose red.

Shades
Tints
Tones
Hues
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Red Romance
Season's Greetings
Lip Kit
Red 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 red 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 rich color spectrum as red, consider:
To complement red, consider pairing it with:
Other colors that pair well with red include neutral shades like white, gray, black, and some shades of brown. These colors help tone down red’s intensity while offering a sleek and modern design style.
While red is well-rounded, it may clash with:
According to color psychology, red symbolizes love, passion, strength, and desire. But it can also ignite feelings of danger and anger. Red’s ability to evoke a wide range of profound emotions is what makes it such a decadent and special color.
Red is a symbolic color across many different cultures. In Chinese and Japanese cultures, red symbolizes prosperity, good fortune, and joy—which is why it’s such a prominent color in weddings and celebrations. In India, red symbolizes purity, fertility, and matrimonial bliss. Today, red is a symbol of romance, but can also symbolize warnings in designs.
Since red has many different cultural meanings, it’s important to consider how you use the color, especially when designing for a global audience.
Though the precise origin is unknown, etymologists have traced the name “red” back to the Proto-Indo-European word “reudh.” Many variations of the word existed before evolving into “red” in modern English. In many different cultures, it was the first color named aside from black and white.
The color red dates back to prehistoric times when early humans used red clay as color pigment for cave and body painting. Historically, red’s bold color has represented blood, power, life, and wealth.
In ancient Egypt, red symbolized life and rebirth but was also associated with destruction and evil. This striking and memorable color was—and still is—prominent in art, cosmetics, and religious ceremonies.
Contrast 3.72
#FF2C2C
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Pass | Fail | |
Pass | Fail |
Contrast 5.65
#FF2C2C
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 #FF2C2C, known as red, has RGB values of R:255, G:44, B:44 and CMYK values of C:0, M:83, Y:83, K:0
| VALUE | CSS | |
|---|---|---|
| HEX | #FF2C2C | #FF2C2C |
| RGB DECIMAL | 255, 44, 44 | RGB(255,44,44) |
| RGB PERCENTAGE | 100, 17.3, 17.3 | RGB100%,17.3%,17.3%) |
| CMYK | 0, 83, 83, 0 | |
| HSL | 0°, 100, 58.6 | HSL(0,100%,58.6%) |
| HSV (OR HSB) | 0°, 82.7, 100 | |
| WEB SAFE | #FF3333 | #FF3333 |
| CIE-LAB | 55.328, 75.189, 53.184 | |
| XYZ | 42.598, 23.249, 4.627 | |
| xyY | 0.604, 0.33, 23.249 | |
| CIE-LCH | 55.328, 92.098, 35.273 | |
| CIE-LUV | 55.328, 160.149, 34.549 | |
| HUNTER-LAB | 48.217, 73.318, 28.062 | |
| BINARY | 11111111, 00101100, 00101100 | |
| iOS - SwiftUI | Color(red: 1, green: 0.173, blue: 0.173) | |
| iOS - UIKit | UIColor(red: 1, green: 0.173, blue: 0.173, alpha: 1) | |
| Android - Compose | Color(0xFFff2c2c) |

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

Embrace the romantic allure of rose red.

Discover the classic elegance of navy blue.