Pick, convert, and copy colors instantly between HEX, RGB, RGBA, HSL, HSV, and CMYK using this online color picker, then generate a palette.
Pick colors, convert HEX, RGB, HSL, HSV, and CMYK formats in real time. Inspect WCAG accessibility contrast ratios, generate harmony palettes, extract dominant colors from images, and export production CSS design tokens.
Drag on the 2D canvas or pick from sliders & inputs.
Upload image, click canvas to sample pixels & extract 5 dominant colors.
Drop an image here or click to browse
PNG, JPG, WebP, SVG • Local browser rendering
Test text legibility & Web Content Accessibility Guidelines (WCAG 2.1) compliance.
Enter a Text Color (Foreground) and a Surface Color (Background) to check if your web text meets readability rules for visually impaired users and screen legibility.
Hue 217°, Saturation 76%, Lightness 60%
Click any swatch to set as the active color.
A modern web color picker enables seamless conversion across HEX, HEXA, RGB, RGBA, HSL, HSLA, HSV, and CMYK models. HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) decouple color tint from brightness, making it intuitive to fine-tune UI component themes.
HEX values (#3B82F6) use 6 or 8 hexadecimal digits for red, green, blue, and alpha. RGB specifies raw channel intensities from 0 to 255. CMYK defines cyan, magenta, yellow, and key/black percentages for print alignment, while CSS color() notation offers modern sRGB color space rendering.
Web accessibility guidelines require strict contrast between text and background. Normal body text (16px) requires a minimum 4.5:1 ratio for Level AA compliance and 7.0:1 for Level AAA. Large text (18pt+ or 14pt bold) requires at least 3.0:1 for AA and 4.5:1 for AAA.
Color wheel mathematical offsets build cohesive palettes: Complementary schemes use 180° opposite hues; Analogous schemes sample adjacent 30°–60° angles; Triadic and Tetradic schemes balance 3 or 4 colors evenly. Tint scales add white for lighter tones, while Shade scales add black for depth.
Browser-native EyeDropper APIs sample exact pixels directly from desktop display buffers. Uploaded image assets are processed locally using HTML5 Canvas pixel analysis to inspect custom coordinate colors and extract a 5-color dominant palette without server transmission.
Exporting color definitions as CSS custom properties (:root variables), Tailwind 50–950 shade scale JSON objects, and complete JSON tokens allows software developers to instantly integrate picked colors directly into production frontend codebases and design systems.
Quick answers about how this tool works.
Plain-language explainers that sit next to this tool.
Input tokens, output tokens, cached tokens and cache writes — what each one costs on GPT-6 Astra, what actually counts toward your input bill, and three worked examples showing where the money really goes.
Minification, uglification, and bundling get lumped together as "build steps," but each does something distinct. Here is exactly what each one changes in your code, with a before/after size example.
The same API endpoint can return JSON, XML, or HTML depending on one request header. Here is how Accept and Content-Type headers negotiate response format, and what a 406 actually means.
Retrying a failed GET is harmless. Retrying a failed POST can double-charge a customer. Idempotency keys are the mechanism that makes retrying a payment request safe.
Search 244+ free tools by name, or pick a category below. Every one runs instantly in your browser — no signup, nothing to install.
Tap a star to rate us instantly.
