🎨 Color Picker
Select any color and get HEX, RGB, HSL and CMYK codes instantly — with color harmonies, WCAG contrast checker and CSS export.
Color Picker
Color Harmonies
WCAG Contrast Checker
CSS Export
About This Color Picker
A color picker is a browser-based tool that lets designers and developers select any color and retrieve its precise values across HEX, RGB, HSL and CMYK formats. This color picker also generates color harmonies, checks WCAG contrast ratios and exports ready-to-use CSS custom properties.
This color picker calculates all four color formats — HEX, RGB, HSL and CMYK — simultaneously as you select a color, updating in real time without any button press. Calculates all color formats and harmonies client-side in under a millisecond, with no server upload and no document size limit.
The color harmonies panel generates five academically defined harmony relationships from any picked color: Complementary (the color directly opposite on the wheel, maximising contrast), Analogous (two adjacent colors that sit within 30° on either side), Triadic (three colors spaced 120° apart for vibrant tension), Split-Complementary (two colors flanking the complement for a softer contrast), and Tetradic (four colors in a 90° square pattern for rich, balanced palettes). All five are recalculated in HSL space on every color change — no external libraries, no API calls.
The built-in WCAG contrast checker evaluates your color as a foreground against any background, reporting the luminance contrast ratio and pass/fail status against all four WCAG 2.1 thresholds — AA Normal Text (4.5:1), AA Large Text (3:1), AAA Normal Text (7:1) and AAA Large Text (4.5:1). Accessibility compliance is checked before you commit to a palette, not after.
How to Use This Color Picker
How the Color Picker Works
- Click the large color swatch to open the native color picker interface.
- Select any color using the visual picker, or enter a HEX value directly into the browser's color input.
- Copy HEX, RGB, HSL or CMYK values individually using the Copy buttons, or use Copy All to get all four formats as a text block.
- Explore color harmonies — click any harmony swatch to set it as the active color and see its format values instantly.
- Check WCAG contrast ratio by adjusting the foreground and background color inputs in the contrast checker panel.
Use our CSS Gradient Generator to put your picked colors to work in linear, radial and conic gradients.
The CSS export panel generates three custom property variants ready for any modern design system: --color-primary for direct CSS use, --color-primary-rgb for rgba() transparency functions, and --color-primary-hsl for hsl() manipulation. The Tailwind config format outputs the color as a theme extension entry, compatible with Tailwind CSS v3 and v4 projects.
Who Uses a Color Picker
A color picker sits at the intersection of design and development workflows — used daily by professionals across every discipline that involves visual output on screen.
- UI/UX designers select brand and interface colors and verify them across formats before handing off specs to developers.
- Web developers convert colors between CSS formats — from design tools that output HEX to codebases that use RGB or HSL custom properties.
- Graphic designers build consistent color palettes using harmony relationships, then bridge print (CMYK) and screen (RGB/HEX) requirements from a single tool.
- Accessibility specialists check WCAG contrast compliance before approving color combinations for interfaces used by users with low vision or color blindness.
- Front-end engineers generate CSS custom property blocks for design tokens, reducing setup time when building or updating design systems.
Explore all our Color Tools for more browser-based color processing tools.
Frequently Asked Questions
What is a color picker?
A color picker is a browser-based tool that lets designers and developers select any color and retrieve its precise values across HEX, RGB, HSL and CMYK formats. This color picker also generates color harmonies across five relationship types, checks WCAG contrast ratios against any background, and exports ready-to-use CSS custom properties — all calculated client-side with no server upload.
How do I convert a color to HEX or RGB?
Use the color picker swatch to select your color visually, then copy the HEX or RGB value from the format row. All four formats — HEX, RGB, HSL and CMYK — are calculated simultaneously and updated in real time. Click the Copy button next to any format row to copy it to your clipboard, or click Copy All Formats to get all four values at once as a text block.
What is WCAG color contrast?
WCAG (Web Content Accessibility Guidelines) color contrast defines the minimum brightness difference between foreground text and its background to ensure readability for users with low vision. WCAG 2.1 requires a 4.5:1 contrast ratio for normal text (AA) and 7:1 for AAA. Large text has lower thresholds: 3:1 for AA and 4.5:1 for AAA. The contrast checker calculates the ratio using the WCAG relative luminance formula and shows pass/fail status for all four standards simultaneously.
What are color harmonies?
Color harmonies are sets of colors that are aesthetically cohesive together, based on their angular relationships on the HSL color wheel. Five types are generated: Complementary (180° apart, maximising contrast), Analogous (±30°, neighboring colors), Triadic (120° apart, three-color tension), Split-Complementary (±150°/210°, softer than complementary), and Tetradic (90° square pattern, four-color palette). All calculations use pure HSL color math — click any harmony swatch to set it as your active color.
What is the difference between HEX, RGB, HSL and CMYK?
HEX is a 6-digit hexadecimal code used in CSS and HTML (e.g. #FF6500). RGB defines color as red, green, blue channel values from 0 to 255. HSL defines color as hue (0–360°), saturation (0–100%) and lightness (0–100%) — the most intuitive format for adjusting colors programmatically. CMYK (cyan, magenta, yellow, black) is the standard for print design. Web development uses HEX and RGB most commonly; HSL is increasingly used in CSS custom property systems; CMYK is for print and production workflows.
Can I use this color picker for web design?
Yes. This color picker is built specifically for web design workflows. It outputs HEX and RGB values ready for CSS, generates HSL for custom property systems, and exports a complete CSS custom property block. The Tailwind config format is available for Tailwind CSS projects. The WCAG contrast checker validates color combinations against accessibility standards before you ship, removing a manual verification step from the design review process.
What is a CSS custom property for colors?
CSS custom properties (CSS variables) store reusable values in your stylesheet, prefixed with --. For colors, a setup like --color-primary: #FF6500; lets you reference var(--color-primary) throughout your CSS. This color picker exports three variants: --color-primary for direct use, --color-primary-rgb for rgba() transparency functions (e.g. rgba(var(--color-primary-rgb), 0.5)), and --color-primary-hsl for hsl() manipulation — covering all common patterns in modern CSS design systems.