Home › Color Tools › Color Picker
Color Picker
Pick any color using a visual color wheel or by entering HEX, RGB, or HSL values. Instantly copy the color code in any format for use in your design or development project.
✓ Free✓ No signup✓ Privacy first✓ Runs in your browser
Color Picker · HEX, RGB, HSL, CMYK conversions · Color Schemes · client-side only
How it works
Pick and copy your color in three steps
Select a color visually
Click anywhere on the color wheel or gradient palette to pick a hue, then adjust saturation and brightness using the slider controls to fine-tune your selection.
Enter values directly
Type a HEX code, RGB values, or HSL values to jump straight to a specific color. The visual picker updates in real time to reflect any value you enter.
Copy your color code
Use the one-click copy button next to your preferred format u2014 HEX, RGB, RGBA, HSL, or HSLA u2014 to grab the value and paste it into your CSS, Figma file, or any design tool.
FAQ
Common questions about the color picker
What color formats does this tool output?
This color picker outputs color values in five formats: HEX (e.g., #3a86ff), RGB (e.g., rgb(58, 134, 255)), RGBA with an alpha channel for transparency, HSL (hue, saturation, lightness), and HSLA. Each format has different practical uses u2014 HEX is standard in CSS and HTML; RGB and RGBA are preferred when you need transparency control in web or app design; HSL is increasingly favoured in design systems because adjusting lightness or saturation while holding the hue constant is intuitive and predictable.
What is the difference between HEX, RGB, and HSL?
HEX is a hexadecimal string encoding red, green, and blue channels u2014 for example, #ff5733 encodes red=255, green=87, blue=51. RGB uses decimal integers for the same three channels, each ranging from 0 to 255. HSL represents color as Hue (0u2013360u00b0 on the color wheel), Saturation (0u2013100%), and Lightness (0u2013100%). All three formats describe the same colour space u2014 the choice between them is primarily about which is most convenient or readable in your particular workflow.
Can I paste a color from Figma or Adobe XD?
Yes. Any HEX code, RGB value, or HSL value from Figma, Adobe XD, Sketch, or any other design tool can be pasted directly into the corresponding input field. The visual picker will update to display that color, and you can then copy it in whichever output format your project requires. This is particularly useful for converting colors between formats u2014 for example, if a design file uses HEX but your CSS codebase uses HSL for maintainability.
Does this tool support transparent colors?
Yes. The RGBA and HSLA outputs include an alpha channel that controls opacity on a scale from 0 (fully transparent) to 1 (fully opaque). You can adjust the alpha slider to set the desired transparency level. This is useful for overlay effects, semi-transparent backgrounds, and glass-effect UI components. Note that standard 6-digit HEX codes do not carry transparency information u2014 use 8-digit HEX (e.g., #3a86ff80) or RGBA in your CSS when transparency is required.
Keep going
Related tools
Color Palette Generator
Generate harmonious multi-color palettes from a single base color.
Color Contrast Checker
Test your foreground and background color combination for WCAG accessibility compliance.
HEX to RGB Converter
Convert any HEX color code to its RGB, HSL, and RGBA equivalents.
Color Name Finder
Find the nearest named CSS color for any HEX or RGB value you pick.
About the Color Picker
The Color Picker is a browser-based tool that lets designers and developers select, enter, and convert colors between multiple formats without switching applications. It is used during web design, UI development, branding, and graphic design workflows wherever precise color values need to be identified and transferred. Its multi-format output makes it compatible with CSS, Figma, Adobe, and any code-based workflow without additional conversion steps.
Benefits
-
Visual color wheel with separate hue, saturation, and brightness slider controls -
Real-time preview updates as you interact with the wheel or type any input value -
One-click copy buttons for HEX, RGB, RGBA, HSL, and HSLA formats simultaneously -
No image upload or canvas required u2014 works as a standalone interactive color selector
Privacy
This tool runs entirely in your browser; no color selections, inputs, or data are transmitted to any server or tracked in any way.