Color Picker Pro
Advanced color picker with multiple format support
Color Formats
Color Harmony
Color Picker Pro
Advanced color picker with multiple format support
Features
- Pick colors via hue, saturation, lightness sliders or paste a HEX, RGB, or HSL value to sync all channels instantly
- Output six formats simultaneously: HEX, RGB, RGBA, HSL, HSLA, and CMYK (printer-ready, no profile embedding)
- WCAG 2.1 contrast ratio against any test text color, with AA (4.5:1) and AAA (7:1) pass/fail badges using relative luminance per W3C formula
- Color harmony generator producing complementary, triadic, analogous, and monochromatic variants from the current hue
- Curated palettes including Material Design, Tailwind CSS, and an accessibility-focused high-contrast set
- Local color history with up to 20 recent picks persisted to localStorage (cleared on demand, never synced)
- Alpha channel support for RGBA and HSLA outputs ready to drop into CSS custom properties
- Random sample colors and one-click copy for any individual format string
How to use
- Drag the hue, saturation, and lightness sliders to home in on a shade, or paste a known HEX value into the input to drive the picker from a known starting point.
- Adjust the alpha slider if you need transparency for an overlay, glass effect, or design token.
- Open the Formats panel to see HEX, RGB(A), HSL(A), and CMYK side by side and copy the one your stack expects.
- Toggle the Accessibility panel and set a test text color to verify the WCAG contrast ratio meets AA or AAA before shipping the pair as a UI token.
- Open Color Harmony to grab complementary, triadic, or analogous companions for building a balanced palette.
- Add picks to History as you experiment; click any swatch to recall it later in the session.
Tips & Best Practices
- Preview changes in real-time as you adjust the settings.
- Copy the generated code directly into your CSS stylesheet.
- Test your designs in both light and dark mode for accessibility.
- Use the browser developer tools alongside this tool for live testing.
- Save your favorite configurations for quick access later.
FAQ
Why does the same HEX show different RGB values in other tools?
Color values can be specified in sRGB or display-P3 color spaces, and browsers may render them differently depending on monitor calibration and ICC profiles. This picker uses sRGB, the default assumed by CSS Color Module Level 3, and rounds to 8-bit channels (0–255). For wide-gamut design system tokens, use a P3-aware tool and convert with color() notation from CSS Color Level 4.
How is the WCAG contrast ratio calculated?
The ratio uses the W3C relative luminance formula: each sRGB channel is linearized (sRGB-to-linear gamma), weighted by 0.2126R + 0.7152G + 0.0722B, then the lighter and darker luminances are combined as (L1 + 0.05) / (L2 + 0.05). AA passes at 4.5:1 for normal text and 3:1 for large text; AAA passes at 7:1. The math runs in your browser on the current foreground/background pair.
Is anything sent to a server when I pick a color?
No. Color conversions, palette lookups, contrast math, and history all run client-side in JavaScript. The only persistent storage is localStorage for history, which lives on your device and never leaves it. You can use the tool offline once the page is cached.
Why does the CMYK output not exactly match my Pantone or Adobe values?
CMYK is device-dependent and requires an ICC profile to be accurate for print. Browser tools cannot embed a CMYK profile, so the output here is a naive sRGB-to-CMYK conversion useful for quick reference only. For production print work, generate CMYK in Photoshop or Illustrator with your printer's profile, or ask your print shop for verified swatches.
How does the harmony generator pick its colors?
The generator rotates the current HSL hue: complementary is +180 degrees, triadic adds two colors at +120 and +240, analogous adds neighbors at +30 and +330, and monochromatic shifts saturation and lightness. This is a mechanical color-wheel approach: it gives a starting point but does not account for perceptual uniformity, which would require Oklch or Lab color spaces.
Can I use these values directly as CSS custom properties?
Yes. The HSL output drops straight into modern CSS as `--brand: hsl(217 100% 60%)` or with alpha as `hsla(217, 100%, 60%, 0.8)`. HSL is generally preferred for design tokens because it makes lightness ramps trivial — bumping the third value gives instant hover and active states without recomputing RGB.
Does the picker support display-P3 or wide-gamut output?
Not currently. The picker assumes sRGB and outputs 8-bit-per-channel HEX/RGB. If you need P3 or Rec.2020, use a tool that emits CSS Color Level 4 syntax such as `color(display-p3 0.4 0.5 0.9)`. We may add this once browser support stabilizes across all targets.
Why did my saved color history disappear?
History persists in localStorage tied to this domain. Clearing browser data, using private/incognito mode, or switching browsers will reset it. The cap is 20 entries to avoid quota issues — older picks are evicted as new ones are added.