Color Toolkit & Photo Picker

Color picker and converter

Pick a color, or type a value in any box below.

HEX

RGB

HSL

Pick a color from a photo

Choose an image, then click on it

Pick or enter a color.

How to use the Color Toolkit & Photo Picker

Use the color picker to choose any color and see its HEX, RGB and HSL values at once. You can also type a value into any of the three boxes and the others update automatically. To pick a color from a picture, choose an image from your device and click any spot on it. The sampled color is shown above and added to a short history so you can go back to it. Images are read in your browser and are not uploaded.

Color formats explained

HEX: a six-digit code such as #3b5bdb, widely used in web design and CSS. Three-digit shorthand like #fff is also accepted.
RGB: amounts of red, green and blue from 0 to 255, for example rgb(59, 91, 219).
HSL: hue (0 to 360 degrees on the color wheel), saturation and lightness as percentages. It is handy for making lighter or darker versions of the same color.

Example

White is #ffffff, rgb(255, 255, 255) and hsl(0, 0%, 100%). Pure red is #ff0000, rgb(255, 0, 0) and hsl(0, 100%, 50%). To match a color in a logo or photo, upload the image, click the area you like and copy the HEX code into your design.

Common uses

Converting a design’s HEX code to RGB for another tool
Matching a website color to a brand image or product photo
Building palettes by sampling several points from a picture
Finding lighter or darker shades by changing HSL lightness

Frequently asked questions

Why does a sampled color differ from what I see in another program?
Screens, color profiles and image compression can shift colors. Photos also have gradients, so nearby pixels differ slightly.

Is my photo uploaded?
No. It is drawn onto a canvas in your browser.

Does it show color names or contrast ratios?
No. It focuses on conversion and picking.

Limitations

Large photos are scaled down for display, so sampled values come from the scaled copy. Conversions between formats are rounded to whole numbers. See our Disclaimer and Privacy Policy. Browse the full tools directory. Related tools: Image Resizer, Image Compressor & Converter.