What the result contains
What This Tool Provides
Parse and convert CSS-style three- or six-digit HEX, integer RGB, and HSL colors. The page validates channel ranges, renders a labeled swatch, and provides copy buttons for CSS-ready HEX, RGB, and HSL output.
- Normalized six-digit lowercase HEX
- Integer rgb(r, g, b)
- Rounded hsl(h, s%, l%)
- A live preview with a textual color label
How to Use This Tool
- Enter a colorUse #RGB, #RRGGBB, rgb(r, g, b), or hsl(h, s%, l%).
- Check the previewConfirm the swatch and all three displayed notations.
- Copy a valueUse the button beside the exact CSS notation needed.
How It Works
HEX channels are parsed as base-16 numbers. RGB channels are normalized from 0–255 before conversion to hue, saturation, and lightness. HSL conversion computes chroma and a hue-sector offset before rounding back to integer RGB. All user input is assigned to text or validated CSS color properties; it is not injected as HTML.
Worked Examples
Primary red
- Input
#FF0000- Output
rgb(255, 0, 0) · hsl(0, 100%, 50%)
Maximum red with zero green and blue maps to hue 0 at full saturation and middle lightness.
Shorthand HEX
- Input
#FFF- Output
#ffffff · rgb(255, 255, 255)
Each shorthand digit expands twice, so F becomes FF for every channel.
Colors in a Workflow
Exact values matter most where something is generated rather than designed. A studio background for a cutout needs a specific value, and a QR code needs enough contrast between its modules to scan at all.
Format choices affect color too: flattening a PNG to JPG composites transparency onto white, and converting between formats can alter fidelity. Design palettes usually ship as JSON worth formatting.
Color Model Ranges
| Format | Accepted range | Meaning |
|---|---|---|
| HEX | #RGB or #RRGGBB | Three hexadecimal color channels |
| RGB | Each channel 0–255 | Red, green, and blue intensity |
| HSL hue | 0–360° | Position around the color wheel |
| HSL saturation | 0–100% | Color intensity |
| HSL lightness | 0–100% | Dark-to-light balance |
Rounding and Accessibility
HSL output is rounded to whole values, so converting an already rounded HSL value back may differ by a few channel points. The swatch does not declare accessibility: contrast requires a foreground/background pair and depends on text size.
Important Edge Cases
- Hue 360 is treated like hue 0.
- RGB values outside 0–255 and HSL percentages outside 0–100 are rejected.
- The converter does not accept named colors, alpha channels, HEX8, RGBA, or HSLA.
- Grays have no hue. When all three channels are equal, saturation is 0% and hue is reported as 0, so #808080 becomes hsl(0, 0%, 50%).
- Only comma-separated whole numbers are parsed. The space-separated rgb(23 132 95), decimals, percentage RGB channels, a deg unit on hue, and HSL without % signs are all rejected.
- The leading # is optional and HEX is case-insensitive: 17845F and #17845f give the same result, always shown in lowercase.
- A round trip can drift by more than one point. #17845f converts to hsl(160, 70%, 30%), and entering that HSL value returns #17825e.
Limitations
- Output is sRGB-style CSS notation without color-profile conversion.
- HSL values are rounded to whole numbers.
- No contrast ratio or color-vision simulation is included.
Input handling
Private Browser Processing
The color is parsed and converted locally. It is not submitted to Tiny Tiny Tools or placed in the URL.
Google Analytics records page visits and whether a tool finished or failed, but these tool implementations do not send field values, generated passwords, QR payloads, uploaded QR images, or camera frames to analytics or a Tiny Tiny Tools processing endpoint.
See the Privacy Policy for site-wide details.
Questions About This Tool
Does the converter support #FFF?
Yes. Three-digit HEX is expanded to six digits before conversion.
What RGB ranges are valid?
Red, green, and blue must each be integers from 0 through 255.
Are RGBA or HEX8 supported?
No. The current tool converts opaque HEX, RGB, and HSL only.
Does the preview prove the color is accessible?
No. Accessibility contrast depends on both foreground and background colors and the text size.