---
title: Color picker tool
slug: Web/CSS/CSS_Colors/Color_picker_tool
tags:
  - CSS
  - CSS Color Picker
  - CSS Color Picker Tool
  - CSS Colors
  - Color Picker
  - HTML Color  Picker
  - HTML Color Picker Tool
  - HTML Colors
  - Tools
  - color
  - colors
---
{{CSSRef}}

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](/en-US/docs/Web/CSS/color_value) supported by [CSS](/en-US/docs/Web/CSS), including: HEXA colors, RGB (Red/Green/Blue) and HSL (Hue/Saturation/Lightness). Control over the alpha channel is also supported on RGB (rgba) and HSL (hsla) formats.

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](/en-US/docs/Web/HTML).

{{EmbedGHLiveSample("css-examples/tools/color-picker/", '100%', 900)}}

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:

- [Applying color to HTML elements using CSS](/en-US/docs/Web/HTML/Applying_color)
- [Fundamental text and font styling](/en-US/docs/Learn/CSS/Styling_text/Fundamentals)
- [Styling borders using CSS](/en-US/docs/Learn/CSS/Styling_boxes/Borders)
- [Changing background styles using CSS](/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds)
- [Color and color contrast](/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast)
