How to use the Color Picker
- Drag in the color square and move the hue slider, type a HEX value, or use the eyedropper to grab a color from your screen.
- Click any row to copy the color as HEX, RGB, HSL or OKLCH.
- Use the shades and harmonies to build a palette, and check text contrast.
- To put the picker on your site, set its options under Embed this picker and copy the code.
Which color format should I use?
- HEX is the short form used across CSS and design tools.
- RGB gives the red, green and blue channels, useful when a tool asks for numbers.
- HSL is easier to adjust by hand: change the lightness to get a tint or a shade.
- OKLCH is perceptually even, so equal lightness steps look equal. All current major browsers support it.
Embedding the picker
The embed code is one self-contained custom element with no library and no outside requests. Paste it into any page, listen for the input event, and read event.detail.value. Its styles live in a shadow root, so they can’t clash with your site. In Webflow, Copy to Webflow pastes it as an Embed element.
Need more? Convert values with the Color Converter, blend two colors with the Color Mixer, pull a palette from a photo with the Image Color Palette, or check legibility with the Contrast Checker.
Also searched as: html color picker, hex color picker, rgb color picker, online color picker, color picker from screen, embed color picker, color picker javascript.
Tools that pair well with the Color Picker
- CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
- Tailwind Color Generator — Paste one brand color and get a balanced 11-step shade scale (50 to 950) built in OKLCH — with contrast hints and exports for Tailwind v3, v4, CSS and SCSS.
- CSS Variables to Tailwind — Turn your :root color variables into a Tailwind theme in one paste — Tailwind v3 tailwind.config.js or v4 @theme, with literal values or var() references.
- Color Name Finder — Paste a HEX code to get its closest human-readable name and clean token names for your CSS, SCSS, JavaScript or Tailwind config.
Frequently asked questions
How do I pick a color from my screen?
Press the eyedropper button in the picker and click anywhere on your screen. It works in Chrome and Edge on desktop. Other browsers open their own color dialog, which may include a screen picker.
Can I use the embedded picker on a commercial site?
Yes. The code is free for personal and commercial projects, with no attribution needed.
How do I read the chosen color from the embed?
Add an input event listener to the element and read event.detail.value, or read its value property at any time.
Does the embed load anything from devpack?
No. Everything is inside the snippet you paste, so it keeps working if you go offline.
Can I install Color Picker as a web app and use it offline?
Yes. Color Picker is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.