Color Picker - Pick and Copy Color Values
Select any color and copy its HEX, RGB, and HSL values. You can use the color box, pick a pixel from a local image, or sample from the screen where your browser allows it.
What Is a Color Picker?
A color picker lets you identify one color and read it as HEX, RGB, and HSL. This tool uses your browser’s color box, can sample a pixel from an image you upload, and can sample from the screen in browsers that support it. It does not generate a multi-color palette.
How to Use the Color Picker
- Select a color — Click the color input field to open your browser's native color picker.
- Choose a color — Use the color picker to select your desired color.
- Click "Pick Color" — The tool displays the color values in HEX, RGB, and HSL formats.
- Sample from Screen — After an image is loaded, Chromium-based browsers on a secure (HTTPS) page can show Sample from Screen if the browser supports the EyeDropper API. The browser opens its screen-sampling interface. Canceling leaves the last selected color unchanged. If the control is hidden, use the color box or click a pixel on the image.
- Pick from an image — Upload or drop a supported local image (JPEG, PNG, WebP, GIF, BMP, or AVIF; SVG is not supported), up to 10 MB. Click or tap a pixel to sample it. Transparent pixels are composited on white. Large images are scaled so the longest edge is at most 1600 pixels.
- Copy values — Click on any value to copy it to your clipboard.
Color Formats Explained
- HEX: A 6-character hexadecimal code (e.g., #1a3a5c). Most common in CSS and HTML.
- RGB: Red, Green, Blue values from 0-255 (e.g., 26, 58, 92). Used in many design applications.
- HSL: Hue, Saturation, Lightness. Hue is the color angle (0-360°), Saturation and Lightness are percentages.
Common Color Uses
| Color | HEX Code | RGB | Common Use |
|---|---|---|---|
| Red | #FF0000 | 255, 0, 0 | Error, danger, importance |
| Green | #00FF00 | 0, 255, 0 | Success, eco, go |
| Blue | #0000FF | 0, 0, 255 | Link, trust, professional |
| Yellow | #FFFF00 | 255, 255, 0 | Warning, caution, highlight |
| Black | #000000 | 0, 0, 0 | Text, elegance, formality |
| White | #FFFFFF | 255, 255, 255 | Background, clean, simplicity |
How to Choose the Right Color
- Brand Colors: Choose 2-3 primary colors that represent your brand
- Text Colors: Ensure high contrast between text and background
- Call-to-Action: Use contrasting colors to make buttons stand out
- Accessibility: Ensure color choices are visible to color-blind users
Frequently Asked Questions
What's the difference between RGB and HEX?
Both represent the same color. HEX is a 6-character code used in CSS and HTML. RGB uses red, green, blue values from 0-255.
What is HSL?
HSL stands for Hue, Saturation, and Lightness. Hue is the color angle (0-360°), Saturation and Lightness are percentages.
How do I copy a color value?
Click HEX, RGB, or HSL. HEX copies as a six-digit code such as #1a3a5c. RGB and HSL copy as CSS values such as rgb(26, 58, 92) and hsl(211, 56%, 23%).
Can I use this color picker for web design?
Yes. Click HEX, RGB, or HSL to copy a CSS-ready value (for example #336699, rgb(51, 102, 153), or hsl(210, 50%, 40%)) that you can paste into your CSS or design software.
Can I pick a color from an image?
Yes. Upload or drop a supported local image, then click or tap a pixel to select its color. Image processing happens in your browser. SVG files are not supported, the file size limit is 10 MB, and transparent pixels are composited on white.
Why don’t I see Sample from Screen?
The option appears only after an image is loaded and when your browser supports the EyeDropper API in a secure context, such as an HTTPS page. If it is unavailable, use the color box or select a pixel from the image.