Overview
Converts a HEX colour into its rgb() and hsl() equivalents as you type, with a native colour picker for visual selection and a harmoniser strip that rotates the hue to suggest related colours.
How It Works
Enter a hex value by typing (#FFF and #FFFFFF both work) or by opening the colour picker. The RGB and HSL cards update live, each with its own Copy button. Below, Aesthetic Harmonizers shows five swatches derived from your colour at hue rotations of 0°, 20°, 40°, 60°, and 180° — the near neighbours of an analogous scheme plus the exact complementary.
Step-by-Step Usage Guide
- Type a hex code or pick a colour with the swatch input.
- Copy the rgb() or hsl() value you need from its card.
- Scan the harmoniser row for accent and complementary candidates.
- Adjust lightness in your stylesheet when a swatch is close but not right — harmonies keep saturation and lightness fixed.
Technical Specifications & Standards
Hex parsing accepts three-digit shorthand by doubling each digit, then reads the byte pairs as red, green, and blue. HSL comes from the standard max/min formulation over the normalised channels, rounded to whole degrees and percentages. The harmoniser swatches reuse your colour's saturation and lightness and change only the hue, which is why they always look related to the input even when a rotation lands in a clashing range.
Targeted Use Cases
- Converting a brand's hex specs into rgb()/hsl() for CSS custom properties.
- Moving to hsl() when a design needs programmatically lighter or darker variants of one hue.
- Quickly proposing analogous and complementary accents alongside a base colour.
- Matching a colour from a design mock into a codebase that declares colours in a different format.
Notes & Gotchas
- Conversion is one-way: hex goes in, but rgb() or hsl() strings are not accepted as input. Convert backwards elsewhere first if your source value is in another format.
- Invalid or partial hex does not error — it silently parses to black. If the swatch jumps to #000000, look for a stray character or a missing digit.
- There is no alpha support: for translucency, add the alpha channel in CSS (rgba(), hsl() with a slash, or eight-digit hex) after copying.
- CMYK is not part of this converter — it covers screen colours only. For print-matched values, use a dedicated CMYK tool.
Frequently Asked Questions
Does it support CMYK?
No. This tool converts between HEX, RGB, and HSL — the screen colour models. CMYK is a print colour space with its own conversion caveats.
Why did an invalid code turn black?
Unparseable hex falls back to zero for each channel rather than showing an error, so black is the tool's way of saying the input did not parse.
What are the five swatches under the outputs?
Your colour's hue rotated by 0°, 20°, 40°, 60°, and 180° at unchanged saturation and lightness — analogous neighbours and the complement.
Can I convert HSL back to hex?
Not in this tool; the direction is hex in, rgb() and hsl() out.