Loading...
Please wait while we prepare your experience
Loading...
Please wait while we prepare your experience
Type or paste a color in any format — HEX, RGB, HSL, or HSB — and get all four conversions at once. Click to copy whichever one your code needs.
RGB Sliders
Enter any color value and get all formats at once — no manual math required.
Enter a color value
Type a HEX code like #3b82f6, an RGB value like rgb(59, 130, 246), or pick a color using the visual color picker.
See all formats instantly
The tool converts to HEX, RGB, HSL, and HSB simultaneously. All four update as you type or drag the picker.
Copy the format you need
Click the copy button next to any format. Paste it directly into your CSS, design tool, or code.
Designer gives you HEX, your CSS needs HSL
Most designers work in HEX. HSL is easier to manipulate in CSS — adjusting lightness for hover states or dark mode variants is one number change.
Canvas and WebGL need RGB floats
HTML Canvas and WebGL use RGB values as floats between 0 and 1, not 0–255. Convert your HEX to RGB, then divide each value by 255.
Brand colors in every format
Your brand guide has a HEX code. Your developer needs RGB for the app, HSL for the CSS variables, and HSB for the design tool. One conversion, all four.
Creating lighter and darker variants
HSL makes this easy — keep the hue and saturation, adjust the lightness. Convert to HSL, tweak the L value, convert back.
Tailwind CSS custom colors
Tailwind v4 uses oklch for its palette. If you're adding custom brand colors as CSS variables, you'll need them in HSL or RGB format.
Checking what a hex code actually looks like
A hex code like #3b82f6 is meaningless until you see it. The visual picker shows the color immediately alongside all four format values.
Found a problem with Color Converter? Let us know.
Your feedback helps us improve.