Color Picker & Converter

Visual gradient picker, image sampling, HEX/RGB/HSL/CMYK/HWB conversion, and WCAG contrast checker.

No upload — client-side only Works offline No tracking
#2563eb
HEX
RGB
HSL
CMYK
HWB
Advanced — Contrast not checked
Sample Text
Ratio: —
#2563ebHEX
Hue
0%Saturation
0%Lightness
0%Luminance

What is Color Picker & Converter?

A color picker lets you choose colors visually; a color converter translates between formats like HEX, RGB, HSL, CMYK, and HWB. This tool combines both: a visual gradient picker, image color sampling, and instant conversion across all common formats. Designers, developers, and anyone working with color can use it to match brand colors, build palettes, or prepare values for CSS, print, or design software.

All processing runs client-side—your data never leaves your browser. The WCAG contrast checker helps you meet accessibility standards by testing foreground against background. The Tints & Shades palette shows lighter and darker variants of your color. You can also use the system color picker or "Pick from Screen" (Chrome/Edge) to sample any pixel on your display.

How to Use Color Picker & Converter

  1. In Color Picker mode, drag on the gradient area to adjust saturation (left–right) and brightness (top–bottom). Drag the hue bar below to change the base color.
  2. Or use System Picker for the native OS color dialog, or Pick from Screen (Chrome/Edge) to sample any pixel on your display.
  3. Type a value in any format field (HEX, RGB, HSL) to convert—all other formats update instantly.
  4. In Pick from Image mode, upload or drag‑drop an image, then click anywhere to sample that pixel. Dominant colors are extracted automatically.
  5. Open Advanced to set a background color and check WCAG contrast ratio. Use Copy All or Ctrl+Shift+C to copy all formats at once.

Tips & Best Practices

HEX is standard for web; RGB and HSL are common in CSS. CMYK is for print; HWB is a newer alternative to HSL. The contrast checker shows AA/AAA pass/fail for normal and large text—aim for at least 4.5:1 for body text. The Tints & Shades row gives you a quick palette from a single color. Use the Copy button next to each format to copy only that value.

When to Use This Tool

Use this tool when you need to pick colors, convert between formats, or verify accessibility. It's ideal when you have a HEX value from a brand guide and need RGB for design software, or when you're sampling colors from a reference image. Choose it over cloud tools when you want privacy—no uploads or tracking. For favicons or resizing, use our Favicon Generator or Image Resizer.

Frequently Asked Questions

What is a color picker and converter?

A color picker lets you choose colors visually; a color converter translates between formats like HEX, RGB, HSL, CMYK, and HWB. ToolCrux combines both with a gradient picker, image sampling, and WCAG contrast checking—all client-side.

How do I convert HEX to RGB?

Use the color picker or type a HEX value in the HEX card. RGB, HSL, CMYK, and HWB values update instantly. All conversions happen locally in your browser—no upload, complete privacy.

What is the WCAG contrast checker?

The WCAG contrast checker tests whether your foreground and background colors meet accessibility standards. It shows the contrast ratio and AA/AAA pass/fail results for normal and large text.

Can I pick a color from an image?

Yes. Switch to the Pick from Image tab, upload or drag-drop an image, then click anywhere on it to sample the exact pixel color. Dominant colors are also extracted automatically.

Are my colors or images sent to a server?

No. All color picking, image sampling, and conversion runs client-side in your browser. Your data never leaves your device. For other image tools, try our favicon generator or image resizer.