Red

Meet Red (#FF0000), a primary color that commands immediate attention. Its pure, unadulterated hue sits at the longest wavelength of visible light, making it one of the most impactful and arresting colors in any designer's palette, impossible for the human eye to ignore.

What color is Red?

What is the meaning of Red?

How do I use Red (#FF0000) in UI design?

Using Red color codes

Red

#FF0000

Access our full UI & UX library today.

What color is Red?

What is the meaning of Red?

How do I use Red (#FF0000) in UI design?

Using Red color codes

Red Code Conversions

HEX

#FF0000

LAB

53, 80, 67

RGB

255, 0, 0

XYZ

41.2, 21.3, 1.9

HSL

0°, 100%, 50%

LCH

53, 105, 40°

HSB

0°, 100%, 100%

LUV

53, 175, 38

CMYK

0, 100, 100, 0

CMYK

0, 100, 100, 0

HWB

0°, 0%, 0%

Red Color Harmonies

Analogous

Red’s analogous colors are its direct neighbors on the color wheel. This close relationship results in a comfortable and harmonious palette with minimal contrast.

#FF0080

#FF0000

#FF8000

#FF0080

#FF0000

#FF8000

Complementary

To find Red’s complement, look to the opposite side of the color wheel. These pairings produce a striking visual contrast, making both colors pop.

#FF0000

#00FFFF

#FF0000

#00FFFF

Split Complementary

A split complementary scheme for Red uses the two colors adjacent to its complement, Green, creating a vibrant yet balanced palette.

#FF0000

#00FF80

#0080FF

#FF0000

#00FF80

#0080FF

Triadic

Triadic color schemes use three hues equally spaced on the color wheel. For Red, this creates a vibrant, balanced palette with strong visual contrast.

#FF0000

#00FF00

#0000FF

#FF0000

#00FF00

#0000FF

Tetradic

A tetradic scheme for Red uses two pairs of complementary colors, forming a rich, four-color palette with a rectangular relationship on the color wheel.

#FF0000

#80FF00

#00FFFF

#8000FF

#FF0000

#80FF00

#00FFFF

#8000FF

Square

A square color palette pairs Red with three other colors, all spaced evenly on the color wheel for a rich, high-contrast combination.

#FF0000

#80FF00

#00FFFF

#8000FF

#FF0000

#80FF00

#00FFFF

#8000FF

Red Contrast Simulation

Text Color

#

Background Color

#

5.25

Good

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Your Catchy Large Text Goes Here

A high contrast makes anything easier to read, especially small text.

Text Color

#

Background Color

#

Your Catchy Large Text Goes Here

A high contrast makes anything easier to read, especially small text.

5.25

Good

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Red Color Variations

Shades

Adding black to Red creates shades, which introduce a sense of depth and gravity.

#FF0000

#DB0000

#B60000

#920000

#6D0000

#490000

#240000

#000000

#FF0000

#DB0000

#B60000

#920000

#6D0000

#490000

#240000

#000000

Tints

Tints of Red are made by adding white, resulting in softer, less intense variations.

#FF0000

#FF2424

#FF4949

#FF6D6D

#FF9292

#FFB6B6

#FFDBDB

#FFFFFF

#FF0000

#FF2424

#FF4949

#FF6D6D

#FF9292

#FFB6B6

#FFDBDB

#FFFFFF

Tones

Tones of Red are made by adding gray, producing a more subdued and sophisticated look.

#FF0000

#ED1212

#DB2525

#C93737

#B64949

#A45B5B

#926E6E

#808080

#FF0000

#ED1212

#DB2525

#C93737

#B64949

#A45B5B

#926E6E

#808080

Hues

Hues are variations of Red, differing in intensity and temperature to create distinct moods.

#FF0000

#FFBF00

#80FF00

#00FF40

#00FFFF

#0040FF

#8000FF

#FF00BF

#FF0000

#FFBF00

#80FF00

#00FF40

#00FFFF

#0040FF

#8000FF

#FF00BF

What Interfaces Use Colors Like Red?

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access
with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access
with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox