🎨 Color Picker
Pick any color and convert between HEX, RGB, HSL, HSV & CMYK instantly. Generate color harmonies, tints & shades, check WCAG contrast, simulate color blindness, and grab colors with the eyedropper. Free, instant & 100% private.
📊 RGB Channel Breakdown
🔬 Color Properties
♿ WCAG Contrast Check
How this color performs as text against white and black backgrounds.
🎨 Color Harmonies
Tap any swatch to make it the active color. Tap the code to copy.
🌗 Tints & Shades
👁️ Color Blindness Simulation
How your color appears to people with different types of color vision deficiency.
Everything You Need in a Color Tool
A complete color picker, converter, palette generator, and accessibility checker — all in one fast, private page.
Visual Color Picker
Drag the saturation/brightness box and slide the hue and opacity controls to dial in any color precisely.
7+ Format Conversions
Instant HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV and CMYK — all in sync, all one-click copyable.
Screen Eyedropper
Grab the exact color of any pixel on your screen — images, apps, or websites (Chrome, Edge, Opera).
Color Harmonies
Complementary, analogous, triadic, split-complementary, tetradic and monochromatic schemes generated instantly.
Tints & Shades
Auto-generated lighter and darker scales — perfect for building UI color systems from one base color.
WCAG Contrast
See the contrast ratio against white and black and whether it passes AA and AAA accessibility levels.
Color Blindness Sim
Preview how your color looks with protanopia, deuteranopia and tritanopia color vision deficiency.
Color Stats & Chart
RGB channel chart, luminance, brightness, temperature, and the nearest named color — at a glance.
Free & Private
No login, no limits. Everything runs in your browser; recent colors stay on your device.
Who Uses This Color Picker?
Developers, designers, artists, print professionals, and accessibility teams who work with color every day.
Web Developers
Grab CSS color values in any format and copy them straight into your stylesheet or design tokens.
Designers
Build harmonious palettes, tints, and shades, then verify contrast before handing off to engineering.
Digital Artists
Explore hues, saturation and brightness visually and capture colors from reference images with the eyedropper.
Print & Branding
Convert screen colors to CMYK for print and keep brand colors consistent across HEX, RGB and CMYK.
Accessibility Teams
Check WCAG AA/AAA contrast and simulate color blindness to ensure your UI works for everyone.
Marketers & Creators
Match brand colors for social graphics, slides, and thumbnails — find the name and code of any color fast.
Frequently Asked Questions
Everything about picking colors, converting HEX/RGB/HSL/CMYK, contrast, harmonies, and accessibility.
How do I convert HEX to RGB (or RGB to HEX)?
Just pick or type your color. This tool shows HEX, RGB, RGBA, HSL, HSLA, HSV and CMYK side by side and updates them all in real time. Type a HEX code like #2563EB into the HEX field and the RGB value rgb(37, 99, 235) appears instantly — and vice-versa. Click the copy icon next to any format to copy it to your clipboard.
What is the difference between HEX, RGB, HSL and CMYK?
HEX (#RRGGBB) and RGB (red, green, blue 0–255) are two ways to write the same screen color — RGB is an additive model used by monitors. HSL (hue, saturation, lightness) and HSV/HSB describe color in a way that's more intuitive for humans: you change the hue, then how vivid or how light it is. CMYK (cyan, magenta, yellow, key/black) is a subtractive model used for printing. This tool converts between all of them automatically.
Can I pick a color from anywhere on my screen?
Yes. In supported browsers (Chrome, Edge, Opera on desktop) an Eyedropper button appears. Click it, then click any pixel anywhere on your screen — including images, other apps, or websites — and the exact color is captured. If your browser doesn't support the EyeDropper API, you can still use the visual picker, the system color dialog, or paste a HEX/RGB value.
What is a WCAG contrast ratio and why does it matter?
Contrast ratio measures how readable text is against a background, from 1:1 (no contrast) to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG) require at least 4.5:1 for normal text (AA), 3:1 for large text, and 7:1 for the stricter AAA level. This tool shows your color's contrast ratio against both white and black and tells you which WCAG levels it passes, so you can choose accessible, readable color combinations.
What are color harmonies (complementary, analogous, triadic)?
Color harmonies are sets of colors that look good together based on their positions on the color wheel. Complementary colors sit opposite each other (high contrast). Analogous colors are neighbors (calm, cohesive). Triadic colors are evenly spaced thirds (vibrant and balanced). Split-complementary, tetradic and monochromatic schemes offer more options. This tool generates all of them from your chosen color — tap any swatch to make it your new base color.
What is the difference between tints and shades?
A tint is your color mixed with white, making it lighter and softer. A shade is your color mixed with black, making it darker and deeper. (Mixing with grey produces a tone.) Tints and shades are essential for building UI color scales — for example, button hover states, backgrounds, and borders that all derive from a single brand color. This tool generates a 6-step tint and shade scale automatically.
How does the color blindness simulation work?
Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency. The simulation applies established color-transformation matrices to approximate how your color appears to people with protanopia (red-blind), deuteranopia (green-blind), and tritanopia (blue-blind). Use it to check whether two colors that look distinct to you might be confused by colorblind users — pair color with contrast and labels for accessibility.
Does the color picker work on mobile phones?
Yes. The picker is fully touch-friendly and responsive down to very small screens (280px wide). Drag the saturation box, slide the hue and opacity sliders, and tap any swatch — everything works with touch. On mobile, data that would normally be a wide table is shown as easy-to-read cards so you never have to scroll sideways, and the live color preview stays pinned at the top so your output is always next to your input.
What does the HEX8 (8-digit hex) value mean?
HEX8 is an 8-digit hex code in the form #RRGGBBAA, where the last two digits are the alpha (opacity) channel from 00 (fully transparent) to FF (fully opaque). For example #2563EBFF is fully opaque, and #2563EB80 is about 50% transparent. It's supported in all modern CSS and is a compact way to express a color with opacity.
Is this color picker free and private?
100% free with no sign-up, no watermarks, and no limits. Everything runs entirely in your browser — no color data is ever sent to a server. Your recent colors are saved only in your own browser's local storage. It works on Chrome, Firefox, Safari, Edge, and mobile browsers.
How do I find the name of a color from its HEX code?
Type or pick your color and the tool shows the closest matching named color (from the CSS/HTML color list) in the preview area. If your color exactly matches a named color you'll see its name; otherwise you'll see the nearest one prefixed with ≈. This is handy for naming brand colors or recognising roughly what a hex code looks like.