Color Picker: Get HEX, RGB, and HSL Values for Any Color
Pick any color visually and instantly get its HEX, RGB, HSL, and HSB values. Copy color codes for use in CSS, design tools, or code.
Try the free online tool
Runs entirely in your browser — no signup, no uploads.
Colors are at the heart of every visual interface, and developers and designers constantly need to work with color values in multiple formats. CSS uses HEX and RGB. Design tools like Figma use HSL. Image editors use HSB. Converting between these formats mentally or hunting for a conversion calculator is a productivity drain that this tool eliminates.
This color picker provides an interactive visual canvas where you can select any color by clicking, dragging a hue slider, or entering a known value in any format. The tool instantly shows the equivalent values in all common formats — HEX, RGB, RGBA, HSL, and HSB — so you always have the representation you need.
Whether you're implementing a design mockup, tweaking a CSS stylesheet, checking color contrast, or just exploring a palette, this tool gives you a fast and accurate way to work with color values across every format.
What Are Color Formats — HEX, RGB, and HSL?
HEX (hexadecimal) colors are the six-character codes you see in CSS like `#FF5733`. Each pair of hex digits represents the red, green, and blue channel on a scale of 00–FF (0–255). HEX is the most common format in web development.
RGB (Red, Green, Blue) uses decimal numbers from 0 to 255 for each channel. In CSS it looks like `rgb(255, 87, 51)`. RGBA adds an alpha channel for transparency: `rgba(255, 87, 51, 0.5)`. RGB is intuitive for developers who think in terms of color mixing.
HSL (Hue, Saturation, Lightness) uses a different mental model — hue is the color angle (0–360°), saturation is the intensity (0–100%), and lightness is how light or dark (0–100%). `hsl(14, 100%, 60%)` is often more intuitive for adjusting shades and tints of a color. HSB (Hue, Saturation, Brightness) is similar but uses brightness instead of lightness.
How to Use This Tool
Select or enter a color and get all its values instantly.
- 1
Use the color canvas
Click and drag within the color gradient canvas to pick a color by hue, saturation, and brightness visually.
- 2
Adjust the hue slider
Move the hue slider below the canvas to change the base hue across the full color spectrum from red to violet.
- 3
Enter a known value
Type a HEX code, RGB value, or HSL value directly into the corresponding input field to jump to a specific color.
- 4
Read the output values
The tool displays the selected color's equivalent values in HEX, RGB, RGBA, HSL, and HSB in real time.
- 5
Copy to clipboard
Click the copy icon next to any format to copy that color value to your clipboard, ready to paste into your CSS or design tool.
Common Use Cases
Color pickers are indispensable across frontend development and design workflows.
- Implementing design specs — converting colors from a Figma or Sketch design file into the correct CSS format for your stylesheet.
- Adjusting brand colors — finding lighter or darker shades of a brand color by manipulating the HSL lightness value.
- Converting between formats — translating a HEX code from a style guide into RGB for use in a CSS gradient or canvas API call.
- Checking color accessibility — identifying the exact color values needed to calculate contrast ratios for WCAG compliance.
- Generating CSS variables — picking a palette of colors and copying their HEX codes to define as CSS custom properties.
Tips and Best Practices
Use these tips to work with colors more effectively in your projects.
- Prefer HSL in CSS when you need to programmatically generate color variations — adjusting lightness is much easier than manipulating HEX digits.
- Use CSS custom properties (variables) for your color palette so you can update colors site-wide by changing a single value.
- Always check color contrast ratios for text and background combinations — WCAG AA requires a ratio of at least 4.5:1 for normal text.
- Be consistent with your color format within a project — mixing HEX and RGB in the same stylesheet makes maintenance harder.
- When saving colors for reference, document both the HEX value and the semantic name (e.g., `--color-primary: #FF5733`) to make your design tokens meaningful.
Frequently Asked Questions
What is the difference between HSL and HSB?
Both use hue and saturation, but the third channel differs. HSL uses lightness, where 50% is the pure color, 0% is black, and 100% is white. HSB uses brightness, where 100% is the pure color and 0% is always black. Figma and Photoshop typically use HSB.
How do I convert a HEX color to RGB?
Split the HEX code into three pairs of two hex digits. Convert each pair from hexadecimal to decimal: the first pair is the red channel, the second is green, the third is blue. For example, `#FF5733` → R:255, G:87, B:51.
What is the alpha channel in RGBA?
The alpha channel controls transparency, ranging from 0 (fully transparent) to 1 (fully opaque). `rgba(255, 87, 51, 0.5)` renders the color at 50% opacity. HSLA works the same way but in the HSL format.
Can I enter a CSS color name like 'tomato' or 'cornflowerblue'?
Many color pickers support CSS named colors. Enter the name and the tool will resolve it to its HEX, RGB, and HSL equivalents. There are 140 named colors defined in the CSS Color specification.
Why does the same color look different on different screens?
Screens have different color profiles, calibration settings, and gamuts. A color that appears on an sRGB monitor will look different on a display with a wider P3 gamut. For consistent results, calibrate your monitor and use sRGB color profiles in your design tools.
What is a HEX shorthand color code?
When both digits in each HEX pair are the same, you can abbreviate the color to three characters. For example, `#FFAA33` becomes `#FA3`. CSS and all modern browsers support both three-digit and six-digit HEX color codes.
Ready to use this tool?
Free, instant, no account required. Runs entirely in your browser.
More Web & HTTP Guides
HTTP Status Codes: Complete Reference Guide for Developers
6 min read
Query String Parser: Decode and Inspect URL Query Parameters
4 min read
Query String Builder: Build URL Query Strings from Key-Value Pairs
4 min read
cURL to Code Converter: Convert cURL Commands to JavaScript, Python and More
5 min read