{{color}} — Color information

HEX:
{{color}}
RGB:
{{toRGBStr(colornohash)}}
HSL:
{{toHSL(colornohash)}}
CMYK:
{{toCMYK(colornohash)}}
HSV:
{{toHSV(colornohash)}}
XYZ:
{{toXYZ(colornohash)}}
Web-Safe:
#{{safeColor(colornohash)}}
Temperature:
{{temperature(color)}} °K

Tints

Created by adding white to a base color, making it lighter. Shades become pastel colored.

#{{color}}

Tones

Created by adding grey to a base color, making it lighter. Shades appear more complex than the base color.

#{{color}}

Shades

Created by adding black to the base color, making it darker. The shades look richer.

#{{color}}

Color combinations

Complementary

Complementary colors, opposite each other. Two opposite colors.

#{{color}}
Split Complementary

The main color and two other colors lying around the edges of the opposite main color.

#{{color}}
Triadic

The combination of three equidistant colors on the color wheel.

#{{color}}
Tetradic

The combination of two pairs of complementary colors, when formed a square or rectangle.

#{{color}}
Analogus-complementary

The combination of the opposite color and its neighbors on the color wheel.

#{{color}}
Analogus

The combination of four neighboring colors in the color wheel.

#{{color}}

Contrasts

Tools

Hello,
nice to see you!

Forgot Password?

Enter the email address you used when you joined and we’ll send you instructions to reset your password.

Create
a new account

Password mismatch

Introducing Mesh Gradients

We've added a mesh gradient generator and a new mesh library for you to enrich with your gradients. Now you can create beautiful abstract gradients, download them, copy their CSS codes, save them in your personal dashboard, and add them to the public library.

We will soon add a radial gradient generator!

Mesh Gradients