RashTools

    🎨 Color Picker

    Pick any color from your image

    or drop your image here

    Pick colors and get every code you need

    Choose a color or pull it from an image and copy HEX, RGB, HSL and CMYK values.

    Grab a color out of a screenshot

    Sample a brand color from a logo or reference image instead of trying to eyeball it in a design tool.

    Try this tool
    Grab a color out of a screenshot

    All the formats, one click

    HEX for CSS, RGB for editors, HSL for adjusting tone, CMYK for print — copied straight from the same swatch.

    Open Time Zone Converter
    All the formats, one click

    Build a usable palette

    Generate tints, shades and complementary colors so a palette holds together instead of being a list of favourites.

    Open Currency Converter
    Build a usable palette

    Step-by-step guide

    How to use Color Picker?

    Pick any colour and get its HEX, RGB, HSL and CMYK values plus matching palette suggestions.

    Step-by-step instructions

    1. 1

      Click the colour picker to choose any colour visually.

    2. 2

      Or paste a HEX/RGB code to load a specific one.

    3. 3

      Copy the value in the format you need (HEX, RGB, HSL, CMYK).

    4. 4

      See suggested harmonious palette (analogous, complementary, triadic).

    Benefits

    • Converts between HEX, RGB, HSL and CMYK.
    • Auto-generated matching palettes.
    • Eyedropper support on modern browsers.
    • Great for designers and developers alike.

    Who is it for?

    • Web developers picking exact CSS colours
    • UI designers building palettes
    • Print designers converting to CMYK

    FAQ

    Frequently asked questions

    Open the site and click the Upload Image button or paste an image with Ctrl+V / Cmd+V; you can also enter an image URL in the Open from URL field. After the image appears, choose the Eyedropper tool, move the crosshair over the pixel you want (the magnifier can zoom up to 10x) and click to sample. The sampled color appears in the right-hand panel with HEX, RGB and HSL values and a Copy button next to each format for one-click copying.

    The picker accepts JPG/JPEG, PNG, WebP, GIF, BMP, TIFF and HEIC image files; typical desktop browsers (Chrome/Firefox) handle uploads up to ~50 MB without problems, though very large TIFF stacks or multi-frame GIFs may be slow. The interface handles one image at a time in the main viewer but you can upload another image anytime; on low-memory mobile browsers you should stay under ~10–20 MB to avoid crashes. If you need batch processing or very large originals, use a desktop browser and reduce resolution to speed sampling.

    Each sample returns a 6-digit HEX code in #RRGGBB format (for example #1A2B3C), an RGB string in CSS-friendly syntax like rgb(26,43,60), and an HSL string like hsl(210,25%,17%). The right sidebar shows Copy buttons next to each value and a Copy CSS button that copies a CSS variable declaration (for example --picked-color: #1A2B3C;). You can also Export Palette to download a CSV of HEX values or copy a comma-separated list if you’re building palettes for design tools.

    Differences usually come from color profiles, display gamut and compression: this web tool assumes sRGB output, whereas Photoshop may be using Adobe RGB, Display P3, or a document profile. Also JPEG/WebP compression and browser color management can shift values slightly; sampling on a compressed or resized file will return the file’s pixel value, not the camera sensor’s raw color. For print-critical work use the original high-bit TIFF in Photoshop with correct profiles; for web/UI use the HEX from this picker and test on target displays.

    Common causes are cross-origin images loaded from other domains, browser extensions blocking clipboard or pointer events, or attempting to pick from an image layer outside the viewer. If you used an Open from URL and the image is blocked by CORS, save that image to your disk and use Upload Image instead; if extensions might interfere, open an incognito/private window in Chrome or Firefox and try again. Also ensure you click the Eyedropper toolbar button (not the image) to activate sampling mode and allow the page to access the clipboard if you want one-click copying.

    Yes — click multiple points with the Eyedropper to build a palette shown beneath the sampled color area; the tool stores up to 32 swatches per session so you can capture highlights, accents and neutrals. Use the Export Palette button to download a CSV file with HEX values and pixel coordinates, or use Copy CSS to get a block of CSS variables; there’s also a Copy All button that produces comma-separated HEX for quick pasting into Figma or Sketch. If you need Adobe .ASE files or advanced palette metadata, export CSV then convert in a desktop app.

    On desktop (Chrome, Firefox, Edge) you get full drag-and-drop, Ctrl/Cmd+V paste and the magnifier with precise pixel picking; desktop handles larger files (up to ~50 MB) reliably. On mobile (iOS Safari, Android Chrome) paste is limited so use Upload Image / Choose File; iOS Safari will usually preview HEIC from the Photos app but older Android browsers may fail on HEIC or very large images. Mobile pinch-to-zoom helps visual selection, but the small screen makes precise single-pixel sampling harder — use the sample-radius option (1/3/5 px) to average if you need stable colors on touch devices.

    iPhone HEIC files are supported in many cases: iOS Safari and recent desktop Safari will render and allow you to upload HEIC images directly, so sampling works without conversion. Chrome on Windows or some Linux setups may not decode HEIC without an OS codec, in which case save or export the photo as JPEG (Photos app → Share → Save as JPEG, or export via the Files app) before uploading. If you want to avoid conversions, take a quick screenshot (saved as PNG/JPEG) on the phone and upload that instead — the tool will handle PNG/JPEG reliably across all browsers.

    For Upload Image and paste operations the picker uses in-browser File APIs and processes pixel data locally in your browser memory via JavaScript, so files do not leave your machine. The one exception is Open from URL: entering a public URL causes your browser to fetch that image from its host, which generates a standard network request to that third-party URL. The site is free with no signup and no embedded watermarks; if you need absolute serverless assurance, stick to local uploads and avoid the Open from URL field.

    The tool offers a sample radius setting (1px, 3px, 5px) that averages the color over that square area — 1px picks a single pixel, while 3px/5px return averaged RGB values which reduce noise from compression or anti-aliasing. Zoom in the magnifier only changes your view; it does not change the underlying pixel unless you also change the sample radius or the image has been resampled by the browser when resizing. For the most repeatable web colors, use 1px on the original-resolution image; use 3px–5px when sampling from scaled or blurry screenshots to get stable averages.

    The tool is free to use with no login, no daily quota shown, and no watermark on exported palettes; you can upload and sample as many images as your browser/device will handle. Practical limits are imposed by your device: very large images (>50 MB), huge TIFFs, or long multi-frame GIFs can exhaust browser memory and cause slowdowns or crashes, especially on mobile Safari. For heavy/continuous professional work you’ll get best reliability on a desktop browser (Chrome or Firefox) and by resizing originals beforehand.

    This Online Color Picker is fast for single-image sampling, returns HEX/RGB/HSL and builds quick palettes without installing software — it’s ideal for web/UI work where sRGB HEX is needed. Photoshop gives superior color management (embedded ICC profiles, CMYK/LAB readouts, history and layer-aware sampling) and should be used for print or profile-accurate work; ColorZilla samples the rendered web page and browser DOM rather than a standalone file. Use the online picker for quick image extracts and cross-check in Photoshop when you need profile-accurate or print-ready color values.

    About this tool

    Color picker from image — HEX, RGB and HSL color selector online

    Designers, developers, marketers and even hobbyists end up needing the exact colour of something on screen at least a few times a week — a competitor's accent shade, a product photo on a supplier's website, a frame from a YouTube tutorial, the exact teal in a brand logo, or the dusty pink in a wedding inspiration board. Our online color picker from image solves this in two clicks: upload any JPG, PNG, WebP or screenshot, hover your cursor over it, and the precise pixel colour appears in real time as HEX, RGB and HSL — ready to paste straight into CSS, Figma, Photoshop, Canva or your brand guidelines doc.

    The picker reads the literal pixel value with no smoothing or averaging, so what you see really is the colour your screen is rendering — important when you're matching a website to a printed flyer, sampling a competitor's button colour or trying to replicate a specific shade from a photograph. A zoom-in magnifier appears under the cursor so you can pinpoint a single pixel inside a busy image (especially useful for tiny logos, icons and pixel-art).

    Beyond single-pixel sampling, the tool also extracts a full dominant-colour palette from the whole image — perfect for building a moodboard, choosing brand colours from a hero photo, or generating a coordinated scheme for a poster or web page. Each swatch comes with one-tap copy buttons for HEX, RGB and HSL, plus a 'copy all as Tailwind config' option that drops the whole palette straight into a `tailwind.config.js` colors block.

    Privacy is built in by design. Your image is loaded into a HTML canvas inside your own browser and never gets uploaded to any server — confidential mockups, unreleased brand work, internal screenshots and personal photos stay completely on your device. The tool works on any image size from a tiny 32×32 icon up to a 50-megapixel poster, with zero waiting time because there's no upload step.

    Related tools