Handitab

Color Picker

Pick a color with the color picker built into your browser and copy its code in HEX, RGB, or HSL for use in CSS or a design tool.

About Color Picker

A color picker lets you choose a color visually and read its numeric code. This tool uses the browser's native color input, whose appearance depends on your browser and operating system, and converts the chosen sRGB value to HEX, RGB, and HSL. The native picker returns opaque six-digit HEX colors only, so transparency is not available here. In some browsers the picker includes an eyedropper for sampling a color from the screen.

How to use Color Picker

  1. Fill in "Pick a color".
  2. The result appears below and updates as you type.
  3. Copy the result with the copy button, or download it as a file where that is offered.

Questions about Color Picker

Can I pick a color from an image or another window?

Only if the picker in your browser has an eyedropper. Chromium-based desktop browsers show one in the color dialog, and it can sample any pixel on screen. Otherwise, type the code into the dialog by hand.

Runs in your browser. Page last updated .

More css and color tools

All 39 css and color tools
Color Shades GeneratorGenerate 3 to 15 shades of one base color from light to dark, keeping its hue and saturation, with a HEX code and swatch for each step.CSS Animation GeneratorGenerate a CSS keyframe animation such as fade, slide, zoom, bounce, pulse, shake, or spin with duration, delay, and easing options.CSS Background Pattern GeneratorGenerate a repeating CSS background pattern (stripes, dots, grid lines, checkerboard, or diagonal lines) from two colors and a size.CSS Checkbox GeneratorGenerate CSS for a custom styled checkbox with your own size, corner radius, and colors that still uses a real, accessible input element.CSS Clip Path GeneratorPick a shape such as a triangle, hexagon, star, arrow, or circle and get the matching CSS clip-path value with a live preview.CSS Cubic Bezier GeneratorSet the two control points of a cubic-bezier() easing curve, see the curve drawn, and copy the CSS transition-timing-function.