Color Converter
Convert any color between HEX, RGB and HSL, see a live swatch with generated tints and shades, and copy the exact notation your CSS, design tool or API expects.
HEX vs RGB vs HSL — which one do you need?
The three notations describe the same color, but they are designed for different jobs. HEX (#2456D6) packs red, green and blue into three byte pairs and is the default for CSS and design handoffs. RGB spells the same bytes out as decimal numbers, which is easier to generate programmatically. HSL rethinks the color as hue (position on the wheel), saturation (grey vs. vivid) and lightness (black vs. white), which is why it is the best choice for building palettes: nudging lightness by ±10% gives you a hover state, while keeping hue constant keeps a UI coherent.
This page parses all three input formats and shows all three outputs, plus a generated scale from light tint to dark shade so you can pick accessible states without opening a design app. Click any output box to copy it.
FAQ
- Which format makes smaller CSS?
- HEX with 3 or 6 digits is the shortest. Modern CSS also accepts color-mix() if you only need tints.
- Is dark text or light text readable on my color?
- Use the tints row: if your color sits in the darker half, prefer light text. For exact ratios, WCAG requires 4.5:1 for body text.
- Does this page send colors anywhere?
- No backend exists — everything converts in the page's JavaScript.