Tool Forge
Free
Color Converter
Convert between HEX, RGB, HSL, and CMYK instantly. Generate tints, shades, and color harmonies with one-click CSS copy. All processing runs in your browser.
— contrast
HSL Sliders
Hue
217°
Saturation
91%
Lightness
60%
Presets
Tints & Shades
Click any swatch to copy its HEX value
Color Harmonies
Click any swatch to load that color
Frequently Asked Questions
How do I convert HEX to RGB?
A HEX color like
#3b82f6 encodes R, G, B as two-digit hexadecimal pairs: 3b = 59, 82 = 130, f6 = 246 in decimal. So #3b82f6 becomes rgb(59, 130, 246). This tool converts instantly as you type.
What is HSL color format?
HSL stands for Hue, Saturation, Lightness. Hue is the color angle on the spectrum (0–360°), saturation is the intensity (0–100%), and lightness controls how light or dark the color appears (0% = black, 100% = white, 50% = full color). HSL is much easier to reason about than RGB or HEX because adjusting one value predictably changes one perceptual property.
What are tints and shades?
A tint is created by mixing a color with white (increasing lightness in HSL), while a shade is created by mixing with black (decreasing lightness). Design systems like Tailwind CSS use a 9-step scale (100–900) per color to ensure visual consistency across backgrounds, borders, and text.
What is CMYK and when do I use it?
CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in physical printing. Since screens emit light (additive RGB), the CMYK values here are a mathematical approximation. Use them as a starting point when handing off brand colors to a print designer — they will likely adjust for the specific ink and paper combination.