Skip to main content

Red-brown

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

Get color palette

Hex

RGB

HSB

HSL

Pick palette settings

Custom palettes

Red-brown is a rich, warm shade that promotes feelings of comfort and stability. The hint of brown evokes a sense of groundedness, while its red influence suggests sophistication.

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

  • HEX code: #942222
  • RGB value: 58% red, 13.3% green, and 13.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.

Here are some ways to use red-brown in your designs:

  • Attract attention. Though not as vibrant as other reds like cinnabar or scarlet, red-brown is still useful for guiding a user’s attention to important buttons, elements, or information on a page. Use it as a primary color for CTA buttons or hover states to highlight interactive elements.
  • Convey trust. Because red-brown is associated with dependability and reliability, it is useful for apps that want to offer a sense of comfort and security.
  • Communicate urgency. Red-brown conveys a sense of importance without being overly alarming, helping maintain a positive user experience. This makes it a great shade for error messages, notifications, and 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 deep spectrum as red-brown, consider:

  • Burgundy (#660033) has a similar richness with more purple undertones.
  • Maroon (#550000) takes a darker turn, conveying the same sense of sophistication.
  • Blood red (#780606) has a deeper hue with a similar brown influence.
  • Crimson red (#B22222) shares a similar warmth with a touch of coolness from its blue undertones.
  • Brick red (#C04657) has a softer appearance, leaning slightly more toward purple on the color wheel.

To complement red-brown, consider pairing it with:

  • Copper (#C68346) enhances red-brown’s warmth, creating a cohesive and earthy color palette.
  • Cream (#FDFBD4) provides a soft contrast for a clean and classic color combination.
  • Saffron (#F1C338) brings a subtle hint of brightness and warmth next to red-brown.
  • Dusty rose (#DCA1A1) adds a touch of romance for a soft and balanced look.

Other colors worth considering include black for a dramatic color pairing, hunter green for a natural combination, and white for a clean and simple contrast.

While red-brown is rich, it may clash with:

  • Electric blue (#00F0FF) may create a harsh contrast and clash with red-brown’s warmth.
  • Dark red (#950606) has a very similar hue, providing little visual interest.
  • Light green (#88E788) is cool and doesn’t complement the earthy tone of red-brown.
  • Purple (#9D00FF) has a high saturation that looks harsh against red-brown’s richness.

Influenced by two distinct colors, red-brown symbolizes comfort, stability, and trust. Its rich hue also carries connotations of sophistication and tradition.

In color psychology, red-brown evokes a sense of warmth and affection. Its earthy brown undertones also promote feelings of balance, groundedness, and well-being.

In UI design, red-brown can capture users’ attention without being visually overpowering. It creates a warm and inviting interface, helping establish trust and ensuring a pleasing user experience.

Both red and brown pigments have been used for centuries, dating back to prehistoric times. Red was one of the first colors discovered in cave paintings, derived from natural sources like ochre and vermilion. Brown pigments were also pulled from substances like raw umber and sienna to depict humans and animals in paintings.

Over time, different red pigments were created by adding black, brown, yellow, or orange to create a wide variety of shades. Today, red-brown is a versatile color used in art, interior design, fashion, and UI design, injecting depth, warmth, and sophistication.

Color variations

Shades

Tints

Tones

Hues

Color Harmonies

Complementary

Split

Monochromatic

Analogous

Triadic

Square

Custom Palettes

Red Velvet

Art Gallery

Tapestry

Large Text

Figma

Normal Text

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

This is #942222 text on a #FFFFFF background.

8.36:1

WCAG 2.2 Simple Contrast

Normal Text

Pass
AA
4.5:1
Pass
AAA
7:1

Large Text

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

Figma

Normal Text

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

This is #942222 text on a #000000 background.

2.51:1

WCAG 2.2 Simple Contrast

Normal Text

Fail
AA
4.5:1
Fail
AAA
7:1

Large Text

Fail
AA
3:1
Fail
AAA
4.5:1

Color simulations

Protanopia

Deuteranopia

Tritanopia

Achromatopsia

The hexadecimal color #942222, known as red-brown, has RGB values of R:148, G:34, B:34 and CMYK values of C:0, M:0.77, Y:0.77, K:0.42.

VALUECSS
HEX942222#942222
RGB DECIMAL148, 34, 34RGB(148,34,34)
RGB PERCENTAGE58, 13.3, 13.3RGB(58%,13.3%,13.3%)
CMYK0, 77, 77, 42
HSL0°, 62.6, 35.7HSL(0°,62.6%,35.7%)
HSV (OR HSB)0°, 77, 58
WEB SAFE993333#993333
CIE-LAB33.043, 46.713, 29.402
XYZ13.074, 7.557, 2.284
xyY0.571, 0.33, 7.557
CIE-LCH33.043, 55.196, 32.187
CIE-LUV33.043, 83.566, 18.027
HUNTER-LAB27.49, 36.786, 14.318
BINARY10010100, 00100010, 00100010
iOS - SwiftUIColor(red: 0.58, green: 0.133, blue: 0.133)
iOS - UIKitUIColor(red: 0.58, green: 0.133, blue: 0.133, alpha: 1)
Android - ComposeColor(0xFF942222)