How to convert a color
- 1Type or paste a color into the input: #3b82f6, 3b82f6, #38f, rgb(59, 130, 246), rgba(59, 130, 246, 0.5) or hsl(217 91% 60%) all work.
- 2Or click the swatch next to the input to open your system color picker, and use the Red, Green, Blue and Alpha sliders to adjust it.
- 3Read off the result in HEX, RGB, HSL and the space-separated CSS Color 4 forms. Each one has its own copy button.
- 4Check the WCAG contrast panel to see whether white or black text on this color passes AA.
HEX, RGB and HSL: the same color, three ways
All three notations describe a color in the sRGB space; they just write it differently. RGB gives the red, green and blue channels as numbers from 0 to 255. HEX is the same three numbers written in base 16, two digits each, so #3b82f6 means red 0x3b (59), green 0x82 (130) and blue 0xf6 (246). Going from an RGB color to hex is the reverse: write each channel as two base-16 digits. A hex color converter can therefore go to RGB and back exactly, with no rounding.
Shorthand hex like #38f doubles each digit, giving #3388ff. A fourth or eighth digit adds alpha: #3b82f680 is the same blue at about 50% opacity. When the alpha slider is below 100%, the converter outputs 8-digit hex, rgba() and hsla(), plus the modern rgb(59 130 246 / 50%) syntax, which every current browser supports.
HSL describes the color as hue (an angle from 0 to 360 on the color wheel), saturation and lightness. It's easier to reason about when you're building a palette: keep the hue and saturation fixed and step the lightness to get tints and shades. Going from hex to HSL, or RGB to HSL, involves division, so values are rounded to one decimal place, and a round trip back to RGB lands on the same 0–255 values.
The contrast panel uses the WCAG 2 relative luminance formula. Body text needs a ratio of at least 4.5:1 to pass AA; large text, meaning 24px or about 18.66px bold, needs 3:1. Alpha is ignored for this check because the real result depends on what's behind the color.
When developers reach for it
Design hand-off
Convert a hex code to rgb() or hsl() for a stylesheet, or go the other way round for a design token file.
Adding transparency
Take a brand color and get its rgba() or 8-digit hex equivalent at the opacity you need for an overlay or shadow.
Building palettes
Read a color's HSL values and adjust lightness to create consistent hover, active and disabled states.
Accessibility checks
See at a glance whether white or black text is readable on a button or badge background.
Frequently asked questions
How do I convert HEX to RGB by hand?
+
Split the six digits into three pairs and convert each pair from base 16 to base 10. For #ff5733: ff is 255, 57 is 87 and 33 is 51, so the color is rgb(255, 87, 51).
What's the difference between rgb() and rgba()?
+
rgba() adds a fourth alpha value between 0 and 1. In modern CSS, rgb() accepts alpha too, as rgb(255 87 51 / 50%), so the two are interchangeable in current browsers.
What is an 8-digit hex color?
+
It's #rrggbbaa: the usual six digits plus two more for alpha, where 00 is fully transparent and ff is fully opaque. #ff573380 is about 50% opacity.
Why are my HSL values decimals?
+
RGB values are whole numbers from 0 to 255, and turning them into an angle and percentages rarely lands on whole numbers. The converter rounds to one decimal place, which is precise enough to convert back to the exact same RGB color.
Does it understand color names like 'tomato'?
+
Not at the moment. It accepts HEX, rgb()/rgba() and hsl()/hsla() values. Use the color picker if you want to choose a color visually.
How do I convert HSL to hex?
+
Type the hsl() value, for example hsl(217 91% 60%), and copy the HEX output. The converter turns HSL into RGB channels first, rounds each to a whole number from 0 to 255, then writes them in base 16.
How do I convert rgba to hex?
+
Paste the rgba() value and copy the 8-digit hex. The alpha (0 to 1) is multiplied by 255, rounded and written as two more hex digits, so rgba(255, 87, 51, 0.5) becomes #ff573380.
Related tools
Image Converter — WebP, PNG & JPG
Convert PNG, JPG, WebP, GIF, and BMP images to WebP, JPEG, or PNG with an adjustable quality slider. Batch-convert multiple files at once with live size comparison. Everything runs in your browser — no uploads, no size limits.
SVG to PNG
Rasterize SVGs to PNG, JPEG, or WebP at any resolution. Paste source or drop a file, set the export dimensions, and download — ideal for @2x / @3x asset pipelines.
PX to REM Converter
Convert px to rem and rem to px with any root font size. Includes a px-to-rem reference table and a bulk converter that rewrites every px value in a block of CSS.
Binary, Hex & Decimal Converter
Convert numbers between binary, octal, decimal, and hexadecimal. Real-time conversion with input validation and BigInt precision for large values.
Color Picker from Image
Click any pixel of a photo to get its HEX, RGB and HSL code, with a magnifier and a palette of dominant colors. Works in your browser; nothing is uploaded.