Color Picker & Color Converter
Pick any color visually and instantly convert it between HEX, RGB, HSL, HSV, and CMYK. Check WCAG contrast ratios for accessibility compliance and extract colors directly from uploaded images.
Color Picker
Opacity
#3B82F5
Color Formats
Contrast Checker
Contrast ratio
21.00:1
Pick from Image
How to use this tool
- Drag the circle on the color canvas to choose a hue, saturation, and brightness, or move the hue slider below it.
- Edit any format input — HEX, RGB, HSL, HSV, or CMYK — and all other fields will update immediately.
- Click the copy icon next to any format to copy that value to your clipboard.
- Use the Contrast Checker section to paste two colors and see their WCAG AA and AAA pass/fail rating for accessible text.
- Upload an image with the 'Pick from image' section, then click any pixel to extract its color into all format fields.
Why use our Color Picker & Color Converter?
Whether you're building a design system, checking accessibility compliance, or matching brand colors in code, you need a fast and accurate color tool. This converter runs entirely in your browser — no images or color data are ever sent to a server.
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL?
HEX (#3b82f6) is the compact notation used in CSS and HTML — three pairs of hexadecimal digits encoding red, green, and blue channels. RGB (rgb(59, 130, 246)) makes those channels explicit as decimal numbers from 0 to 255. HSL (hsl(217, 91%, 60%)) describes the same color as Hue (0–360°), Saturation (%), and Lightness (%) — a more intuitive model when you want to adjust brightness or create color harmonies without touching each channel separately.
What is CMYK and when should I use it?
CMYK stands for Cyan, Magenta, Yellow, and Key (Black). It is a subtractive color model used in physical printing, where inks are mixed on paper rather than lights combined on a screen. Use CMYK values when preparing artwork for a professional print shop or offset printing workflow. Note that the RGB-to-CMYK conversion shown here is a mathematical approximation — professional print production requires an ICC color profile specific to the target printer and paper.
What does WCAG AA and AAA mean for contrast?
WCAG (Web Content Accessibility Guidelines) defines contrast ratio thresholds for readable text. AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA is the stricter level, requiring 7:1 for normal text and 4.5:1 for large text. Passing AA is the legal requirement in many jurisdictions; AAA is best practice for maximum readability.
What is the difference between HSL and HSV?
Both HSL and HSV describe color in terms of Hue and Saturation, but they define the third axis differently. HSL uses Lightness — at 100% lightness the color is always white regardless of hue. HSV (also called HSB) uses Value/Brightness — at 100% value the color is fully saturated and bright, not white. HSV maps more naturally to how painters think about mixing color; HSL is common in CSS. Internally this tool stores color as HSV for accurate canvas representation.
Why are CMYK values approximate?
Screen colors are defined in the sRGB color space, while CMYK is device-dependent — the same CMYK values produce different printed colors on different printers, inks, and paper types. The conversion shown here uses the standard mathematical formula (subtract each RGB channel from white, then scale by the key channel), which gives a reasonable starting point but will not exactly match what a professional RIP or print driver would produce with a calibrated ICC profile.
Related Tools
Markdown to HTML
Convert Markdown to HTML instantly. Supports GFM tables, task lists, and code blocks.
YAML to JSON Converter
Convert between YAML and JSON instantly. Auto-detects direction — all in your browser.
Base64 Encoder / Decoder
Encode and decode Base64 text quickly and easily.
Cron Expression Builder
Build, test, and understand cron expressions with a visual builder and next run times.
Recently Visited Tools
JWT Decoder
DeveloperDecode and inspect JWT tokens. Verify HS256 signatures and check token expiry — all in your browser.
Cron Expression Builder
DeveloperBuild, test, and understand cron expressions with a visual builder and next run times.
CSS Gradient Generator
DeveloperCreate linear, radial and conic CSS gradients with a live visual editor. Copy the CSS code instantly.