๐Ÿ“ข Top Banner Ad ยท 728ร—90
๐ŸŽจ

Color Picker โ€“ HEX, RGB, HSL Color Picker Online

Pick any color and instantly get HEX, RGB, HSL, and CMYK values. Explore shades, tints, complementary colors, and save your color history. Copy any value with one click.

๐Ÿ†“ FreeHEX RGB HSL CMYK๐ŸŽจ Shades & Tints๐Ÿ“œ History

๐ŸŽจ Color Picker

Click any value to copy
#1a73e8
๐ŸŽจ Shades & Tints
๐Ÿ”„ Complementary Colors
๐Ÿ“œ Color History
Pick colors to build history
๐Ÿ“ข Responsive Mid Ad ยท 728ร—90 / 320ร—50

โ“ Frequently Asked Questions

What is the difference between HEX, RGB and HSL?
HEX uses a 6-digit hexadecimal code (#RRGGBB) and is the most common format in web CSS. RGB specifies red, green, and blue channels each from 0โ€“255. HSL (Hue, Saturation, Lightness) is the most intuitive for designers โ€” hue is the color angle (0โ€“360ยฐ), saturation is intensity, and lightness controls brightness from black to white. All three represent the same color space and can be converted between each other.
How do I use a color code in CSS?
In CSS you can use HEX directly: color: #1a73e8. Or RGB: color: rgb(26, 115, 232). Or HSL: color: hsl(217, 79%, 51%). Modern CSS also supports oklch() and color() for wider gamut displays. Click any value in this tool to copy it directly to your clipboard, then paste it into your CSS file.
What are complementary colors?
Complementary colors sit opposite each other on the color wheel (180ยฐ apart in HSL hue). They create strong contrast and visual interest when used together. For example, blue and orange are complementary. This tool shows you the complement plus triadic and analogous colors to help build harmonious color schemes for your designs.