Cinnabar

Meet Cinnabar (#F05537), a fiery red-orange that commands attention. Its striking saturation and inherent warmth make it a powerful choice for any palette, offering a bold statement without the harshness of a pure red. This hue feels both modern and timeless.

What color is Cinnabar?

What is the meaning of Cinnabar?

How do I use Cinnabar (#F05537) in UI design?

Using Cinnabar color codes

Cinnabar

#F05537

Access our full UI & UX library today.

What color is Cinnabar?

What is the meaning of Cinnabar?

How do I use Cinnabar (#F05537) in UI design?

Using Cinnabar color codes

Cinnabar Code Conversions

HEX

#F05537

LAB

57, 58, 49

RGB

240, 85, 55

XYZ

39.9, 25.3, 6.4

HSL

10°, 86%, 58%

LCH

57, 76, 40°

HSB

10°, 77%, 94%

LUV

57, 124, 38

CMYK

0, 65, 77, 6

CMYK

0, 65, 77, 6

HWB

10°, 22%, 6%

Cinnabar Color Harmonies

Analogous

Sitting next to Cinnabar on the color wheel, analogous colors produce a visually cohesive and tranquil effect, perfect for creating serene user interfaces.

#F03775

#F05537

#F0B237

#F03775

#F05537

#F0B237

Complementary

Complementary colors sit opposite each other on the color wheel. Pairing Cinnabar with its opposite creates a dynamic visual tension and maximum color contrast.

#F05537

#37D2F0

#F05537

#37D2F0

Split Complementary

For a high-contrast yet balanced look, a split complementary scheme pairs Cinnabar with the two colors neighboring its direct complementary color.

#F05537

#37F0B2

#3775F0

#F05537

#37F0B2

#3775F0

Triadic

Triadic color schemes use three hues equally spaced on the color wheel. With Cinnabar as the base, this creates a vibrant, high-contrast palette.

#F05537

#37F055

#5537F0

#F05537

#37F055

#5537F0

Tetradic

A tetradic scheme for Cinnabar uses two pairs of complementary colors. These four hues form a rectangle on the color wheel, creating a vibrant and balanced palette.

#F05537

#75F037

#37D2F0

#B237F0

#F05537

#75F037

#37D2F0

#B237F0

Square

A square color scheme uses four colors evenly spaced on the color wheel. Starting with Cinnabar, this combination creates a vibrant, high-contrast palette.

#F05537

#75F037

#37D2F0

#B237F0

#F05537

#75F037

#37D2F0

#B237F0

Cinnabar Contrast Simulation

Text Color

#

Background Color

#

6.06

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.

6.06

Good

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Cinnabar Color Variations

Shades

Shades of Cinnabar are made by mixing in black, which produces darker, weightier tones.

#F05537

#CE492F

#AB3D27

#89311F

#672418

#451810

#220C08

#000000

#F05537

#CE492F

#AB3D27

#89311F

#672418

#451810

#220C08

#000000

Tints

Tints lighten Cinnabar by mixing it with white, resulting in a softer, less intense appearance.

#F05537

#F26D54

#F48670

#F69E8D

#F9B6A9

#FBCEC6

#FDE7E2

#FFFFFF

#F05537

#F26D54

#F48670

#F69E8D

#F9B6A9

#FBCEC6

#FDE7E2

#FFFFFF

Tones

Tones are muted versions of Cinnabar, created by adding gray to soften its saturation.

#F05537

#E05B41

#D0614C

#C06756

#B06E61

#A0746B

#907A76

#808080

#F05537

#E05B41

#D0614C

#C06756

#B06E61

#A0746B

#907A76

#808080

Hues

Hues are variations of Cinnabar, sharing its base color but with different intensities and temperatures.

#F05537

#F0E037

#75F037

#37F083

#37D2F0

#3747F0

#B237F0

#F037A4

#F05537

#F0E037

#75F037

#37F083

#37D2F0

#3747F0

#B237F0

#F037A4

What Interfaces Use Colors Like Cinnabar?

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