Home /Compare /Ruby vs Brick

Ruby vs Brick: What's the Difference?

The main difference between Ruby and Brick is brightness and saturation: both are red shades, but Brick is lighter and Ruby is more saturated. Ruby and Brick are often confused but have distinct differences in hue, saturation, and tone. Ruby (#9B111E) and Brick (#CB4154) each suit different design contexts — understanding their differences helps you choose the right color for your project.

Ruby#9B111E
Brick#CB4154
#9B111EBlended: #B32939#CB4154
ShareSave to PinterestTweet

Ruby vs Brick: Key Differences at a Glance

Aspect Ruby Brick
BrightnessDark (L=34%) — rich, serious, substantialMedium (L=53%) — balanced, versatile
SaturationVivid (S=80%) — bright, energetic, eye-catchingModerately saturated (S=57%) — balanced in intensity
Hue familyRedRed
TemperatureWarmWarm
Hex code#9B111E#CB4154
RGB155, 17, 30203, 65, 84

Can you use Ruby and Brick together?

Brick text on Ruby
Ruby text on Brick
Contrast Ratio:1.77:1Insufficient Contrast

How to Tell Ruby and Brick Apart

  • ●Look at lightness first: Brick is noticeably lighter.
  • ●Check saturation: Ruby looks more vivid and saturated.
  • ●Compare them on a white background to see true saturation, and on black to see true lightness.

Ruby or Brick: Which to Use and Where

Four real design scenarios, with the recommended pick based on hue, saturation, and WCAG contrast.

◆Branding & logos
PickRuby

Ruby is more saturated (80% HSL vs 57%) so it reads as bolder and more memorable at logo scale, while Brick can feel washed out when printed small.

▢Web UI & body text backgrounds
PickRuby

Ruby hits a 8.42:1 WCAG contrast against white — safer for text-heavy interfaces — where Brick only reaches 4.75:1 and risks failing AA at small body sizes.

⬡Fashion & apparel
PickBrick

Brick is a warm tone that flatters spring/summer collections and warmer skin undertones, while Ruby leans warmer and is better suited to autumn/winter layering.

▣Interior design & walls
PickBrick

Brick is the more muted of the two (57% saturation) and sits more calmly on large wall surfaces, while Ruby's higher chroma can overwhelm a room when used beyond accent pieces.

When to Use Ruby vs Brick in Design

Use Ruby for:
●Alerts, errors, stop states
●Sale & promotion banners
●Food and beverage packaging
●Sports and energy branding
●Romantic & bold fashion
Use Brick for:
●Alerts, errors, stop states
●Sale & promotion banners
●Food and beverage packaging
●Sports and energy branding
●Romantic & bold fashion

Ruby and Brick Hex Codes, RGB & HSL

Ruby#9B111E

Ruby (#9B111E) is a dark, vivid red with a warm undertone — it feels rich, serious, substantial and bright, energetic, eye-catching.

HEX
RGB
HSL
HSV
CMYK
PANTONE
Shades
Tints
Brick#CB4154

Brick (#CB4154) is a medium, moderately saturated red with a warm undertone — it feels balanced, versatile and balanced in intensity.

HEX
RGB
HSL
HSV
CMYK
PANTONE
Shades
Tints

Ruby and Brick WCAG Contrast Ratios

Text legibility depends on the contrast ratio between foreground and background. WCAG 2.1 AA requires at least 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1. Use these numbers to choose accessible combinations for your design.

Sample text preview
Ruby text on white
8.42:1AAA
Sample text preview
Ruby text on black
2.49:1Fail
Sample text preview
Brick text on white
4.75:1AA
Sample text preview
Brick text on black
4.42:1AA Large
Sample text preview
Ruby text on Brick
1.77:1Fail
Sample text preview
Brick text on Ruby
1.77:1Fail

Explore Ruby and Brick individually

Each color has a dedicated page with shades, tints, CSS name, pairings, and color psychology.

Ruby color page#9B111E · shades, tints, pairings

More Ruby and Brick Comparisons

RedvsRubyRedvsBrickRubyvsWineRubyvsGreyBrickvsWineTomatovsBrickBrownvsRubyBrickvsCherryRubyvsGarnetBrickvsMaroonTomatovsRubyCrimsonvsBrick

Ruby vs Brick FAQ

What is the difference between ruby and brick?+
The main difference between Ruby and Brick is brightness and saturation: both are red shades, but Brick is lighter and Ruby is more saturated. Ruby and Brick are often confused but have distinct differences in hue, saturation, and tone. Ruby (#9B111E) and Brick (#CB4154) each suit different design contexts — understanding their differences helps you choose the right color for your project.
Is ruby darker than brick?+
Yes. Ruby is darker, with a lightness of 34% in HSL compared to Brick at 53% — a 19-point gap.
Are ruby and brick the same color?+
No. Ruby is #9B111E and Brick is #CB4154. They differ by 2° in hue, 19% in lightness, and 23% in saturation.
Which is more saturated, ruby or brick?+
Ruby is more saturated. In HSL, Ruby has 80% saturation and Brick has 57% — Ruby is the more vivid of the two, while Brick reads as more muted.
Is ruby warm or cool?+
Ruby (#9B111E) is a warm red. Its hue sits at 354° on the color wheel, which places it in the warm range.
Is brick warm or cool?+
Brick (#CB4154) is a warm red. Its hue sits at 352° on the color wheel, which places it in the warm range.
Can you use ruby and brick together?+
Yes. Both ruby and brick are red shades, so they pair naturally in a monochromatic palette. Use ruby as the dominant color and brick as the accent or highlight.
What color family does ruby belong to?+
Ruby belongs to the red family. Its HSL is 354°, 80%, 34% — a warm tone within the broader red group.
What is the hex code for ruby?+
The hex code for Ruby is #9B111E. In RGB, that's rgb(155, 17, 30), and in HSL it's hsl(354, 80%, 34%).
What is the hex code for brick?+
The hex code for Brick is #CB4154. In RGB, that's rgb(203, 65, 84), and in HSL it's hsl(352, 57%, 53%).