DevDockTools

Color Converter

Convert color values between HEX, RGB, HSL, and HSB/HSV formats. Includes a color picker for visual selection and one-click copy for each format.

HEX, RGB, HSL, and HSB are all representations of the same color — just in different coordinate systems. HEX is used in CSS and HTML; RGB is used in code; HSL is easiest for humans to reason about lightness and saturation; HSB is native to design tools like Photoshop.

Converting design tool colors to CSSMatching brand colors across formatsAdjusting lightness/saturation in HSLBuilding color palettes programmatically
100% private — all processing runs in your browser. No files are uploaded to any server.
HEX#3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
HSB/HSVhsb(217°, 76%, 96%)
R,G,B59, 130, 246

Frequently Asked Questions

What color formats are supported?

The tool converts between HEX (#rrggbb), RGB (rgb(r, g, b)), HSL (hsl(h, s%, l%)), and HSB/HSV (hsb(h, s%, b%)) formats.

Can I use the color picker?

Yes. Click the color swatch to open the native browser color picker and visually select any color.

What is the difference between HSL and HSB?

Both use Hue and Saturation. The difference is the third channel: HSL uses Lightness (50% is the 'pure' hue; 100% is white), while HSB uses Brightness (100% is the pure hue; 0% is black). Design tools like Photoshop use HSB; CSS uses HSL.

How do I get a lighter or darker shade of a color?

Convert the color to HSL and increase or decrease the Lightness (L) value. Adjusting Lightness in HSL is the most predictable way to create tints and shades of a color.

Related Tools