Skip to main content

Red

Everything you need to know about red to inspire your next design.

Pick a palette type

What color is red?

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.

red colorred color

What does red look like on digital screens?

Red is defined by the following color codes and values to ensure consistency across various digital platforms and devices.

  • HEX code: #FF2C2C
  • RGB value: 100% red, 17.3% green, and 17.3% 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.

How should I effectively use red in UI design?

Here are some ways to use red in your designs:

  • Encourage action. You can use red for warnings, error messages, or call-to-action buttons. The color creates a sense of urgency, encouraging users to interact with elements or take action.
  • Trigger emotional responses. Red can provoke strong emotions, like passion, love, or excitement. This is why shades of red often represent “likes” on social apps.
  • Establish visual hierarchy. Red works well for establishing visual hierarchy in designs, using its boldness to draw attention to a design's most important visual elements. This makes it easier for the viewer to visually prioritize critical elements over less important ones.

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.

What are similar colors to red?

For variations within the same rich color spectrum as red, consider:

  • Red-orange (#FF4B33) shares the same vibrancy as red, but the hint of orange adds a tad more brightness.
  • Scarlet (#ED2100) combines red and orange but sways more red for a bold and sophisticated hue.
  • Pastel red (#FF746C) is a dreamy, muted red shade that adds a touch of softness.
  • Rose red (#FA003F) is a soft red-pink hue that exudes a similar shade as a rose.

What colors go with red?

To complement red, consider pairing it with:

  • Aqua (#00FFF0) pairs beautifully with red to create a subdued and calming color combination.
  • Light orange (#FFDBBB) creates a warm and fiery color palette when paired with red.
  • Light rose (#FFC5CB) pairs well with this rosey shade for romantic and intimate designs.
  • Cream (#FDFBD4) is a pale yellow hue that creates a warm and elegant color palette when paired with red.
  • Navy blue (#000080) creates a traditional yet sophisticated feel when used with different shades of red.

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.

What colors conflict with red?

While red is well-rounded, it may clash with:

  • Green (#008000) and red are complementary colors, but viewers with color vision deficiency generally have difficulty distinguishing one from the other.
  • Magenta (#FF00FF) and red can be visually overwhelming when used together, making it difficult for individual design elements to stand out.
  • Neon purple (#BC13FE) may clash with the vibrancy of red, creating a distracting and harsh visual effect.
  • Yellow (#FFFF00) is highly saturated which can look overpowering next to red.

What does red symbolize? 

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.

What’s the history of red?

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.

Color variations

Shades

Tints

Tones

Hues

Color harmonies

Complementary

Split

Monochromatic

Analogous

Triadic

Square

Custom palettes

Red Romance

Season's Greetings

Lip Kit

Accessibility

Contrast checker

Large Text

Figma

Normal Text

How you design, align, and build matters. Do it together with Figma.

This is #FF2C2C text on a #FFFFFF background.

3.72:1

WCAG 2.2 Simple Contrast

Normal Text

Fail
AA
4.5:1
Fail
AAA
7:1

Large Text

Pass
AA
3:1
Fail
AAA
4.5:1
Large Text

Figma

Normal Text

How you design, align, and build matters. Do it together with Figma.

This is #FF2C2C text on a #000000 background.

5.65:1

WCAG 2.2 Simple Contrast

Normal Text

Pass
AA
4.5:1
Fail
AAA
7:1

Large Text

Pass
AA
3:1
Pass
AAA
4.5:1

Color simulations

Protanopia

Deuteranopia

Tritanopia

Achromatopsia

Color conversion

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

VALUECSS
HEX#FF2C2C#FF2C2C
RGB DECIMAL255, 44, 44RGB(255,44,44)
RGB PERCENTAGE100, 17.3, 17.3RGB100%,17.3%,17.3%)
CMYK0, 83, 83, 0
HSL0°, 100, 58.6 HSL(0,100%,58.6%)
HSV (OR HSB)0°, 82.7, 100
WEB SAFE#FF3333#FF3333
CIE-LAB55.328, 75.189, 53.184
XYZ42.598, 23.249, 4.627
xyY0.604, 0.33, 23.249
CIE-LCH55.328, 92.098, 35.273
CIE-LUV55.328, 160.149, 34.549
HUNTER-LAB48.217, 73.318, 28.062
BINARY11111111, 00101100, 00101100
iOS - SwiftUIColor(red: 1, green: 0.173, blue: 0.173)
iOS - UIKitUIColor(red: 1, green: 0.173, blue: 0.173, alpha: 1)
Android - ComposeColor(0xFFff2c2c)