Neon orange

#ff5c00 Color Schemes and Preview

The color #ff5c00 has a rich RGB composition of 100.0% red, 36.1% green, and 0.0% blue. With its HSL value being H:22°, S:100%, L:50%. It pairs with complementary colors like #00a3ff or harmonious analogous tones such as #ff5c00 and #ffdb00.

Color Conversion

RGB: R:255, G:92, B:0
HSL: H:22°, S:100%, L:50%
CMYK: C:0, M:64, Y:100, K:0

Similar Colors to #ff5c00

#ff8f3d
#ff751f
#ff5c00
#e14100
#c42500

Colors That Go with #ff5c00

#00a3ff
#ff0023
#ff5c00
#ffdb00
#00ff5c
#5c00ff

Color Variations

Shades

#ff5c00
#d64500
#ad2e00
#841700
#5b0000

Tints

#ff5c00
#ff8328
#ffa94f
#ffd077
#fff79f

Tones

#ef6b2d
#f76316
#ff5c00
#ff5200
#ff4900

Hues

#ff0023
#c8401a
#928012
#5bbf09
#24ff00

Color Harmonies

Complementary Colors

#00a3ff

Analogous Colors

#ff0023
#ff5c00
#ffdb00

Split Complementary Colors

#00ffdc
#0023ff

Triadic Colors

#00ff5c
#5c00ff

Monochromatic Colors

#8c0000
#c52e00
#ff5c00
#ff8f37
#ffc26e

Color Preview

This section previews how the color looks when used in different ways.

This text is styled with the color #ff5c00.

This inline text is colored with #ff5c00.
This paragraph has a background color of #ff5c00.
This element has a border color of #ff5c00.

Accessibility: Contrast Checker

Large Text

Normal Text

3.10:1

WCAG 2.2 Simple Contrast

Normal Text: fail
Large Text: pass
AAA Normal Text: fail
AAA Large Text: fail

Large Text

Normal Text

6.78:1

WCAG 2.2 Simple Contrast

Normal Text: pass
Large Text: pass
AAA Normal Text: fail
AAA Large Text: pass

CSS Codes

Use the following CSS snippets to apply the color to text, background, or borders.

 /* Text Color */
.text {
    color: #ff5c00;
}

/* Background Color */
.background {
    background-color: #ff5c00;
}

/* Border Color */
.border {
    border: 1px solid #ff5c00;
}

#ff5c00 Border Color

Div content here
<div style="border:3px solid #ff5c00">Div content here</div>

Div Box Shadow

Div content here 
<div style="-moz-box-shadow: 1px 1px 3px 2px #ff5c00;
                        -webkit-box-shadow: 1px 1px 3px 2px #ff5c00;
                        box-shadow: 1px 1px 3px 2px #ff5c00">Div content here</div>

Text Shadow with Hex Values

Text here

This text has shadow with hex values.

<p style="text-shadow: 4px 4px 2px #ff5c00;">Text here</p>

Text Shadow with RGB Values

Text here

This text has shadow with RGB values.

<p style="text-shadow: 4px 4px 2px rgba(255, 92, 0, 0.8);">Text here</p>

Other Similar Colors: