Overview
Pick a color visually or by hex and copy it as HEX, RGB, HSL or a CSS variable — the four formats you actually paste into stylesheets. A large swatch previews the selection, and every representation updates live from a single source of truth.
How It Works
Choose a color with the native color input, or type a six-digit hex into the text field. The big preview swatch and all four value rows update together: uppercase HEX, rgb(r, g, b) with decimal channels, hsl(h, s%, l%) with rounded degrees and percentages, and a ready-to-paste var(--color, #hex) snippet with the hex as fallback. Each row has its own copy button, so grabbing the format your stylesheet wants is one click.
Step-by-Step Usage Guide
- Pick with the color input or type a #rrggbb value.
- Confirm the swatch shows the color you intended.
- Click Copy on the row matching your target format — HEX for design tools, RGB for graphics code, HSL for tweaking, CSS variable for stylesheets.
- Paste; the variable form already includes its own fallback value.
Technical Specifications & Standards
The tool performs two real conversions, not string tricks. Hex to RGB splits the six hex digits into three byte pairs and parses them as base-16, yielding the 0-255 decimal channels. RGB to HSL follows the standard definitions: lightness is the midpoint of the max and min channels, saturation is the chroma divided by (2 minus max minus min) above the midpoint and by (max plus min) below it, and hue is computed from whichever channel dominates — the red-green difference over red, blue-minus-red over green plus two, or red-minus-green over blue plus four — scaled to 360 degrees and rounded. The conversions are mathematically inverse for the values they emit, and the HSL output is what makes the picker useful beyond copying: hue is the color's identity, saturation its intensity, lightness its brightness, so deriving a hover shade is arithmetic rather than guesswork. The CSS-variable row is deliberately emitted with the hex inline as the fallback value, the pattern that keeps custom-property usage working even where the variable is not defined. Only six-digit hex is accepted; three-digit shorthand must be expanded first.
Targeted Use Cases
- Extracting a color from a design tool's hex output into CSS-ready RGB or HSL.
- Converting a brand hex into HSL to derive hover states (lower lightness) and muted variants (lower saturation).
- Producing a CSS custom-property declaration with an inline fallback for a stylesheet or email template.
- Checking what a hex value's hue, saturation and lightness actually are before recoloring a theme.
Notes & Gotchas
- Use HSL when you need related colors: shift lightness for hover and active states, saturation for disabled ones.
- Prefer the CSS-variable row with its inline fallback when introducing custom properties into legacy CSS.
- Expand three-digit hex (#abc) to six digits (#aabbcc) before typing it; only the long form is accepted.
- Trust RGB for pixel-exact work and HSL for human reasoning; the two rows always describe the same color.
Frequently Asked Questions
How do HSL and RGB differ?
They describe the same color differently: RGB gives red, green and blue intensities from 0-255; HSL gives hue in degrees plus saturation and lightness percentages. HSL is easier to reason about — change lightness for a darker shade without leaving the hue.
What is the CSS Variable row for?
It emits a ready-to-use custom property reference, var(--color, #yourhex), with your color inline as the fallback. That way the value works even in contexts where the variable is never defined.
Why will it not accept #abc?
The hex input requires the full six-digit form. Three-digit shorthand is a valid CSS abbreviation but the converter parses fixed byte pairs, so expand #abc to #aabbcc first.
Are the conversions exact?
Hex to RGB is exact. RGB to HSL is computed with the standard formulas and rounded to whole degrees and percentages for display, which can differ from a tool showing more decimals by a fraction of a unit — visually identical either way.