HEX RGB Color Converter
Convert colors between HEX, RGB, and HSL, extract palettes, and sample image pixels with an eyedropper. All file processing runs locally in your browser.
Shade palette
Contrast ratio (WCAG)
Ratio: 5.17:1 · AA normal text passes · AA large text passes · AAA fails
Pick a color from an image
JPG, PNG, WebP, GIF · one file · click the image to fill the color fields
Tips
- Clicking any pixel on your uploaded image displays its exact HEX, RGB, and HSL values simultaneously.
- The tool automatically extracts a dominant color palette to help you capture branding codes from product photos.
- Built-in contrast testing checks whether your chosen foreground and background pairings meet WCAG AA standards.
How to use it
- 1 Type or paste a color code into the HEX, RGB, or HSL input fields to convert values instantly.
- 2 Upload a reference image to inspect specific pixel colors with the interactive eyedropper.
- 3 Review the generated dominant palette or test your color pair against WCAG AA contrast guidelines.
- 4 Copy the converted color values directly to your clipboard for your CSS stylesheets or graphics editors.
What you should know
Web developers, UI designers, and digital marketers constantly translate colors across formatting standards. CSS stylesheets rely on six-digit hexadecimal codes or sRGB coordinate sets for precise rendering, while designers often prefer HSL because hue, saturation, and lightness allow intuitive manipulation of tints and shades. When establishing digital storefronts or brand guidelines, matching digital assets to brand codes requires exact mathematical conversion rather than visual approximation. In addition, meeting digital accessibility standards such as WCAG AA requires calculating relative luminance ratios between text and background values to maintain readability across diverse screens.
This utility performs bi-directional conversion across HEX, RGB, and HSL models while extracting color data directly from raster images. Dropping an image into the workspace lets you inspect individual pixel coordinates with an eyedropper cursor, sample dominant color swatches, and evaluate live contrast compliance ratios. Image decoding occurs directly in client memory using the HTML Canvas API, meaning your graphics are never transmitted to external servers. Note that sampling relies on the standard 24-bit sRGB color space; wide-gamut Display P3 profiles or CMYK print profiles are mapped to standard sRGB values upon loading.
Frequently asked questions
Does converting between HEX, RGB, and HSL alter the color?
No. These formats are mathematical representations of the exact same 24-bit sRGB color space, so values translate without any loss of color accuracy.
Are my uploaded images sent to an external server?
No. Images are rendered and sampled entirely inside your web browser via local canvas processing, keeping your graphics completely private.
Can I pick colors from wide-gamut Display P3 or CMYK files?
The tool normalizes loaded graphics into standard 8-bit per channel sRGB. CMYK print files and P3 profiles are automatically converted to standard sRGB coordinates during browser rendering.
Guides
Articles and format references related to this tool.
Related tools
- EXIF Data Viewer Inspect EXIF metadata from your photos instantly. View camera models, shutter speeds, ISO, and GPS location coordinates directly inside your web browser.
- EXIF Data Remover Remove GPS coordinates, camera details, and timestamps from photos before sharing them online. Clean image metadata locally in your browser without uploads.
- Favicon Generator Generate standard ICO files and modern PNG icon packages from a single image in your browser. Copy HTML head tags instantly with complete privacy guaranteed.
- Rotate Image Rotate photos 90, 180, or 270 degrees and flip along both axes. Bake orientation directly into raw pixel data securely in your browser without uploading.
- Watermark Image Add custom text or logo watermarks to your images with position, opacity, and tile options. Process batches locally in your browser without file uploads.
- Pixelate Image Pixelate, blur, or blackout sensitive regions in your images to hide private data. Adjust censor intensity locally in your browser without uploading any file.