ColorTools is a free, browser-based suite of color utilities and an image color picker at colorpicker.cx that extracts exact HEX, RGB, HSL, HSV, and CMYK codes from any uploaded image and also provides a color wheel, palette generator, gradient builder, converter, and contrast checker.
What is ColorTools?
ColorTools is a free, browser-based suite of color utilities built by the team at colorpicker.cx for designers and developers. It takes an image — JPG, PNG, WebP, or SVG — and produces the exact color codes of any pixel in five formats: HEX, RGB, HSL, HSV, and CMYK. It also includes standalone tools for exploring color harmonies, generating palettes and gradients, converting between color models, and checking contrast. Everything runs entirely in the browser; no image is uploaded to a server, there is no signup, and the tools work on both desktop and mobile.
Key Features
- Image color picker — Upload any image via drag-and-drop or file browse; a magnifying loupe previews pixels under the cursor, and clicking locks a color. The panel instantly shows HEX, RGB, HSL, HSV, and CMYK values, and each format can be copied with one click.
- Color wheel with nine harmony modes — Pick a base hue and see complementary, analogous, triadic, tetradic, split-complementary, and monochromatic palettes, among others, directly on the wheel.
- Palette generator — Generate balanced multi-color palettes using a golden-angle distribution.
- CSS gradient builder — Build linear, radial, and conic CSS gradients with live output.
- Color converter — Convert any color among HEX, RGB, HSL, CMYK, OKLCH, and 8 other formats.
- WCAG/APCA contrast checker — Test contrast against WCAG 2.1 (4.5:1 for normal text, 3:1 for large text and UI components) and APCA, and get accessible color fixes.
- Palette exports — Save selected colors as a PNG swatch sheet, JSON, CSS variables, or a plain HEX list.
- 100% client-side — No uploads, no server, no ads, no installation; all processing happens locally.
What can you do with ColorTools?
- Extract brand colors from a screenshot or photo — Upload a reference image and click to capture the exact HEX/RGB/HSL/HSV/CMYK values for use in Figma, Photoshop, or CSS.
- Build a harmonious palette — Use the color wheel’s nine harmony modes to generate complementary, analogous, or triadic schemes from a base color, then export the palette as CSS variables or a HEX list.
- Convert colors between formats — Enter a color in any supported format and get the equivalent values in HEX, RGB, HSL, CMYK, OKLCH, and others for use in different design tools.
- Verify WCAG contrast — Check foreground/background pairs against WCAG 2.1 thresholds and get an accessible color recommendation.
Who is ColorTools for?
- UI/UX designers who need to sample colors from images and build accessible, harmonious interfaces.
- Front-end developers writing CSS or SVG who need exact color codes and can use the gradient builder or converter.
- Digital illustrators who want to pull palettes from photos and export them as swatch sheets for Procreate or Photoshop.
- Accessibility specialists who must verify that color combinations meet WCAG 2.1 AA/AAA requirements.
How does ColorTools work?
- Upload — Drag and drop an image onto the canvas, or click to browse. Supported formats are JPG, PNG, WebP, and SVG.
- Preview — Move the cursor (or finger on mobile) over the image; a magnifying loupe shows the pixels under the pointer.
- Pick — Click or tap to lock a color. The panel displays the color’s HEX, RGB, HSL, HSV, and CMYK codes.
- Manage — Each picked color lands in the history strip. Edit colors with the HSV editor, remove unused ones, and export the palette as PNG, JSON, CSS variables, or a HEX list.
Pricing
ColorTools is free with no signup, no ads, and no hidden costs. All tools are available to use in the browser.
FAQ
What is an image color picker?
An image color picker is a tool that lets you upload a photo or screenshot and sample the exact color of any pixel. ColorTools takes this further by showing the color in HEX, RGB, HSL, HSV, and CMYK, and adding a loupe for pixel-precise selection.
How do I get the HEX code of a color from an image?
Upload your image using the drop zone, hover over the area you want — a magnifying loupe appears — then click to lock the color. The HEX code (like #2D7FF9) appears in the right panel and can be copied with one click.
What is the difference between ColorTools and Google's color picker?
Google’s color picker (found in search results) is a standalone HSL/hex editor for tweaking a known color. It cannot extract colors from an image. ColorTools fills that gap by letting you upload an image and pick exact colors from it, while also providing a history strip, export options, and a loupe.
What HTML color formats does ColorTools support?
The picker outputs all common CSS color formats: HEX (#rrggbb), RGB (rgb(255,87,51)), HSL (hsl(216, 94%, 58%)), HSV, and CMYK. You can copy any format with one click. The separate converter accepts even more formats, including OKLCH.
Does ColorTools work on mobile?
Yes. The image color picker is fully touch-optimized: drag a finger to preview colors with a loupe that floats above your finger, then lift to pick. You can also pinch-zoom for more precise sampling on small screens.
Related Color Tools
ColorTools is part of the colorpicker.cx family of utilities:
- Color Wheel — explore 9 harmony modes and build palettes.
- Palette Generator — generate balanced multi-color palettes with golden-angle distribution.
- Gradient Generator — build CSS linear, radial, and conic gradients.
- Color Converter — convert between HEX, RGB, HSL, CMYK, OKLCH, and 8 other formats.
