# Converting Colors

## Color Conversions

Get Conversions and Harmonies as JSON or XML.

## Color Details

The HSV color 180°, 67%, 60% can be considered as a dark color, the websafe version is hex 339999. A complement of this color would be 355°, 37%, 75% and the grayscale version is 0°, 0%, 48%.

A 20% lighter version of the original color is 180°, 46%, 81% and 180°, 100%, 40% is the 20% darker color. If you saturate the color by 10% you get 180°, 67%, 60% and if you desaturate by 10% it is 180°, 67%, 60%.

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°, 67%, 60% 180°, 54%, 71% 180°, 46%, 81% 180°, 41%, 93% 180°, 34%, 100% 180°, 22%, 100% 180°, 11%, 100% 0°, 0%, 100%
 180°, 67%, 60% 180°, 100%, 50% 180°, 100%, 40% 181°, 100%, 31% 182°, 100%, 22% 180°, 100%, 13% 168°, 100%, 6% 0°, 0%, 0%

## Color Harmonies

### Analogous

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

 158°, 47%, 60% 180°, 67%, 60% 192°, 72%, 69%

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

 180°, 67%, 60% 282°, 27%, 69% 34°, 47%, 65%

### Complementary

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

 180°, 67%, 60% 355°, 37%, 75%

### 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°, 45%, 72% 180°, 67%, 60% 330°, 34%, 72%

### Square

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

 180°, 67%, 60% 230°, 33%, 74% 355°, 37%, 75% 60°, 38%, 56%

### Rectangle

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

 180°, 67%, 60% 200°, 62%, 73% 355°, 37%, 75% 28°, 47%, 68%

### Sweetspot

The sweetspot groups the original color and five complimentary colors.

 180°, 67%, 60% 180°, 20%, 78% 120°, 67%, 60% 180°, 24%, 39% 180°, 0%, 89% 180°, 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 HSV color 180°, 67%, 60% looks on a white background.

### Black Background

This preview shows how the HSV color 180°, 67%, 60% looks on a black background.

### rgb(50, 153, 153) Background

This preview shows how black text looks on a background with the HSV color 180°, 67%, 60%.

This preview shows how white text looks on a background with the HSV color 180°, 67%, 60%.

## 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:rgb(50, 153, 153) }`.

This example shows how text in the color rgb(50, 153, 153) looks like.

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

Here you see how black text with a 4 pixel rgb(50, 153, 153) 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 rgb(50, 153, 153) }`.

If only the border color should be changed `.border{ border-color:rgb(50, 153, 153) }` can be used.

Here you see how a box with a 4 pixel rgb(50, 153, 153) colored shadow looks like.

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

### 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:rgb(50, 153, 153) }`.

If only the background color should be changed `.background{ background-color:rgb(50, 153, 153) }` can be used.

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