Color Converter
Convert colors between HEX, RGB and HSL with live preview.
Humans can distinguish about 10 million colors. CSS has 140 named colors — "rebeccapurple" was added in 2014 to honor a developer's daughter.
How to use the Color Converter
Enter any 6-digit HEX color code or use the color picker to choose a color visually. Click Convert to instantly see the RGB value, HSL value, full HEX, CSS variable syntax, nearest Tailwind CSS color, relative luminance, and 8 auto-generated shades from dark to light. Click any shade swatch to convert that color.
Step-by-step guide
- 1 Enter a HEX code
Type a 6-digit HEX code into the input field (without the # sign) or click the color swatch to open a visual color picker.
- 2 Click Convert
Press Convert → to instantly generate RGB, HSL, CSS variable, Tailwind class, and luminance values.
- 3 Browse shades
Click any shade in the Color Shades row to convert that lighter or darker variant.
- 4 Copy any value
Click the Copy button next to any output card to copy that value to your clipboard.
What can you do with this tool?
- Convert HEX color codes from Figma or Sketch to CSS RGB/HSL
- Find the nearest Tailwind CSS utility class for any color
- Generate a complete shade palette from a single brand color
- Check color luminance for WCAG accessibility contrast ratios
- Convert brand colors between color models for different use cases
- Get CSS variable syntax ready to paste into your stylesheet
Why use STB's Color Converter?
STB's Color Converter is completely free — no account, no email, no credit card. It runs entirely in your browser so your data never leaves your device. Whether you're a developer, student, or just someone who needs a quick color converter, open this tool and get results in seconds. No ads, no rate limits, no paywalls — just a fast, clean tool from Software That Benefits, a studio dedicated to free tools for developers and students.
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL?
HEX is a 6-character hexadecimal representation of a color (#6C63FF). RGB uses three numbers (0–255) for red, green, and blue channels. HSL uses hue (0–360°), saturation (%), and lightness (%) — making it much more intuitive for creating shades and tints of a color.
How accurate is the Tailwind color suggestion?
The Tailwind suggestion is based on the hue angle of your color and maps to the closest -500 shade in the Tailwind color palette. It's a nearest-match estimate — for pixel-perfect results, compare the generated shades visually with the official Tailwind color docs.
What is luminance and why does it matter?
Relative luminance is a measure of perceived brightness (0 = black, 1 = white). WCAG accessibility guidelines require a contrast ratio of at least 4.5:1 between text and background colors. Checking luminance helps you ensure your color choices are readable for users with visual impairments.
Looking for more free tools?
Browse All Free Tools →