Color Picker
Pick colors visually with a canvas-based HSV area, hue and alpha sliders. Convert between HEX, RGB, HSL, and OKLCH with WCAG contrast checking.
How to Use
Select any color visually or by entering exact values. Every format updates in real time so you can grab the code you need instantly.
Step-by-Step Guide
- Pick a color visually: Click or drag anywhere on the large color area to adjust saturation and brightness simultaneously. The horizontal axis controls saturation (vivid to muted) and the vertical axis controls brightness (light to dark).
- Adjust the hue: Drag the rainbow-gradient hue slider to cycle through the full 360-degree color wheel, from red through yellow, green, cyan, blue, magenta, and back to red.
- Set the opacity: Use the alpha slider to adjust transparency from fully transparent (left) to fully opaque (right). The checkerboard pattern shows through at lower alpha values.
- Enter exact values: Type directly into any format field (HEX, RGB, HSL, or OKLCH). All other fields update instantly.
- Copy any format: Click the clipboard icon next to any format to copy it. The icon changes to a checkmark to confirm the copy.
- Check contrast: Review the WCAG contrast ratios shown against white and black backgrounds. Look for the green AA or AAA badges that indicate accessibility compliance.
- Use the EyeDropper: In Chromium-based browsers, click the Eyedropper button to sample any color visible on your screen.
About This Tool
Understanding Color Spaces
Colors on screens are represented using mathematical models called color spaces. Each color space describes colors differently, optimized for different workflows. This tool converts between four of the most important ones in web development.
sRGB and HEX
The sRGB color space, standardized in 1996, defines colors using three channels: red, green, and blue, each ranging from 0 to 255. HEX notation is simply a compact hexadecimal encoding of these same three values. For example, #FF6B35 decodes to rgb(255, 107, 53). sRGB covers approximately 35% of visible colors and remains the default color space for all CSS properties as of 2026.
HSL: Hue, Saturation, Lightness
HSL rearranges the sRGB cube into a cylinder. Hue is an angle on the color wheel (0-360 degrees), saturation is the vividness (0-100%), and lightness is the brightness (0-100%). HSL is intuitive for designers because adjusting a single axis produces predictable visual changes. However, HSL has a significant flaw: its lightness values do not correspond to perceived brightness. An HSL lightness of 50% produces visually different brightness levels across different hues, making it unreliable for generating accessible palettes.
OKLCH: The Perceptually Uniform Future
OKLCH, introduced in CSS Color Level 4 (supported in all major browsers since 2023), is a perceptually uniform color space. "Perceptually uniform" means that a numerical change of 0.01 in lightness produces the same visual change regardless of the starting hue. The three components are: L (lightness, 0 to 1), C (chroma, roughly 0 to 0.4, representing color intensity), and H (hue, 0 to 360 degrees). OKLCH makes it trivial to generate color palettes where all shades share the same perceived brightness, which is essential for maintaining WCAG contrast ratios across an entire design system.
How WCAG Contrast Ratios Work
The Web Content Accessibility Guidelines (WCAG) 2.1 define contrast ratio as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is calculated from the linearized sRGB values using the formula 0.2126R + 0.7152G + 0.0722B, which weights green most heavily because human eyes are most sensitive to green light.
WCAG defines three compliance levels. AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt) and 3:1 for large text (18pt regular or 14pt bold). AAA requires 7:1 for normal text and 4.5:1 for large text. These thresholds ensure readability for users with low vision, which affects approximately 1 in 12 men and 1 in 200 women globally.
The HSV Color Model
The large interactive color area in this tool uses the HSV (Hue, Saturation, Value) model rather than HSL. In HSV, the top-right corner represents the pure hue at full saturation and maximum brightness (value). Moving left decreases saturation (adding white), and moving down decreases value (adding black). This is the same model used by Adobe Photoshop, Figma, and Sketch, making it familiar to designers and producing more intuitive visual results than HSL when picking colors by hand.
Why Use This Tool
Color selection tools exist everywhere, but most lack the combination of precision, modern color space support, and accessibility awareness that professional work demands. Here is why this tool is different:
- OKLCH support: Most online color pickers only offer HEX, RGB, and HSL. This tool includes OKLCH, the perceptually uniform color space used in modern CSS, enabling you to build palettes with predictable contrast ratios across all hues.
- Instant two-way binding: Edit any format and every other format updates in real time. There is no "convert" button and no page reload. Type a HEX value and see the HSL, RGB, OKLCH, contrast ratios, and canvas position all update simultaneously.
- Built-in WCAG contrast checking: No need to switch between a color picker and a contrast checker. See AA and AAA compliance against both white and black backgrounds immediately as you pick colors.
- Canvas-based precision: The color area is rendered on an HTML Canvas with a full HSV gradient, giving you per-pixel color selection. This is the same rendering approach used by professional design tools like Figma and Adobe Photoshop.
- Alpha channel support: Full transparency control with a dedicated alpha slider, visible checkerboard preview, and proper alpha values in all output formats (RGBA, HSLA, HEX8, OKLCH with alpha).
- Complete privacy: All color math runs in your browser. No color data is sent to any server, no cookies are set, and no analytics track your color selections.