Colour picker
Drag to pick shades and colors
Color Formats
All format codes
223, 252, 3
12%, 0%, 99%, 1%
67°, 99%, 50%
67°, 99%, 50%
Color Preview
Quick Colors
Select any color visually and instantly get its HEX code, RGB values, and HSL notation — ready to copy and paste into your CSS, Figma, or design software. Free, no account, works in every browser.
What is a Color Picker?
A color picker is an interactive tool that lets you visually select colors and get their precise code values in multiple formats: HEX (e.g., #FF5733), RGB (e.g., rgb(255, 87, 51)), and HSL (e.g., hsl(11, 100%, 60%)). It is an essential utility for web designers, UI developers, and graphic designers who need exact color values for their projects.
Why Use Utilo's Color Picker?
- ✓Get HEX, RGB, and HSL codes simultaneously for any color
- ✓Visual color spectrum for intuitive color selection
- ✓Manual input to enter known hex or RGB values and see all formats
- ✓One-click copy for each color format
- ✓No ads or pop-ups — clean, distraction-free interface
- ✓Works on all browsers and devices
- ✓Completely free with no sign-up
Key Features
How to Use the Color Picker
- 1Click anywhere in the color spectrum to choose your base color
- 2Adjust the hue slider to shift the color family
- 3Adjust saturation and lightness for the exact shade
- 4See HEX, RGB, and HSL values update in real time
- 5Click any format to copy it instantly to your clipboard
About This Tool
Colors are specified differently across contexts. CSS historically uses HEX codes (#RRGGBB) but modern CSS increasingly uses HSL because it is more intuitive for making colors lighter, darker, or more saturated programmatically. Design tools like Figma and Adobe XD typically display RGB. Knowing all three formats lets you work fluidly across every environment.
HEX codes encode each color channel (Red, Green, Blue) as a two-digit hexadecimal number. #FF5733 means Red=255, Green=87, Blue=51. RGB directly expresses each channel as a decimal number from 0 to 255. rgb(255, 87, 51) is the same color in a different notation. HSL describes color as Hue (0-360° color wheel position), Saturation (0-100% how vivid), and Lightness (0-100% dark to light). hsl(11, 100%, 60%) is more understandable when adjusting shades.
Color picker users include web developers picking CSS colors, UI designers matching brand guidelines, digital artists selecting palette colors, and marketers ensuring brand color consistency.
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL?
HEX uses a 6-digit hexadecimal code. RGB uses three decimal numbers (0-255) for red, green, and blue channels. HSL uses hue (0-360°), saturation (%), and lightness (%) and is more intuitive for adjusting colors.
Can I enter a HEX code to see its RGB and HSL?
Yes. Type or paste a HEX code into the input field and the tool will convert it to all formats instantly.
How do I pick a color from an image on screen?
Use your browser's built-in eyedropper (available in Chrome and Edge) or a screen color picker extension to sample colors from anywhere on your screen.
What is RGBA or HSLA?
RGBA and HSLA add an Alpha channel (opacity) to RGB and HSL. For example, rgba(255, 87, 51, 0.5) is the same color at 50% opacity. Our color picker shows the opaque equivalents.
Can I use the copied color codes directly in CSS?
Yes. All three formats — HEX, rgb(), and hsl() — are valid CSS color values and can be pasted directly into your stylesheet.