Colors
Color picker with HEX, RGB, HSL codes
Predefined colors
Color formats
- HEX
#3B82F6 - RGB
rgb(59, 130, 246) - HSL
hsl(217, 91%, 60%) - CSS
--color: #3B82F6; - Tailwind
bg-[#3B82F6]
Contrast (WCAG)
Normal text needs at least 4.5:1 (AA).
Shades
Share this tool
If it helped, send it to someone who needs it too.
Keep going with
More in UtilitiesAbout Ads
This site uses Google AdSense to display ads. These ads help us keep WebHerramientas completely free. Ads are managed by Google and meet strict security and privacy standards.
Ads help us keep WebHerramientas free for everyone
Free Online Colors
Pick any color with the visual picker and automatically get its code in the 5 most-used formats in design and web development: HEX, RGB, RGBA, HSL and HSLA. Useful for defining exact colors in CSS, graphic design, or when you need to convert a color code from one format to another.
Why use Colors
- Shows the color in 5 formats at once: HEX, RGB, RGBA, HSL and HSLA
- Visual picker to choose the color, no need to know the code
- Useful for converting one color format to another
- Copy any of the codes with one click
- Free, instant result as you pick the color
How to use it in 3 steps
- 1
Choose a color
Use the visual picker or type in a code you already have.
- 2
Check the formats
Review the code in HEX, RGB, RGBA, HSL and HSLA.
- 3
Copy the one you need
Copy the color format you'll use in your project.
Questions about Colors
What color formats does this tool show?
HEX, RGB, RGBA, HSL and HSLA, all calculated from the same selected color.
Can I convert a HEX code I already have to RGB?
Yes, if you know the HEX code you can type it in directly and see its equivalent in the other formats.
What's the difference between RGB and RGBA?
RGBA is the same as RGB but adds a transparency (alpha) channel; the same applies to HSL and HSLA.
Why would I choose HSL instead of HEX?
HSL (hue, saturation, lightness) is more intuitive for adjusting variations of the same color, for example making it lighter or darker without changing the hue.
Is Colors free?
Yes, Colors from WebHerramientas is 100% free. No registration or subscription required. You can use it as many times as you need at no cost.
Is it safe to use Colors online?
Yes, all information is processed directly in your browser. We do not store or send your data to any external server.
Does Colors work on mobile?
Yes, the tool is fully responsive and works on any device: phone, tablet or computer with a modern browser.