Color Converter
Convert color codes between HEX, RGB, and HSL formats with integer component values and a live visual preview.
Run tool
Convert color codes across common design and web standards directly in your browser. This tool translates color values among hexadecimal notation, RGB channel triplets, and HSL components. You can enter a 3-digit shorthand or 6-digit full hexadecimal code, with or without a leading hash sign. For RGB input, provide three channel numbers between 0 and 255. For HSL input, specify hue, saturation, and lightness; hue automatically wraps within a 360-degree circle, while saturation and lightness values above 100 percent clamp cleanly to the standard ceiling.
Once you submit your color, the tool generates matching hexadecimal, RGB, and HSL text strings alongside clean integer channel figures and a live color preview block. This makes it straightforward to inspect palette values, migrate styles between CSS stylesheets, and check component breakdowns across distinct formats. If an input field remains empty or uses an unsupported format label, the converter prompts you to provide valid color text.
Instructions
- Select your source format: hex, rgb, or hsl.
- Enter your color string into the Color field, such as #3b82f6, rgb(59, 130, 246), or hsl(217, 91%, 60%).
- Click Run to process the color values.
- Review the converted representations, channel breakdowns, and the live color preview block.
Examples
- Convert hexadecimal #ff5733 to RGB rgb(255, 87, 51) and HSL hsl(11, 100%, 60%).
- Convert RGB rgb(0, 128, 255) to hex #0080ff and HSL hsl(210, 100%, 50%).
- Convert HSL hsl(120, 100%, 25%) to hex #008000 and RGB rgb(0, 128, 0).
FAQ
Can I enter hex colors without the hash sign?
Yes, both three-digit and six-digit hex codes can be entered with or without the leading # prefix.
How does the tool handle HSL values above 100%?
Parsed hue angles are wrapped within 0 to 360 degrees using modulo arithmetic, while saturation and lightness values exceeding 100% are clamped to 100%.
What source formats are supported?
The converter accepts hex, rgb, and hsl as source formats using exact lowercase identifiers.
What happens if an input is left blank?
An empty color field will prompt an error indicating that valid input is required.