How to Choose a Brick-Red Color Code: Compare Its Reddish and Brownish Shades

If you look for a brick-red color to use in web design, you will find many color codes, from clearly reddish versions to shades closer to brown. Rather than relying on the color name alone, compare a few candidates on the same background. Looking at both the reddish or brownish character and the lightness makes the choice more practical. Here are three HEX codes, followed by examples of headings and buttons for a ceramics exhibition website.

There is no single brick-red code: start by comparing three shades

Brick red describes a family of reddish-brown colors reminiscent of fired bricks, not one universally fixed HEX code for the web. A HEX code begins with a hash sign and uses hexadecimal digits. In its six-digit form, two digits each represent the red, green, and blue components of a color. The name alone does not guarantee that two designers have selected the same shade, so choose the specific code you intend to use.

The following three shades are examples selected for this comparison, not official standards for brick red.

• More reddish: ■#B54A37. Its red, green, and blue component values are 181, 74, and 55, giving red a more prominent role.
• Between reddish and brownish: ■#A45A43. Its component values are 164, 90, and 67, creating a more muted appearance than the first shade.
• More brownish: ■#794D38. With component values of 121, 77, and 56, it is also the darkest of these three examples.

The shades differ in lightness and color intensity as well as in their reddish or brownish character. The red component alone cannot determine which one is best. Place equal-size samples on the same background: a more reddish shade may suit a prominent exhibition heading, whereas a more brownish shade may sit more quietly alongside ceramics photographs. The intended use should guide your decision.

Test the colors on a ceramics exhibition page

Compare heading colors on a light background

Imagine a ceramics exhibition site with a warm off-white background of ■#F8F2E8. A heading in the reddish ■#B54A37 has a contrast ratio of approximately 4.72:1 against that background. The middle shade ■#A45A43 has about 4.58:1, while the brownish ■#794D38 reaches about 6.43:1. All three exceed the numerical 4.5:1 threshold for normal-size text on this specific background, but the first two are close enough to the limit that any background adjustment calls for another check.

For longer artwork descriptions, choose an even darker gray-brown ■#352C27. Against the same background ■#F8F2E8, its contrast ratio is approximately 12.24:1. There is no need to color all the body text brick red. Keeping the distinctive shade mainly in headings or small labels makes it easier to organize the information without overwhelming the descriptions.

Use the brownish shade for a button

For a “View the Collection” button, the brownish ■#794D38 can serve as the fill with white ■#FFFFFF text. This text-to-button contrast ratio is about 7.16:1. If the heading uses the more reddish shade, a darker button can also make the interactive element stand apart. Alternatively, white ■#FFFFFF text on the reddish ■#B54A37 button background gives about 5.25:1. In either case, consider the surrounding surface, the reddish tones already present in product photographs, and the number of buttons on the page.

Recheck the text color whenever the background changes

Changing the background to a somewhat deeper beige ■#EDE0D5 reduces the contrast of reddish ■#B54A37 text to about 4.06:1 and the middle shade ■#A45A43 to about 3.94:1. Both fall below the usual 4.5:1 requirement for normal-size body text. The brownish ■#794D38 still provides approximately 5.53:1. Likewise, a lighter brick shade ■#C8725E reaches only about 3.13:1 on the original off-white ■#F8F2E8, so avoid using it for small text and consider it for nonessential decoration or larger color areas instead.

Under the Web Content Accessibility Guidelines (WCAG) 2.2, Level AA, normal-size text generally needs at least 4.5:1 contrast with its background, and qualifying large text needs at least 3:1. A passing number does not guarantee comfortable reading when type is especially thin or positioned over an image. The ratios above were calculated separately for the stated pairs of opaque colors.

HueRoll lets you enter a HEX code, compare lighter and darker shades and related colors, and check the selected color against white and black. It does not automatically calculate contrast for arbitrary pairs of colors or decide whether a pairing meets WCAG AA. Start by comparing reddish, middle, and brownish options, then narrow the selection using the actual background and text combinations in your design.