An HTML color picker is any tool that gives you the exact code for a color, such as #1E90FF, so you can use it in HTML and CSS. The fastest free options are the eyedropper in Chrome DevTools, Google’s built-in color picker, and the HTML <input type="color"> element. Then check the color’s contrast before you publish.
Last updated: October 2026 ยท How we researched this: we checked MDN’s docs on the color input and EyeDropper API, the W3C WCAG contrast guidance, and the official docs for Chrome DevTools and Microsoft PowerToys.
Key takeaways
- Hex, RGB and HSL can describe the same color. Pick the format that is easiest for your task.
- Use HSL when you need lighter or darker shades of one brand color.
- Chrome DevTools has a free eyedropper that grabs any color on a web page.
- Body text needs a contrast ratio of at least 4.5:1 against its background for WCAG AA.
- To add a picker to your own form, use
<input type="color">.
HTML color codes explained: hex, RGB, HSL and names
Every HTML color picker shows the same color in a few formats. Here is the same blue (CSS name dodgerblue) written four ways.
| Format | Example | Best for |
|---|---|---|
| Hex | #1E90FF | Copying between design tools and CSS |
| RGB | rgb(30 144 255) | Adding transparency, e.g. rgb(30 144 255 / 50%) |
| HSL | hsl(210 100% 56%) | Making tints and shades by changing lightness |
| Named color | dodgerblue | Quick tests; only 140+ names exist |
| OKLCH | oklch(...) | Modern CSS palettes with even brightness steps |
How hex codes work
A hex code has three pairs: red, green and blue. Each pair runs from 00 (none) to FF (full). So #FF0000 is pure red and #000000 is black.
Why designers like HSL
HSL stands for hue, saturation and lightness. Keep the hue and saturation, then change only lightness to get a button hover color or a light background. This keeps a palette consistent with your brand.
Best free HTML color picker tools in 2026
| Tool | Where it works | Picks from screen? | Good for |
|---|---|---|---|
| Chrome DevTools color picker | Chrome, Edge | Yes (web page) | Grabbing colors from any site |
| Google search color picker | Any browser (search “color picker”) | No | Quick hex to RGB/HSL conversion |
| Microsoft PowerToys Color Picker | Windows | Yes (whole screen) | Picking from apps, images, PDFs |
| Digital Color Meter | macOS (built in) | Yes (whole screen) | Reading RGB values on a Mac |
| Adobe Color / Coolors | Web | From uploaded image | Building full palettes |
| ColorZilla | Chrome and Firefox extension | Yes (web page) | Eyedropper plus gradient tools |
How to pick a color from any website with Chrome DevTools
- Right-click the element and choose Inspect.
- In the Styles pane, click the small color square next to any color value.
- Click the eyedropper icon, then click anywhere on the page.
- Click the format label to cycle between hex, RGB, HSL and more, then copy the code.
Google documents this in its DevTools color guide. On Windows, the PowerToys Color Picker does the same for your whole screen with Win+Shift+C.
How to add an HTML color picker to your own page
HTML has a native color input. Add <input type="color" value="#1e90ff"> and the browser shows its own picker. No library is needed.
- The default value is black (
#000000) if you leavevalueempty. - The value you read in JavaScript is usually a lowercase seven-character hex code.
- Listen to the
inputevent for live updates, orchangefor the final choice. - Newer
alphaandcolorspaceattributes are rolling out; check support first.
See MDN’s input type=color reference for details. Chromium browsers also offer the experimental EyeDropper API, which lets a button on your page sample any pixel on screen. It only works over HTTPS and is not supported everywhere.
Want to test this code right now? Paste it into one of the online JavaScript editors we compared.
Color picker checklist: is your HTML color readable?
A nice color is useless if people cannot read text on it. The W3C’s WCAG contrast guidance sets clear minimums.
- Normal text: at least 4.5:1 contrast with the background (level AA).
- Large text (about 24px, or 18.66px bold): at least 3:1.
- Buttons and icons: aim for 3:1 against nearby colors.
- Do not rely on color alone for errors or links. Add an icon or underline too.
- Check dark mode separately; a color that works on white may fail on black.
Chrome DevTools shows the contrast ratio right inside its color picker for text elements. This is the quickest check before you ship an email template or landing page.
Common mistakes with HTML color pickers
- Picking colors from a compressed JPG. Pixels near edges can be slightly off; zoom in or use the source file.
- Mixing color profiles. A color from a design app may look different in the browser.
- Using too many colors. Most brands need one main color, one accent and a few greys.
Brand colors matter for marketing too. Our digital marketing strategy guide covers consistent branding, and our Shopify store setup guide shows where to add theme colors.
Html Color Picker FAQ
How do I find the HTML color code of an image?
Open the image in your browser and use a screen eyedropper such as PowerToys Color Picker on Windows or Digital Color Meter on Mac. You can also upload it to Adobe Color or Coolors to extract a palette.
What is the difference between hex and RGB?
They describe the same red, green and blue values. Hex writes them in base 16, like #1E90FF, while RGB writes them as numbers from 0 to 255, like rgb(30 144 255).
Does Google have a color picker?
Yes. Search for color picker on Google and a tool appears at the top of the results. It converts between hex, RGB, HSL, HSV and CMYK, but it cannot sample colors from your screen.
How do I make a color picker in HTML?
Use the input element with type set to color and give it a default hex value. The browser shows its native picker, and you can read the chosen hex code with JavaScript.
Conclusion
The best HTML color picker is often one you already have: Chrome DevTools, Google’s search tool or your operating system’s eyedropper. Copy the code in the format that fits your job, use HSL for shades, and always check contrast before you publish.
