Why record a code instead of matching "by eye"?
Every monitor and device is calibrated differently, so the same color looks slightly different on each screen. If you pick "about this color" by eye, it may look different later on another screen or in print. Number codes like HEX, RGB and HSL, on the other hand, reproduce exactly the same color wherever you enter them. That is why it's a good idea to record your brand colors and the background colors you use often as codes.
Understanding the three code formats
- HEX: six hexadecimal digits, like #FF5A36. The most widely used format in website CSS and most design tools.
- RGB: mixes red (R), green (G) and blue (B) light on a scale of 0–255, written like rgb(255, 90, 54).
- HSL: describes a color by hue (0–360 degrees), saturation and lightness. Adjustments like "keep this color but make it darker" are intuitive.
How to pick a color from a photo
- Upload the photo to the Color Picker from Image.
- Hover over the photo to see the color in real time, and click the spot you want to lock and copy the color.
- To see the main colors of the photo at a glance, use automatic extraction to pull 5 to 8 colors.
- Write the HEX codes you picked in a note or your design file.
- To see the color in other formats (RGB, HSL), enter the HEX code in the converter and the others update automatically.
Tips for picking accurately
Even the same object in a photo has slightly different colors in different places because of lighting and shadows. Picking from the flattest part, without shadows and with less shine, gets you closer to the "pure" color. If you need the exact brand color of a logo or product, picking from a less-compressed PNG original is more accurate than a JPG, because JPG can shift colors very slightly when it saves.
Where to use the colors you pick
You can paste a HEX code straight into a CSS background color or a design tool's color field. If you need a lighter or darker color in the same family, convert it to HSL and change only the L (lightness) value to keep the same hue while changing the brightness. Once you have chosen background and text colors, always check their contrast ratio with the contrast checker in the color picker. Even beautiful colors are hard to read if the difference in brightness is too small.
Good vs. bad examples
- Good: write down the main color from your brand logo as HEX and use it the same way in every design.
- Bad: hand-pick a color that "looks similar" every time, so the color varies slightly from design to design.
- Good: check the contrast against the background when choosing a text color, and pick an easy-to-read combination.
- Bad: choose by color alone, then find the text disappears into the background once it's finished.
Common mistakes
- Picking from a shiny or shadowed spot, so the code doesn't match the real color.
- Recording a HEX code without the #, which causes errors when you paste it into another tool later.
- Mistaking a color picked from a compressed JPG for the exact brand color.
For an important brand color, don't pick just once. Pick from 2 or 3 spots in the same area of the photo, compare them and then decide on a representative value for better accuracy.
Checklist
- Did you pick from a flat area with little shadow or shine?
- Did you record the HEX code including the #?
- For a background and text pair, did you check the contrast ratio?
- If accuracy matters, did you pick from a less-compressed original?
FAQ
Do I have to include the # in front of a HEX code?
CSS and most design tools only recognize the code correctly with the #. We recommend recording it with the #, like #FF5A36.
Can JPG compression change the color slightly?
Yes. JPG can change colors very slightly when it compresses. If the exact brand color matters, picking from the original design file or a lossless format (PNG) is more accurate.
I get different codes for what looks like the same color in one photo. Why?
Because of lighting, shadows and compression, pixel colors vary slightly from spot to spot even on the same object. Something that looks like one color is often several similar colors. The main-color extraction groups similar colors into one.
Colors look different on every monitor. What can I do?
That's right: the same code can look slightly different depending on how a monitor is calibrated. That is exactly why recording the code (the numbers) and entering it in other tools is far more accurate than matching by eye.