🎨 Click the big color bar or any shade to copy its HEX code.
Why getting the exact color code matters
A color that looks almost right on screen can still be the wrong color in your design, your brand, or your code. Small differences are hard to spot by eye, especially across different screens, but the code never guesses. Copying the exact HEX, RGB, or HSL value keeps a button, a logo, and a background matching everywhere they appear. It also makes a color easy to reuse, share with someone else, and find again later.
What to do, step by step
- Pick your color with the color bar above, or type a HEX code into the box if you already have one.
- Check the large swatch first and adjust until the color looks right on screen.
- Choose the format your task needs: HEX for most web work, RGB for transparency, or HSL for easy palette tweaks.
- Click Copy next to that code and paste it straight into your design, stylesheet, or document.
- Try the shades row for lighter and darker versions that still belong to the same color family.
Color code tips
When should I use HEX vs RGB vs HSL?
HEX is the web standard — shortest for solid colors. RGB is handy when you need transparency (rgba). HSL is the most human-friendly: tweak hue, saturation, and lightness independently to build palettes.
How do I make shades of a color?
The row of shades below the codes is generated from your color automatically — click any shade to copy it. Darker shades lower the lightness, lighter ones raise it.
More free tools
Get a free tech tip every morning 💡
Join thousands of readers. Plus get our 365 Tech Tips e-book free when you sign up.
Free forever. No spam. Unsubscribe anytime.