Color Picker
Interactive color picker — drag to select colors and get HEX, RGB, HSL codes
How to Use
- Click the color picker above or use the system color dialog to choose a color
- The HEX, RGB, and HSL codes will update instantly below
- Click the "Copy" button next to any code to copy it to your clipboard
- You can also type a HEX code manually to update the picker
- Your last 10 selected colors are saved in the history for quick reuse
FAQ
What is a Color Picker?
A Color Picker is an interactive tool that lets you choose colors visually and obtain the corresponding color codes. It's commonly used in web design, UI design, and graphic design workflows.
What's the difference between HEX, RGB, and HSL?
HEX is a hexadecimal color code (e.g., #FF5733), most commonly used in CSS. RGB represents colors using red, green, and blue channel values (e.g., rgb(255, 87, 51)). HSL uses hue, saturation, and lightness (e.g., hsl(11, 100%, 60%)), which is more intuitive to adjust.
How do I use these color codes in CSS?
All three formats can be used directly in CSS color, background-color, and other properties. For example: color: #FF5733; or color: rgb(255, 87, 51); or color: hsl(11, 100%, 60%);. All modern browsers support these three formats.