Color Picker

CSS Color



Color Picker


What is a Color Picker?

A color picker is used to browse through and select colors. By default, it lets a user navigate through colors on a color spectrum, or specify a color in either Red-Green-Blue (RGB), Hue-Saturation-Value (HSV), or Hexadecimal text boxes. 

Why need a color picker?

When working with visuals, you often need to make text, a shape, or another graphic perfectly match a particular color.

If, for example, you’re creating imagery for a marketing campaign, an important presentation, or user documentation, you’ll probably need to follow brand guidelines that include a particular set of colors. Of course, you can memorize the color values for all of your brand’s colors and enter them every time you need to pick a color, but that can be a bit difficult. Instead, you’re better off using a color picker.

How to Use a Color Picker to Perfectly Match Colors

A color picker is a feature of virtually all software or online image and text editing tools. It allows you to choose the colors of visual elements like text or shapes in a document or graphic. Nowadays, the color pickers in most image and video editing software include a feature that will identify a color in an image based on its RGB or hexadecimal (HEX) values.

When you are using a color picker, you can click a space that contains a color in question and the color picker will display it. After identifying the color, you can apply it to shapes, text, or other elements on the canvas.

This allows you to perfectly match brand guidelines or maintain a consistent theme.

You can pick a color in one of the following ways:

  • Using the eyedropper tool

  • Using the color plane and sliders

  • Typing in values in the appropriate input fields

toolbox color picker

Using the eyedropper tool

To pick a color from any element on the canvas or outside your current browser window, use the eyedropper tool. The eyedropper tool is a great way to pull a precise color from anywhere on the canvas or outside your current browser window. So if you want to pull a color from an image, an existing class on the page, or a graphic from another application on your computer, you can do that using this tool.

Using the color plane and sliders

To pick a color from the spectrum, use the hue slider to choose a hue, then use the color plane to pick the right shade. If you want to make the color less opaque, use the opacity slider.

Color plane

The color plane allows you to pick the shade of the color you want to use. You can move the picker along the x-axis to adjust the saturation of the color, and along the y-axis to adjust the brightness. To change the color, use the hue slider below.

Hue slider

The hue slider allows you to pick the hue of the color you want to use from the color spectrum. You can, then, pick the right shade using the color plane above.

Opacity slider

The opacity slider allows you to specify the transparency level of your color. 100% will make the color fully opaque, any value below that will make the color see-through. This is useful when adding color overlays on images or creating see-through backgrounds.

Typing in values in the appropriate input fields

If  you want to get more precise when choosing a color, you can use web color names, Hex codes, HSB/HSBA values, or RGB/RGBA values. You can paste these values in in any color field in the Style panel or in the HEX input field in the color picker. Alternatively, you can breakdown the code and input each value in its own field:

Hex values in the HEX field

HSBA values, broken down, in the H S B and A fields

RGBA values, broken down, in the R G B and A fields

You can toggle between HSB and RGB by clicking the labels.

Image Color Picker

Would you like to know what color is in your picture ? This is an image color picker that can help us find the color on the image, support HTML HEX code, RGB color code and CMYK color code. Free online color tool, no install needed, easy and convenient operation, just take a photo and upload it, then click on the picture, you will get color code, share this with your friends, maybe they will like it too.

How to use this image color picker

Upload your image file from computer local, smartphone or from web url.

If your image has been uploaded success, it will be shown on the top of this page.

If you upload image from url failed, try to download image to your local device first, then upload it from local

Move your mouse and click any pixel on that image (select a color)

The selected color code will be list below

Click on the color block, the color code will be copied to the clipboard.

Acceptable image file format depends on each browser.

Latest Blogs



You may like
our most popular tools & apps