Color Picker
Pick and copy any color in any format.
Overview
The Color Picker is a no-friction swatch tool that lets you pick a colour visually and copy it in every common format — hex (3, 4, 6, 8 digit), rgb(), rgba(), hsl(), hsla(), OKLCH, HSV and the bare integers — with a single click. The eyedropper, sliders and direct hex input all stay in sync as you tweak the swatch.
It is the everyday tool for developers grabbing a colour from a mock-up, designers iterating on a UI accent, or anyone who needs to translate the same colour into the format their tooling expects (Tailwind hex, CSS rgba, Figma HSL). Recent picks stay in a strip so you can compare and copy without losing your starting point.
How it works
The picker tracks the colour in sRGB internally and converts on the fly to the alternative spaces using the standard transforms — HSL/HSV via channel ordering, OKLCH via the OKLab matrix, and CSS-conformant decimal formatting for the percentage-based outputs. Alpha defaults to 1 and is only shown in the output when the user explicitly enables transparency.
Each output format respects the canonical syntax: lowercase hex, no leading zeros in rgb() channels, percentage signs where required, and degrees on the hue components. The clipboard payload is exactly the string shown in the field, so you can drop it straight into CSS without reformatting.
Examples
swatch → hex #336699
→ rgb rgb(51, 102, 153)
→ hsl hsl(210, 50%, 40%)
→ oklch oklch(48.3% 0.087 250.8)
FAQ
Does the browser eyedropper work everywhere?
The native EyeDropper API is available in Chromium-based browsers and recent Safari builds. On other browsers the tool falls back to the colour-swatch input.
How do I copy with alpha?
Enable the alpha slider and the output formats switch to their alpha variants (rgba(), hsla(), eight-digit hex). With alpha at 1 the shorter forms are used to keep CSS clean.
Why is the OKLCH output slightly different after a round-trip?
OKLCH covers more colours than sRGB, so converting oklch() → hex → oklch() quantises to the displayable gamut and loses a tiny amount of precision in the chroma channel.
Can I save colours between sessions?
Recently picked swatches are kept in browser storage, so they survive a reload. For longer-term storage use the saved-palettes tool.
Do you support the new CSS color() function?
The picker focuses on the formats most commonly needed for production CSS. Display-P3 and other wide-gamut outputs are available through the OKLCH editor.