Converting Colors

Conversions

Get Conversions and Harmonies as JSON or XML.

Details

The Hex color 5C5762 is a dark color, and the websafe version is hex 666666. A complement of this color would be 5D6257, and the grayscale version is 5A5A5A.

A 20% lighter version of the original color is 8E8995, and 2E2A34 is the 20% darker color. If you saturate the color by 10%, you get 574D62, and if you desaturate by 10%, it is 616162.

Distribution

These gradients show how the Hex color 5C5762 changes by changing the brightness by 10 percent. The first row shows a shift by +10% for each color and the second row -10%.

 5C5762 756F7B 8E8995 A9A3AF C4BECB E0DAE7 FCF6FF FFFFFF
 5C5762 44404A 2E2A34 19151F 000004 000000

Similar to the brightness gradients but the following show a change of the Hex color 5C5762 by changing the saturation by 10% instead.

 5C5762 574D62 514362 4C3A62 473062 412662 3C1C62 371262 310962 2D0062
 5C5762 616162 676B62 6C7462 7.17e+64 778862 7C9262 819C62 87A562 8CAF62

Harmonies

Analogous

The analogous color harmony consists of three colors that are next to each other on the color wheel.

 555964 5C5762 62565D

The triadic color harmony groups three colors that are evenly spaced from another and form a triangle on the color wheel.

 5C5762 62574E 4B5C5A

Complementary

The complementary color scheme is a pair of colors which are on the opposite of each other on the color wheel.

 5C5762 5D6257

Split Complementary

Split-complementary colors differ from the complementary color scheme. The scheme consists of three colors, the original color and two neighbors of the complement color.

 4F5C54 5C5762 5C594E

Square

The square scheme is like the rectangle color scheme, but the four colors are evenly spaced on the color wheel.

 5C5762 655652 555B50 4B5C60

Rectangle

The rectangle color scheme consists of four colors that form a rectangle on the color wheel.

 5C5762 64555A 555B50 4C5C58

Sweetspot

The sweet spot groups the original color and five complimentary colors.

 5C5762 7D7C80 575D62 3E3D40 BFBFBF 404040

SVG Images

A selection of SVG images using the hex version #5C5762 of the current color.

Previews

White Background

This preview shows how the Hex color 5C5762 looks on a white background.

Black Background

This preview shows how the Hex color 5C5762 looks on a black background.

Hex 5C5762 Background

This preview shows how black text looks on a background with the Hex color 5C5762.

This preview shows how white text looks on a background with the Hex color 5C5762.

CSS Examples

The CSS property to change the color of the text to Hex 5C5762 is called "color". The color property can be set on classes, ids or directly on the HTML element `.text, #text, p{ color:#5C5762 }`.

This example shows how text in the color #5C5762 looks like.

If you want to add a text shadow in that color use `.shadow{ text-shadow: 4px 4px 2px #5C5762 }`.

Here you see how black text with a 4 pixel #5C5762 colored shadow looks like.

Border

This example shows the color as border, it can be applied via the CSS property "border" or "border-color".

The CSS property to change the border of an element to Hex 5C5762 is called "border". The border property can be set on classes, ids or directly on the HTML element `.border, #border, table{ border:4px solid #5C5762 }`.

If only the border color should be changed `.border{ border-color:#5C5762 }` can be used.

Here you see how a box with a 4 pixel #5C5762 colored shadow looks like.

If you want to add a box shadow in that color use `.boxshadow{ -moz-box-shadow:4px 4px 4px 4px #5C5762; -webkit-box-shadow:4px 4px 4px 4px #5C5762; box-shadow:4px 4px 4px 4px #5C5762 }`.

Background

The CSS property to change the background color of an element to Hex 5C5762 is called "background". The background property can be set on classes, ids or directly on the HTML element `.background, #background, body{ background:#5C5762 }`.

If only the background color should be changed `.background{ background-color:#5C5762 }` can be used.

This example shows the color as background, it is applied via the CSS property "background".

To optimize and compress your CSS code you can use our online CSS compressor and optimizer based on csstidy.