Color picker (HEX, RGB, HSL, OKLCH)
Pick a color on the saturation–brightness square or type HEX, RGB, HSL, or OKLCH. All formats stay in sync, with a tint/shade scale, eyedropper (Chromium), and exportable palettes for CSS and JSON.
How to pick and export colors
1. Drag on the color square and hue slider, or paste a HEX/RGB/HSL/OKLCH value.
2. Read synchronized HEX, RGB, HSL, and OKLCH in the summary bar.
3. Click a shade or a harmony swatch to explore related colors.
4. Copy a value, copy a shareable ?hex= link, or export CSS variables / JSON.
Color picker examples
Brand terracotta #8F665E
HSV picker keeps hue stable while you darken for hover. Export --color and --shade-* as CSS variables for a design token file.
Analogous dashboard palette
Choose Analogous to get hues ±30° and ±60°. Copy the strip as CSS custom properties for charts and cards that feel related, not identical.
OKLCH for even steps
The shade ramp varies OKLCH lightness so steps look more even than mixing HEX with white. Use oklch() in modern CSS when you need perceptual ramps.
When to use this tool
• When you pick UI colors and need HEX, RGB, HSL, and OKLCH at once.
• When you generate hover/muted shades from one brand hue.
• When you export a small palette (harmony + ramps) into CSS variables.
Harmonies for UI palettes
Complementary hues sit 180° apart — strong contrast, use sparingly for CTAs. Analogous hues (±30–60°) feel cohesive for dashboards. Triadic and tetradic sets give more variety; drop saturation on extras so the primary still leads. Pair any scheme with the WCAG contrast checker before shipping text colors.
Frequently asked questions
HEX vs RGB vs HSL vs OKLCH?
HEX and RGB are the same sRGB color. HSL is handy for hue/lightness tweaks. OKLCH is a perceptual space: similar L steps look more even to the eye, and it is valid in modern CSS as oklch().
Does the eyedropper work in every browser?
The EyeDropper API is available in Chromium-based browsers (Chrome, Edge). Elsewhere, type a value or use the visual picker.
Can I share a color?
Yes. The URL updates with ?hex=RRGGBB. Copy the link to reopen the same color.
Are colors processed on a server?
No. Conversion, harmonies, and export run locally in your browser.