# Converting Colors

## Color Conversions

Get Conversions and Harmonies as JSON or XML.

## Color Details

The HSL color 180°, 50%, 40% can be considered as a dark color, the websafe version is hex 339999. A complement of this color would be 355°, 35%, 61% and the grayscale version is 0°, 0%, 48%.

A 20% lighter version of the original color is 180°, 50%, 63% and 180°, 100%, 20% is the 20% darker color. If you saturate the color by 10% you get 180°, 62%, 37% and if you desaturate by 10% it is 180°, 40%, 43%.

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

 180°, 50%, 40% 180°, 39%, 51% 180°, 50%, 63% 180°, 72%, 74% 180°, 100%, 83% 180°, 100%, 89% 180°, 100%, 95% 0°, 0%, 100%
 180°, 50%, 40% 180°, 97%, 25% 180°, 100%, 20% 181°, 100%, 15% 182°, 100%, 11% 180°, 100%, 7% 168°, 100%, 3% 0°, 0%, 0%

Similar to the brightness gradients but the following show a change for the saturation by 10% instead.

 180°, 50%, 40% 180°, 62%, 37% 180°, 76%, 34% 180°, 94%, 31% 180°, 100%, 30%
 180°, 50%, 40% 180°, 40%, 43% 180°, 30%, 46% 180°, 22%, 49% 180°, 17%, 52% 180°, 11%, 55% 180°, 5%, 58% 0°, 3%, 61% 0°, 11%, 64% 0°, 21%, 67%

## Color Harmonies

### Analogous

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

 158°, 31%, 46% 180°, 50%, 40% 192°, 56%, 44%

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

 180°, 50%, 40% 282°, 23%, 59% 34°, 31%, 50%

### Complementary

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

 180°, 50%, 40% 355°, 35%, 61%

### Split Complementary

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

 17°, 37%, 56% 180°, 50%, 40% 330°, 30%, 59%

### Square

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

 180°, 50%, 40% 230°, 32%, 62% 355°, 35%, 61% 60°, 23%, 45%

### Rectangle

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

 180°, 50%, 40% 200°, 46%, 50% 355°, 35%, 61% 28°, 33%, 52%

### Sweetspot

The sweetspot groups the original color and five complimentary colors.

 180°, 50%, 40% 180°, 26%, 70% 120°, 50%, 40% 180°, 14%, 34% 0°, 0%, 89% 0°, 0%, 39%

## Color Images

A selection of SVG images using the hex version of this color.

## Color Preview

### White Background

This preview shows how the HSL color 180°, 50%, 40% looks on a white background.

### Black Background

This preview shows how the HSL color 180°, 50%, 40% looks on a black background.

### hsl(180, 50%, 40%) Background

This preview shows how black text looks on a background with the HSL color 180°, 50%, 40%.

This preview shows how white text looks on a background with the HSL color 180°, 50%, 40%.

## Color CSS

The css property to change the color of a text is called "color". The color property can be set on classes,ids or directly on the html element `.text, #text, p{ color:hsl(180, 50%, 40%) }`.

This example shows how text in the color hsl(180, 50%, 40%) looks like.

If you want to add a text shadow in that color use `.shadow{ text-shadow: 4px 4px 2px hsl(180, 50%, 40%) }`.

Here you see how black text with a 4 pixel hsl(180, 50%, 40%) 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 a element is called "border". The border property can be set on classes,ids or directly on the html element `.border, #border, table{ border:4px solid hsl(180, 50%, 40%) }`.

If only the border color should be changed `.border{ border-color:hsl(180, 50%, 40%) }` can be used.

Here you see how a box with a 4 pixel hsl(180, 50%, 40%) colored shadow looks like.

If you want to add a box shadow in that color use `.boxshadow{ -moz-box-shadow:4px 4px 4px 4px hsl(180, 50%, 40%); -webkit-box-shadow:4px 4px 4px 4px hsl(180, 50%, 40%); box-shadow:4px 4px 4px 4px hsl(180, 50%, 40%) }`.

### Background

The css property to change the background color of a element is called "background". The background property can be set on classes,ids or directly on the html element `.background, #background, body{ background:hsl(180, 50%, 40%) }`.

If only the background color should be changed `.background{ background-color:hsl(180, 50%, 40%) }` can be used.

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