Color Converter
Convert HEX, RGB, and HSL locally with a live swatch.
#2563eb rgb(37, 99, 235) hsl(221, 83%, 53%)
Color Converter turns colors between HEX, RGB, and HSL with a live swatch so you can copy the format your stylesheet or design token needs—entirely in the browser.
How it works
Paste a HEX, rgb(), or hsl() value. The tool normalizes the color and shows HEX, RGB, and HSL side by side with a preview swatch.
Benefits
- HEX, RGB, and HSL in one view
- Accepts #rgb and #rrggbb
- Live swatch preview
- Local conversion with instant copy
Use cases
- Translate Figma tokens into CSS
- Normalize brand colors across docs
- Hand off HEX to engineers as rgb()
- Debug mismatched theme variables
Best practices
- Prefer six-digit HEX in shared tokens
- Keep alpha separate if your pipeline needs it
- Verify rounded HSL percentages before shipping
- Copy the exact format your linter expects
Common mistakes
- Mixing commas and slash syntax inconsistently
- Assuming HSL round-trips with zero precision loss
- Forgetting the leading # in HEX
- Using device-dependent color spaces without conversion
Privacy
Color Converter processes colors locally in your browser. ToolHub does not receive your inputs unless you enable on-device history.
Frequently asked questions
- Which formats can I paste?
- HEX (#rgb or #rrggbb), rgb(r, g, b), and hsl(h, s%, l%) are accepted.
- Does Color Converter upload swatches?
- No. Parsing and conversion stay in your browser.
- Why do HSL numbers look rounded?
- Hue is shown in degrees and S/L as percentages for CSS readability.
- Can I convert from named CSS colors?
- Use CSS Color Name Converter, then paste the HEX here for other formats.
- Is the preview color-managed?
- The swatch uses standard CSS sRGB as rendered by your browser.
Related tools
Contrast Checker
color
Check WCAG AA/AAA contrast ratios for text colors.
- contrast
- wcag
- accessibility
- aa
Palette Generator
color
Generate complementary, analogous, and triadic palettes from a base HEX.
- color
- palette
- design
Color Picker
color
Sample image colors and copy hex/rgb locally.
- color
- picker
- palette
- hex
Color Mixer
color
Blend two HEX colors with a mix ratio.
- color
- palette
- design
Complementary Color Finder
color
Find complementary and split-complementary colors.
- color
- palette
- design
CSS Color Name Converter
color
Map CSS color names to HEX and back.
- color
- palette
- design