Online Color Picker
Choose a color in the visual picker or enter a value to synchronize the preview. Copy HEX, RGB or HSL output for a stylesheet. The picker and converter share one color so you can compare notations without switching pages.
Convert HEX, RGB and HSL Colors
HEX encodes RGB channels as hexadecimal pairs; RGB uses numeric channels; HSL describes hue, saturation and lightness. Conversion changes notation while keeping the intended sRGB color, subject to rounding.
How HEX, RGB and HSL Work
RGB channels range from 0 to 255. HEX pairs range from 00 to FF. HSL hue wraps around the color wheel, while saturation and lightness use percentages. HSL lightness is not a perceptual contrast measurement.
Using Color Values in CSS
Use the generated color in a CSS property such as color or background-color. Match syntax to the target browser requirements. Check contrast against the actual background and include focus and disabled states in design review.
Color Conversion Examples
#FF0000 is rgb(255, 0, 0) and hsl(0, 100%, 50%). #FFFFFF is white and #000000 is black. Alpha controls transparency independently of RGB channels and can change the appearance over different backgrounds.
More examples and technical details
HEX, RGB, and HSL: Three Views of One Color
Every color you see on a screen is really just three numbers: how much red, how much green, and how much blue light the pixel emits. HEX, RGB, and HSL are three different ways of writing those numbers down. They describe the same colors, so nothing is lost when you convert between them. You are only changing the notation, not the color.
A HEX code is nothing more than RGB written in base 16. HSL is the odd one out: instead of red, green, and blue amounts, it remaps the color into hue, saturation, and lightness, a cylindrical arrangement that people tend to find far more intuitive when they want to nudge a color rather than define it from scratch. Want a slightly lighter version of a blue? In HSL you bump the lightness a few percent and leave the hue alone. In raw RGB that same tweak means juggling three values at once.
How a HEX code is built
A six digit HEX code carries two hex digits per channel, in red, green, blue order. Two hex digits cover 00 to FF, which is 0 to 255 in decimal, exactly the range each RGB channel uses. So HEX and RGB are not just related, they are the same numbers in a different base.
Worked example: converting #2563EB
Split the code into three pairs, then convert each pair from base 16 to decimal:
When to Reach for Each Model
None of the three is better than the others, they just suit different jobs. Reach for HEX in CSS and design handoff, where a single compact token like #2563EB is easy to paste into a stylesheet or drop into a Figma swatch. Reach for RGB when you are writing code that manipulates pixels, such as a canvas fillStyle, image processing, or anywhere you need the raw channel numbers to do arithmetic on them.
Reach for HSL when you are adjusting colors programmatically. Building a hover state that is ten percent darker, generating a palette of tints from one base color, or spinning the hue around the wheel are all trivial in HSL and awkward in the other two. Because these tools convert instantly, a common workflow is to design in HEX, then flip to HSL to generate the variations you need.
Adding transparency with alpha
Each model has a version that carries an alpha (opacity) channel. HEX gains two more digits to become an eight digit code, where the last pair is the alpha from 00 (transparent) to FF (opaque). RGB becomes rgba() with a fourth value from 0 to 1, and HSL becomes hsla() the same way. So rgba(37, 99, 235, 0.5) is that same blue at half opacity.
Named Color Reference
CSS ships with a set of keyword colors you can write by name instead of a code. They map to exact HEX and RGB values, so the table below is handy when you want to sanity check a conversion or reach for a familiar color without opening a picker.
| Name | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| red | #FF0000 | rgb(255, 0, 0) |
| green | #008000 | rgb(0, 128, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| cyan | #00FFFF | rgb(0, 255, 255) |
| magenta | #FF00FF | rgb(255, 0, 255) |
| silver | #C0C0C0 | rgb(192, 192, 192) |
| gray | #808080 | rgb(128, 128, 128) |
| orange | #FFA500 | rgb(255, 165, 0) |
| purple | #800080 | rgb(128, 0, 128) |
| teal | #008080 | rgb(0, 128, 128) |
| navy | #000080 | rgb(0, 0, 128) |
Need a different color task? Browse every free developer tool including color converters, encoders, and hashing utilities.
Frequently asked questions
How do I pick a color and get its HEX code?
Use the visual picker and copy the synchronized HEX value.
How do I convert HEX to RGB?
Enter the HEX code and read the RGB channels.
What is HSL and when should I use it?
HSL separates hue, saturation and lightness; it can be convenient when adjusting a palette.
Does the picker support alpha transparency?
Yes. Use the alpha control for transparent CSS output; the native visual picker selects the base RGB color.
Is any color data sent to a server?
No. Input is processed in this browser tab and is not uploaded by the tool. Copy and download are actions you control; ordinary page analytics do not receive tool input.