Pick any color and instantly get HEX, RGB, HSL, CMYK values. Generate tints, shades, harmonies and check contrast ratios.
Our free online color picker is the most feature-rich color tool available for designers and developers. Simply pick any color using the visual picker or type a HEX code, and instantly get every color format you need — HEX, RGB, RGBA, HSL, HSLA, CMYK and HSV — all updated in real-time with a single click.
Whether you are building a website, designing a mobile app, creating a brand identity, or preparing assets for print — this tool gives you every color value in seconds. No software installation, no account, no hassle. Just open the page and start picking colors instantly.
Unlike basic color pickers that only show a HEX code, our advanced tool goes far beyond. You get live tints and shades, color harmony suggestions, WCAG accessibility contrast checking, approximate color naming, luminance detection, and a history of your recent colors — all in one clean, fast interface.
Click the large color swatch at the top to open the native color picker. Choose any color visually, or type a known HEX code directly into the HEX input field. The tool updates every value instantly.
Fine-tune your color using the Red, Green and Blue sliders. Each slider shows a live gradient so you can see exactly how adjusting each channel affects the final color in real-time.
Use the RGB / HSL / CMYK / HSV tabs to enter or view values in your preferred color model. All values stay in sync — change one and all others update automatically.
In the "All Color Formats" card, every format has its own Copy button. Click once to copy the exact string — ready to paste into your CSS, Figma, Photoshop, or any design tool.
Scroll down to see 9 automatic tints, 9 shades, and four types of color harmonies — complementary, triadic, analogous and split-complementary. Click any swatch to instantly set it as your active color.
The WCAG Contrast Checker card shows whether your color meets AA accessibility standards with both white and black text. This is essential for ensuring readable UI designs for all users.
HEX, RGB, RGBA, HSL, HSLA, CMYK, HSV and CSS variable — all instantly updated as you pick any color.
Auto-generate 9 tints (lighter) and 9 shades (darker) of any color. Click to select any shade as the active color.
Instantly see complementary, triadic, analogous and split-complementary color schemes for any color you pick.
Check if your color meets Web Content Accessibility Guidelines (WCAG) AA and AAA contrast standards for text readability.
The tool automatically identifies the closest common color name — like Royal Blue, Coral, Teal — for any color you pick.
Your last 10 picked colors are saved as clickable swatches so you can quickly switch back to any previous color.
Every color format has its own Copy button. Click once and the value is copied to your clipboard, ready to paste anywhere.
All calculations happen locally in your browser. No data is stored or sent to any server. No account needed, forever free.
HEX is the most common format for web design. It represents colors as a 6-digit hexadecimal code (e.g. #1A56DB) and is used in HTML, CSS and most design software. It is compact and easy to copy-paste.
RGB (Red, Green, Blue) defines colors by how much red, green and blue light are mixed, each on a scale from 0 to 255. It is the native color model of screens and monitors. RGBA adds an Alpha channel (0–1) for controlling opacity, making it essential for transparent overlays in CSS.
HSL (Hue, Saturation, Lightness) is often the most intuitive model for designers. Hue is the color angle on the wheel (0–360°), Saturation controls how vivid the color is, and Lightness controls how light or dark it is. HSLA adds opacity support. HSL makes it very easy to create consistent color palettes by adjusting only lightness or saturation.
CMYK (Cyan, Magenta, Yellow, Black) is the color model used in professional print design. Printers mix these four inks to produce colors on paper. If you are designing for print — business cards, flyers, posters — you will need CMYK values instead of RGB or HEX.
HSV (Hue, Saturation, Value) is similar to HSL but used differently in image editing software like Photoshop and GIMP. The Value channel represents brightness, making it useful for adjusting color intensity in photo editing workflows.
Manually converting between color formats is tedious and error-prone. A simple mistake in a HEX code can completely change a color, and calculating HSL from RGB by hand requires multiple mathematical steps. Our online color picker eliminates all of this instantly — just pick a color and all formats are calculated automatically.
Designers use color pickers to ensure brand consistency across platforms — a color that looks great on screen needs to be correctly specified in CMYK for print, RGB for digital, and HEX for web code. Having all values in one place eliminates the risk of color discrepancies across different media.
Developers use color pickers to quickly grab CSS-ready values without switching between apps or doing manual conversions. The one-click copy buttons make it effortless to drop exact color values directly into stylesheets or design tokens.
The WCAG (Web Content Accessibility Guidelines) requires a minimum contrast ratio of 4.5:1 between text and its background for normal-sized text to be readable by people with low vision or color blindness. For large text, the minimum is 3:1. The stricter AAA standard requires 7:1 for normal text.
Our built-in WCAG Contrast Checker shows you the contrast ratio of your selected color against both white and black text, and clearly shows whether it passes or fails the AA standard. This is especially important for UI designers building products that need to comply with accessibility laws and guidelines such as ADA, Section 508 or EN 301 549.
As a general rule — light colors with high luminance work better with dark (black) text, while dark colors with low luminance work better with white text. Our luminance badge and contrast pills give you an instant visual indication of this every time you pick a color.