RGB Color Picker
Pick a color from an image, the palette, RGB sliders, or anywhere on your screen — copy it as HEX, RGB, or HSL.
Click to upload or drag & drop an image
Then hover to preview a pixel and click to pick it
Sample a color from anywhere on your screen — another window, a video, a design tool. Click the button, then click any pixel.
How to use this RGB color picker
- Palette: drag in the big square to choose brightness and saturation, and use the rainbow bar to choose the hue. With the keyboard, focus the square or the bar and use the arrow keys (hold Shift for bigger steps).
- RGB sliders: move the R, G and B sliders, or type a number from 0 to 255 in the box next to each one.
- Image: upload or drop a photo, screenshot or logo, move the mouse over it to preview a pixel, and click to pick it. The image stays in your browser and is never uploaded.
- Screen: in Chrome or Edge, click Pick from screen and then click any pixel on your screen, even in another window.
- Type a value: paste a code into the HEX, RGB or HSL box, for example
#1E90FF,rgb(30, 144, 255),30, 144, 255orhsl(210, 100%, 56%). The other formats update at once.
Click a copy button to copy a value. The address bar always holds the current color (for example geektools.net/color_picker#1E90FF), so you can bookmark it or send the link to someone.
HEX, RGB and HSL: what the numbers mean
RGB
Screens mix every color from red, green and blue light. RGB gives each of the three channels a number from 0 (off) to 255 (full). rgb(255, 0, 0) is pure red, rgb(0, 0, 0) is black and rgb(255, 255, 255) is white. That makes 256 × 256 × 256 = 16,777,216 possible colors.
HEX
A HEX code is the same three numbers written in base 16, two digits per channel: #RRGGBB. In #9B47FF, 9B = 9 × 16 + 11 = 155 (red), 47 = 4 × 16 + 7 = 71 (green) and FF = 255 (blue), so it is rgb(155, 71, 255). The short form #F80 means #FF8800. Upper and lower case mean the same.
HSL
HSL describes a color the way people think about it: hue is the angle on the color wheel (0° red, 120° green, 240° blue), saturation goes from gray (0%) to full color (100%), and lightness goes from black (0%) through the pure color (50%) to white (100%). HSL is handy in CSS when you want a lighter or darker version of a color: keep the hue and change only the lightness.
Which one should I use?
All three describe exactly the same colors. HEX is the most common in CSS, design tools and brand guides. RGB is used in code (JavaScript canvas, Android, Unity, Python) and when you need transparency, as rgba(155, 71, 255, 0.5). HSL is easiest for making color variations by hand.
Common colors with HEX and RGB codes
Click a color name to load it into the picker.
| Color | HEX | RGB |
|---|---|---|
| #FFFFFF | 255, 255, 255 | |
| #000000 | 0, 0, 0 | |
| #FF0000 | 255, 0, 0 | |
| #00FF00 | 0, 255, 0 | |
| #0000FF | 0, 0, 255 | |
| #FFFF00 | 255, 255, 0 | |
| #00FFFF | 0, 255, 255 | |
| #FF00FF | 255, 0, 255 | |
| #FFA500 | 255, 165, 0 | |
| #800080 | 128, 0, 128 | |
| #FFC0CB | 255, 192, 203 | |
| #808080 | 128, 128, 128 | |
| #000080 | 0, 0, 128 | |
| #008080 | 0, 128, 128 |
Is text readable on this color?
The Text on this color box shows the contrast ratio of white and black text on the selected color. The Web Content Accessibility Guidelines (WCAG) ask for at least 4.5 : 1 for normal text (level AA) and 3 : 1 for large or bold text. A ratio of 7 : 1 or more meets the stricter AAA level. If neither white nor black passes, make the background lighter or darker with the tints and shades row.
Frequently asked questions
How do I find the RGB value of a color in an image?
Open the Image tab, upload or drop the picture, move the mouse over it and click the pixel you want. The HEX, RGB and HSL values appear on the right, ready to copy. For a color that is on your screen but not in a file, use Pick from screen in Chrome or Edge.
How do I convert HEX to RGB?
Paste the HEX code into the HEX box and read the RGB box. To do it by hand, split the code into three pairs and turn each pair from base 16 into a number: #1E90FF becomes 1E = 30, 90 = 144 and FF = 255, so rgb(30, 144, 255). It works the other way too: type an RGB value and the HEX code updates.
What are the RGB codes for white and black?
White is rgb(255, 255, 255), or #FFFFFF. Black is rgb(0, 0, 0), or #000000. Any color with three equal numbers, such as rgb(128, 128, 128), is a shade of gray.
Why is Pick from screen grayed out?
The screen eyedropper uses the EyeDropper API, which only Chromium browsers (Chrome, Edge, Opera, Brave) support on desktop. Firefox, Safari and phone browsers do not have it yet. There you can take a screenshot and pick the color from it in the Image tab.
Are my images uploaded anywhere?
No. The picture is drawn on a canvas inside your browser and the color is read from it there. Nothing is sent to a server. Your recent colors are saved only in your browser's local storage.
Can I use these values in CSS?
Yes. The HEX, rgb() and hsl() values are written exactly as CSS expects, for example color: #9B47FF; or background: rgb(155, 71, 255);. They also work in Figma, Photoshop, Canva and most other design tools.