Loading…
Pick colors and copy HEX/RGB/HSL. Use for palette building; for image sampling use color-eyedropper. Input: color selection. Returns color codes. 100% client-side, files never leave browser.
Color Picker is loading — interactive editor will appear here. Use examples below to try instantly once loaded.
Press ? for keyboard shortcuts
Visual color picker with live <input type='color'>, HEX/RGB/HSL/HSV synced inputs, and palette generation (complementary, analogous ±30°, triadic 120°/240°). Shows conversions and copy buttons, all browser-native.
Designers and developers need to translate between color models and pick harmonious palettes without opening Figma. This does it instantly in the browser with no upload and one-click copy.
This tool is part of the DevStackIO platform — a collection of free online developer tools from DevStackIO. Browse more free developer resources on DevStackIO.
Frontend developers styling sites, designers picking palettes, and anyone converting a brand color between HEX/RGB/HSL.
Pick a color via the color input or type HEX/RGB/HSL directly — all fields stay synced.
View conversions (HEX, RGB, HSL, HSV) and click Copy on any.
Choose a palette type to see complementary/analogous/triadic swatches and copy them.
No upload — all math is local.
Input: #ff6600 → Output: RGB 255,102,0, HSL 24 100% 50%, complementary #0099ff.Input: HSL 210 100% 50% → Output: #007bff, RGB 0,123,255, HSV 210 100% 100%.Does it need a server? No
color math is pure JS in your browser.
Can I pick from screen?
Use Color Eyedropper for screen picking; this picker is for manual/typed colors.
Does it support alpha?
Currently opaque only; alpha is on the roadmap.
Authoritative specifications, standards, and in-depth reading for Color Picker.
#3b82f6 · rgb(59, 130, 246) · hsl(217, 91%, 60%)
Conversions
#3b82f6rgb(59, 130, 246)hsl(217, 91%, 60%)hsv(217, 76%, 96%)Complementary
#3b82f6→#f6af3cAnalogous
#3ce0f6#523cf6Triadic
#3b82f6#f63c83#83f63cBrowser-native color picker — no dependencies. Conversions use standard HSL/HSV formulas.
Pick colors from uploaded images. Use when sampling images; for conversion use color-converter, for palette use color-picker. Input: image ≤10MB. Returns HEX/RGB. 100% client-side, files never leave browser.
Check foreground/background contrast against WCAG 2.2 AA/AAA with ratio and pass/fail. Use for accessibility audits; for format conversion use color-converter, for picking use color-picker. Input: two colors. Returns ratio + grade. 100% client-side.
Compress JPEG, PNG, and WebP images in your browser. Reduce file size without visible quality loss.
Resize images by width/height or percent. Use when dimensions must change; for smaller files use image-compressor. Input: image ≤10MB. Returns resized PNG/JPEG/WebP. 100% client-side, files never leave browser.
Generate favicons (16/32/180 PNG + ICO) from one image. Use for site icons; for compression use image-compressor. Input: image ≤10MB. Returns favicon set + HTML. 100% client-side, files never leave browser.
Minify SVG by stripping metadata and whitespace. Use for smaller vectors; for raster use image-compressor. Input: SVG ≤10MB. Returns optimized SVG. 100% client-side, files never leave browser.
Generate placeholder images by size and text. Use for mockups; for editing photos use image-resizer. Input: dimensions + options. Returns PNG download. 100% client-side, files never leave browser.
Convert SVG to CSS background data URI. Use for inline icons; for image files use image-to-base64. Input: SVG ≤10MB. Returns CSS url(). 100% client-side, files never leave browser.