Color Converter — HEX to RGB to HSL
Need to convert a color code for your website or design project? This tool converts between HEX, RGB, and HSL color formats instantly. You can pick a color using the visual color picker, or type in a HEX code you already have. All three formats update at the same time so you can copy whichever one you need. This is handy when you are coding a website in CSS and need to switch formats, or when you are working in a design tool that uses a different format than your code editor.
Frequently Asked Questions
What is a HEX color code?
A HEX color code is a six-character code that represents a color using hexadecimal numbers, starting with a # symbol. The six characters represent the amounts of red, green, and blue in the color. For example, #FF0000 is pure red and #000000 is black.
What is the difference between RGB and HEX colors?
Both RGB and HEX describe the same colors. HEX uses a compact six-character code while RGB spells out three numbers from 0 to 255 for red, green, and blue. They are interchangeable and you can convert between them freely.
What is HSL color?
HSL stands for Hue, Saturation, and Lightness. Hue is the color on a 0 to 360 degree wheel. Saturation is how vivid the color is (0% is grey, 100% is full color). Lightness controls how dark or bright it is. Many designers find HSL easier to adjust than RGB.
Which color format should I use in CSS?
All three formats work in CSS. HEX is most commonly used and shortest to write. RGB is useful when you need transparency with rgba(). HSL is great for creating color variations by adjusting lightness or saturation values in code.
What is the difference between HSL and HSB/HSV?
HSL (Hue, Saturation, Lightness) and HSB/HSV (Hue, Saturation, Brightness/Value) look similar but behave differently. In HSL, 50% lightness is the pure color and 100% is white. In HSB, 100% brightness with 100% saturation gives the pure color. HSL is used in CSS; HSB is used in Photoshop and Figma. Converting between them requires a formula.
What does the alpha channel do in a color value?
Alpha controls transparency, ranging from 0 (fully transparent) to 1 (fully opaque) in CSS. Use rgba(255,0,0,0.5) for a 50% transparent red. In 8-digit HEX notation, the last two digits represent the alpha channel — #FF000080 is a semi-transparent red. Alpha is essential for overlays, ghost effects, and layered design elements.
How do I find the exact color from a screenshot?
Use the eyedropper tool built into Chrome DevTools (click a color swatch in the Styles panel), Figma, or Photoshop. On macOS, Digital Color Meter (in Utilities) reads any pixel on screen. On Windows, the PowerToys Color Picker (Win+Shift+C) works system-wide. Browser extensions like ColorZilla also add an eyedropper to your toolbar.
How It Works
This tool converts between HEX, RGB, and HSL using standard color math. HEX is parsed as three hex pairs (RR GG BB) into decimal R/G/B values 0-255. RGB to HSL uses the min/max channel algorithm to calculate hue in degrees, saturation as a ratio, and lightness as the midpoint of the channel range.
HEX Color Format
A HEX color like #3a86ff encodes red, green, and blue each as a two-digit hexadecimal number (00 to FF). Shorthand codes like #f00 expand to #ff0000. The # prefix is required in CSS but is just a convention — the actual value is the six hex digits. Colors like #ffffff (white) and #000000 (black) are the extremes.
HSL for Design
HSL is the most intuitive format for generating color palettes. Hold hue constant and vary lightness to get shades and tints of the same color. Vary saturation to get muted or vivid versions. CSS custom properties with HSL variables make it easy to build a full theme from a single base hue.
When to Use This
Use to convert a HEX color from a design spec into RGB for use in a CSS rgba() call, to find the HSL equivalent of a brand color before building a palette, to verify a color value copied from Figma or Photoshop, or to check whether two visually similar colors are actually identical in code.
More Free Tools
Base64 Encoder & Decoder
Encode text to Base64 format or decode a Base64 string back to plain text.
Email Extractor
Paste any block of text and pull out all email addresses in one click.
Text Diff Checker
Compare two blocks of text and see exactly which lines were added or removed.
JSON Formatter & Validator
Format messy JSON into readable output and validate it for errors instantly.