Color Converter
HEX · RGB · HSL · HSV · Color Picker
Convert colors between HEX, RGB, HSL and HSV instantly. Pick a color visually, adjust with sliders, or enter any code to convert. Click any web color swatch to load it instantly.
Common Web Colors
What Is a Color Converter?
A color converter translates a color value from one notation system to another — for example converting a HEX code like #3D8B5F into its equivalent RGB value rgb(61, 139, 95) or HSL value hsl(145, 39%, 39%). All four common color models — HEX, RGB, HSL and HSV — describe the same set of 16.7 million colors that a 24-bit display can render. They just do it with different coordinate systems.
Designers work across multiple tools and environments that each prefer different formats. CSS accepts HEX, RGB, and HSL natively. Photoshop and Figma use HSB/HSV in their color pickers. Copying a color from one environment to another often requires converting between formats — this converter handles all four directions instantly.
Understanding color models also helps you create color palettes programmatically: in HSL, you can systematically vary hue (for a palette of different colors), saturation (for a muted-to-vivid range), or lightness (for a dark-to-light shade range) while keeping other values fixed. This is fundamentally easier than doing the same arithmetic in RGB or HEX.
How to Use the Color Converter
- Enter a HEX code — type any 6-digit hex value (e.g.
#FF5733) in the HEX field. RGB, HSL and the color preview update instantly. - Use the color picker — click the color swatch to open your browser's native color picker. Drag to any color and all fields update in real time.
- Adjust RGB sliders — drag the R, G, B sliders to fine-tune individual color channels. The hex code and HSL value update simultaneously.
- Type an RGB value — enter a value like
rgb(61, 139, 95)in the RGB field. All other formats update immediately. - Type an HSL value — enter a value like
hsl(145, 39%, 39%)to convert from HSL to all other formats. - Click a color swatch — click any of the 20 named web color swatches to load that color into all fields instantly.
Color Model Formulas and Math
#HEX
6-digit hex value: #RRGGBB. Each pair = 0–255 in base 16. To convert hex pair to decimal: multiply first digit by 16 and add second digit. 3D = (3×16)+13 = 61.
RGB
Red, Green, Blue — each 0–255. Mirrors how screens emit light. rgb(255,0,0) = pure red. HEX to RGB: split into pairs and convert each from hex to decimal.
HSL
Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Most intuitive for humans. At L=50% with full saturation you get the pure hue; L=0% is black, L=100% is white.
HSV
Hue, Saturation, Value. Used in design tools. At full saturation and V=100% you get the pure hue. V=0% always gives black regardless of hue or saturation.
RGB to HSL Conversion
max = max(r,g,b), min = min(r,g,b)
L = (max + min) / 2
S = (max == min) ? 0 : (L < 0.5) ? (max-min)/(max+min) : (max-min)/(2-max-min)
H: if max==r: H=(g-b)/(max-min); if max==g: H=2+(b-r)/(max-min); if max==b: H=4+(r-g)/(max-min)
H = H * 60 (convert to degrees, add 360 if negative)
HEX to RGB
Example: #3D8B5F → R=parseInt("3D",16)=61, G=parseInt("8B",16)=139, B=parseInt("5F",16)=95
Common Web Colors Reference
| Name | HEX | RGB | HSL |
|---|---|---|---|
| Red | #FF0000 | rgb(255,0,0) | hsl(0,100%,50%) |
| Green | #008000 | rgb(0,128,0) | hsl(120,100%,25%) |
| Blue | #0000FF | rgb(0,0,255) | hsl(240,100%,50%) |
| White | #FFFFFF | rgb(255,255,255) | hsl(0,0%,100%) |
| Black | #000000 | rgb(0,0,0) | hsl(0,0%,0%) |
| Yellow | #FFFF00 | rgb(255,255,0) | hsl(60,100%,50%) |
| Cyan | #00FFFF | rgb(0,255,255) | hsl(180,100%,50%) |
| Magenta | #FF00FF | rgb(255,0,255) | hsl(300,100%,50%) |
| Orange | #FF8000 | rgb(255,128,0) | hsl(30,100%,50%) |
| Purple | #800080 | rgb(128,0,128) | hsl(300,100%,25%) |
Worked Conversion Examples
Example 1: HEX to RGB and HSL
Convert #3D8B5F to RGB and HSL.
Split into pairs: 3D, 8B, 5F. Convert to decimal: 3D = (3×16)+13 = 61; 8B = (8×16)+11 = 139; 5F = (5×16)+15 = 95. Result: rgb(61, 139, 95). Normalized: r=0.239, g=0.545, b=0.373. Max=0.545 (green), Min=0.239. L=(0.545+0.239)/2=0.392. S=(0.545-0.239)/(2-0.545-0.239)=0.389. H=(0.373-0.239)/(0.545-0.239)+2=2.437 → ×60=146°. Result: hsl(146, 39%, 39%).
Example 2: RGB to HEX
Convert rgb(255, 87, 51) to HEX. Convert each to hex: 255=FF, 87=57, 51=33. Concatenate: #FF5733.
Example 3: Creating a lighter shade with HSL
To make hsl(220, 80%, 40%) (a dark blue) lighter, increase L: hsl(220, 80%, 60%) is a medium blue, hsl(220, 80%, 80%) is a light blue. Hue and saturation stay the same — only brightness changes. This is impossible to do intuitively in HEX or RGB without a calculator.
Practical Tips for Working with Color Codes
- Use HSL for programmatic palettes — fixing hue and varying lightness from 10% to 90% creates a perfect monochromatic scale for design systems.
- HEX shorthand — #FFF is identical to #FFFFFF, #000 to #000000. Not all tools accept shorthand; always use 6-digit form in production CSS for maximum compatibility.
- CSS supports all three formats natively —
color: #3D8B5F,color: rgb(61,139,95)andcolor: hsl(146,39%,39%)are all valid and equivalent in any browser. - CSS4 adds alpha channel —
rgb(61 139 95 / 50%)andhsl(146 39% 39% / 0.5)use the new CSS4 syntax with transparency. Older syntax usesrgba()andhsla(). - The 0x20 case trick — while not directly a color tip, understanding that hex digits A–F equal 10–15 helps with mental hex-to-decimal conversion when reading color codes.
- Chrome DevTools — clicking the color swatch in DevTools cycles between HEX, RGB, HSL and HSB formats, making it easy to copy any format directly from the browser.
- Figma and Sketch export — both tools support copying selected colors as HEX or CSS format. Use the design tool's color panel to copy the exact format you need.
Frequently Asked Questions
A HEX color code is a 6-character hexadecimal value prefixed with # (e.g. #FF5733) representing the red, green and blue components of a color. Each pair of characters is a hex number from 00 (0) to FF (255): #RRGGBB. HEX codes are the standard way to specify colors in CSS, HTML and most design tools. A shorthand 3-digit version exists when both digits of each pair match: #FFF = #FFFFFF (white).
RGB (Red, Green, Blue) defines colors by their component light intensities, each from 0 to 255. HSL (Hue, Saturation, Lightness) is more intuitive: Hue is the color angle (0–360°), Saturation is intensity (0–100%), Lightness is brightness (0–100%). HSL makes it easy to reason about colors — making a color 10% lighter is simply adding 10 to the L value. RGB is how screens actually render the light.
Split the HEX code into three pairs and convert each from hexadecimal to decimal. Example: #3D8B5F → 3D=61, 8B=139, 5F=95 → rgb(61, 139, 95). In hex: A=10, B=11, C=12, D=13, E=14, F=15. To convert 3D: (3×16) + 13 = 61. The converter above does this instantly.
Both HSV (Hue, Saturation, Value) and HSL use the same Hue angle but differ at extremes. In HSL, a fully saturated color at L=50% is the pure hue; L=100% gives white. In HSV, a fully saturated color at V=100% gives the pure hue; V=0% always gives black. HSV is standard in Photoshop and Adobe tools; HSL is standard in CSS.
HEX codes are more compact and copy-paste friendly. #FF5733 is one token that drops into any CSS property, whereas rgb(255, 87, 51) requires three separate numbers. Both define exactly the same color. In modern CSS, HSL is increasingly preferred by developers because it's easier to reason about — making a color 10% lighter is simply adding 10 to the L value.
Web-safe colors are a set of 216 colors designed to display consistently on 8-bit (256-color) screens, using only the hex digit pairs 00, 33, 66, 99, CC and FF. Examples: #FF0000 (red), #00FF00 (lime), #0000FF (blue). Modern displays support 16.7 million colors, making web-safe constraints largely irrelevant today — but the concept appears in historical web design documentation.
Several methods: (1) Browser DevTools: right-click any element, Inspect, find the color in the Styles panel — Chrome lets you click the swatch to see HEX, RGB and HSL. (2) Browser extensions: Eye Dropper or ColorZilla for Chrome/Firefox. (3) Design tools: Figma, Photoshop and Adobe XD show HEX in their color pickers. (4) Screenshots: open in any image editor and use the eyedropper tool to sample any pixel.