COLOR TOOL · CLIENT-SIDE
Color Picker
Click anywhere on the gradient canvas to pick a color. Get HEX, RGB, and HSL values instantly.
Gradient Canvas
Selected Color
HEX
RGB
HSL
Frequently Asked Questions
How do I pick a color?
Click anywhere on the gradient canvas to pick a color. You can also drag the cursor across the canvas to preview colors live. The HEX, RGB, and HSL values update in real time.
What format is the color displayed in?
Colors are shown in three formats: HEX (e.g. #E25B3A), RGB (e.g. rgb(226, 91, 58)), and HSL (e.g. hsl(14, 76%, 56%)). Each has a copy button for quick use.
Can I enter a specific color code?
Yes. Type a HEX code (e.g. #ff5733) into the input field and the picker will jump to that color and update all values.
Related guides
How to Build an Accessible Color Palette for Web Design in 2026
Learn how to create accessible color palettes that pass WCAG contrast. Use OKLCH, semantic tokens, and free browser color tools.
READ GUIDE →
How to Create Color Palettes for Web Design (Free Tools)
Learn how to create color palettes for web design. Covers color theory basics, palette generators, color pickers, and gradient creation with free browser tools.
READ GUIDE →