How do I get the HEX code from an image
It takes three taps — no design software needed:
- Upload the photo in the "Pick a color from an image" panel above.
- Click the exact pixel whose color you want — a logo, a wall, a shirt, anything.
- Copy the HEX code (RGB, HSL and CMYK appear too) and paste it into your design.
The sampling happens on a canvas inside your own browser, so your image is never uploaded anywhere — safe even for private photos. Designers use this to match brand colors from screenshots, pick wall-paint shades from room photos, and grab exact tones from inspiration images.
Which color format should you use?
Different formats describe the same color for different workflows.
Quick answers
How do I get the HEX code from an image for free?
Upload the image in the "Pick a color from an image" panel above, click the exact pixel you want, and copy the HEX code. Free forever, no signup, and your photo never leaves your device.
How do I get the HEX code from an image without uploading it anywhere?
This tool samples pixels with a canvas inside your own browser — nothing is sent to any server. It is the private way to read a color from a photo, screenshot or logo.
How do I convert HEX to RGB?
Enter or select a HEX color above. Its red, green and blue values appear instantly in the RGB field.
What is a good contrast ratio?
Use at least 4.5:1 for normal text and 3:1 for large text. A ratio of 7:1 meets enhanced AAA for normal text.
What are tints and shades?
A tint mixes a color with white. A shade mixes it with black.
Can I use these values in CSS?
Yes. HEX, RGB and HSL values can be pasted directly into CSS color properties.
What's the difference between HEX, RGB and HSL?
They're three notations for the same color: HEX is compact (#E4572E), RGB lists the decimal channel values (228, 87, 46), and HSL describes hue, saturation, and lightness — which feels more intuitive when you're darkening or muting a color. Convert freely; the rendered color is identical.
Why do my brand colors look different on phones?
Screens differ in calibration, brightness, color gamut, and dark-mode handling. Test brand colors on several real devices, and favor slightly darker, more saturated versions — they survive display differences far better than pale pastels.
How many colors should a palette have?
Five is a practical maximum: one primary, one secondary, one accent, plus a dark and a light neutral. The neutrals do most of the heavy lifting in real interfaces; more than five colors and designs start looking noisy and unfocused.