Home /Compare /Scarlet vs Ruby

Scarlet vs Ruby: What's the Difference?

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

Scarlet#FF2400
Ruby#9B111E
#FF2400Blended: #CD1B0F#9B111E
ShareSave to PinterestTweet

Scarlet vs Ruby: Key Differences at a Glance

Aspect Scarlet Ruby
BrightnessMedium (L=50%) — balanced, versatileDark (L=34%) — rich, serious, substantial
SaturationVivid (S=100%) — bright, energetic, eye-catchingVivid (S=80%) — bright, energetic, eye-catching
Hue familyRedRed
TemperatureWarmWarm
Hex code#FF2400#9B111E
RGB255, 36, 0155, 17, 30

Can you use Scarlet and Ruby together?

Ruby text on Scarlet
Scarlet text on Ruby
Contrast Ratio:2.21:1Insufficient Contrast

How to Tell Scarlet and Ruby Apart

  • ●Look at lightness first: Scarlet is noticeably lighter.
  • ●Check saturation: Scarlet looks more vivid and saturated.
  • ●Watch the undertone: the hue shifts 346° between them, which changes the perceived temperature.
  • ●Compare them on a white background to see true saturation, and on black to see true lightness.

Scarlet or Ruby: Which to Use and Where

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

◆Branding & logos
PickScarlet

Scarlet is more saturated (100% HSL vs 80%) so it reads as bolder and more memorable at logo scale, while Ruby 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 Scarlet only reaches 3.82:1 and risks failing AA at small body sizes.

⬡Fashion & apparel
PickScarlet

Scarlet 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
PickRuby

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

When to Use Scarlet vs Ruby in Design

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

Scarlet and Ruby Hex Codes, RGB & HSL

Scarlet#FF2400

Scarlet (#FF2400) is a medium, vivid red with a warm undertone — it feels balanced, versatile and bright, energetic, eye-catching.

HEX
RGB
HSL
HSV
CMYK
PANTONE
Shades
Tints
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

Scarlet and Ruby 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
Scarlet text on white
3.82:1AA Large
Sample text preview
Scarlet text on black
5.5:1AA
Sample text preview
Ruby text on white
8.42:1AAA
Sample text preview
Ruby text on black
2.49:1Fail
Sample text preview
Scarlet text on Ruby
2.21:1Fail
Sample text preview
Ruby text on Scarlet
2.21:1Fail

Explore Scarlet and Ruby individually

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

Scarlet color page#FF2400 · shades, tints, pairingsRuby color page#9B111E · shades, tints, pairings

More Scarlet and Ruby Comparisons

RedvsScarletRedvsRubyRubyvsWineScarletvsWineRubyvsGreyRustvsScarletRubyvsBrickScarletvsGreyBrownvsRubyGrayvsScarletRubyvsGarnetScarletvsBrick

Scarlet vs Ruby FAQ

What is the difference between scarlet and ruby?+
The main difference between Scarlet and Ruby is brightness and saturation: both are red shades, but Scarlet is lighter and Scarlet is more saturated. Scarlet and Ruby are often confused but have distinct differences in hue, saturation, and tone. Scarlet (#FF2400) and Ruby (#9B111E) each suit different design contexts — understanding their differences helps you choose the right color for your project.
Is scarlet darker than ruby?+
No. Ruby is the darker of the two at 34% lightness, while Scarlet sits higher at 50%.
Are scarlet and ruby the same color?+
No. Scarlet is #FF2400 and Ruby is #9B111E. They differ by 14° in hue, 16% in lightness, and 20% in saturation.
Which is more saturated, scarlet or ruby?+
Scarlet is more saturated. In HSL, Scarlet has 100% saturation and Ruby has 80% — Scarlet is the more vivid of the two, while Ruby reads as more muted.
Is scarlet warm or cool?+
Scarlet (#FF2400) is a warm red. Its hue sits at 8° on the color wheel, which places it in the warm range.
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.
Can you use scarlet and ruby together?+
Yes. Both scarlet and ruby are red shades, so they pair naturally in a monochromatic palette. Use ruby as the dominant color and scarlet as the accent or highlight.
What color family does scarlet belong to?+
Scarlet belongs to the red family. Its HSL is 8°, 100%, 50% — a warm tone within the broader red group.
What is the hex code for scarlet?+
The hex code for Scarlet is #FF2400. In RGB, that's rgb(255, 36, 0), and in HSL it's hsl(8, 100%, 50%).
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%).