Toolorio

Color Converter

Enter a color as HEX or RGB to instantly see it converted to HEX, RGB and HSL, with a live preview swatch.

RGB
rgb(79, 124, 255)
HSL
hsl(225, 100%, 65%)

Your files are processed locally in your browser. They are not uploaded to our servers.

How to use

  1. Type a 6-digit HEX color code, or adjust the R, G and B number fields.
  2. The swatch, RGB and HSL values update live as you type.
  3. Copy whichever format you need.

What is this tool?

Color Converter takes a color in HEX or RGB format and instantly shows the equivalent value in all three common web color formats — HEX, RGB and HSL — alongside a live color swatch. All the math happens locally in your browser.

Common uses

  • Converting a design tool's HEX color into CSS-ready RGB or HSL
  • Fine-tuning a color's hue, saturation or lightness using HSL
  • Checking what a HEX code actually looks like before using it
  • Translating a brand color between formats for different tools

Related tools

PWPassword GeneratorDeveloper Tools{}JSON FormatterDeveloper Tools64Base64 Encoder/DecoderDeveloper ToolsURLURL Encoder/DecoderDeveloper ToolsUIDUUID GeneratorDeveloper ToolsSHAHash GeneratorDeveloper ToolsTSTimestamp ConverterDeveloper ToolsC2JCSV to JSON ConverterDeveloper ToolsJ2CJSON to CSV ConverterDeveloper ToolsJ2TJSON to TypeScript ConverterDeveloper Tools0x1Number Base ConverterDeveloper ToolsIVRoman Numeral ConverterDeveloper ToolsUTMTracking URL CleanerDeveloper ToolsX2JXML to JSONDeveloper ToolsGFCSS Grid & Flexbox GeneratorDeveloper ToolsBSCSS Box-Shadow GeneratorDeveloper ToolsCJCronjob GeneratorDeveloper ToolsRXRegEx TesterDeveloper ToolsHEHTML Entities ConverterDeveloper ToolsTGFrequency & Tone GeneratorDeveloper ToolsSTAudio Stereo TesterDeveloper ToolsGCGPS Coordinate ConverterDeveloper Tools

FAQ

What HEX formats are supported?

Standard 6-digit HEX codes like #4f7cff are supported, with or without the leading #.

Can I edit the RGB values directly?

Yes, the R, G and B number fields are editable and update the HEX and HSL values instantly.

What is HSL useful for?

HSL (hue, saturation, lightness) makes it easy to create lighter, darker or more saturated variants of the same color.