Color picker tool

This tool makes it easy to create, adjust, and experiment with custom colors for the web. It also makes it easy to convert between various color formats supported by CSS, including: HEXA colors, RGB (Red/Green/Blue) and HSL (Hue/Saturation/Lightness). Control over the alpha channel is also supported.

As you adjust the parameters that define the color, it gets displayed in all three standard Web CSS formats. In addition, based on the currently-selected color, a palette for HSL and HSV, as well as alpha, is generated. The "eyedropper" style color picker box can be toggled between HSL or HSV format. You can also test colors and how they overlap one another by dragging them into the box at the bottom of the tool and moving them over one another. Adjust their relative Z index values to move them forward and behind one another.

This tool will help you identify the perfect CSS colors to apply to your HTML.

The generated colors you create above can be used anywhere color is used in CSS and HTML, unless otherwise noted.

See also

For more on using color, see:

For additional tools, see:

Border-image generator

This interactive tool lets you visually create border images (the border-image property).

Border-radius generator

This interactive tool lets you visually create rounded corners (the border-radius property).

Box-shadow generator

This interactive tool lets you visually create shadows behind elements (the box-shadow property).