Color Converter (HEX / RGB / HSL)

Convert colors between HEX, RGB and HSL instantly, with a live swatch and picker. Free, in your browser.

Conversions
HEX#1f883d
RGBrgb(31, 136, 61)
HSLhsl(137, 63%, 33%)

Converts between HEX, RGB and HSL live in your browser.

How to use the Color Converter (HEX / RGB / HSL)

  1. Enter a color. Type a HEX, RGB or HSL value, or use the picker.
  2. See conversions. All three formats update live with a swatch.
  3. Copy. Copy whichever format you need.

Free to use — premium coming soon

FREE
  • HEX/RGB/HSL
  • Live swatch & picker
  • 100% private
PREMIUM
  • Remove ads
  • Palettes & contrast checker

About the Color Converter (HEX / RGB / HSL)

The Color Converter translates a single color between the three formats you meet most often on the web: HEX (#RRGGBB), RGB (red, green, blue from 0 to 255), and HSL (hue, saturation, lightness). All three describe the same point in the RGB color space, just written differently. HEX and RGB are two notations of the identical model: each pair in a hex code is one channel written in base 16, where 'ff' equals 255. HSL re-expresses that same point as a hue angle, a saturation percentage, and a lightness percentage, which is far easier for a human to read and adjust by hand.

Reach for this tool whenever a design hands you a color in one format but your code or canvas needs another. A brand guide might list #1f883d, your CSS variable wants rgb(31, 136, 61), and you want hsl(134, 63%, 33%) so you can build a lighter hover state by nudging the lightness up. Designers also use HSL to generate tints and shades of one hue, to find a darker border from a fill color, or to check that two colors share the same hue. Developers paste RGB values from a screenshot picker and need the hex code for a stylesheet.

Conversion between HEX and RGB is exact and lossless because they encode the same 8-bit channels. RGB to HSL involves real math: each channel is scaled to 0-1, lightness is (max + min) / 2, saturation depends on whether lightness sits below or above 0.5, and hue is derived from which channel is largest, then multiplied by 60 to land on the 0-360 degree color wheel. Because HSL percentages are rounded for readability, converting RGB to HSL and back can shift a value by one unit on a channel. For pixel-perfect work, treat HEX or RGB as the source of truth.

Everything here runs in your browser. The color you type never leaves your device, is not sent to a server, and is not logged, so you can convert client palettes or unreleased brand colors without privacy concerns. There is no upload, no account, and no rate limit. The converter accepts 3-digit shorthand hex (#f0c expands to #ff00cc), full 6-digit hex with or without the leading hash, and standard RGB and HSL triplets, and it shows all three equivalents at once so you can copy whichever notation your project expects.

Frequently asked questions

How do I convert a HEX code to RGB?

Split the six-digit hex into three pairs and read each as a base-16 number: the first pair is red, the second green, the third blue, each from 00 (0) to ff (255). For example #1f883d is rgb(31, 136, 61). This tool does it instantly and is fully reversible because HEX and RGB store the exact same values.

When should I use HSL instead of HEX or RGB?

Use HSL when you want to read or tweak a color by eye. Because it separates hue from saturation and lightness, you can darken a color by lowering the lightness, mute it by lowering the saturation, or shift its tone by changing the hue, all without recalculating channels. That makes HSL ideal for building color scales, hover states, and theme variations.

Why does my HSL value change slightly when I convert it back to RGB?

HSL saturation and lightness are shown as whole-number percentages and hue as a whole-number degree, so the converter rounds them for readability. Converting that rounded HSL back to RGB can be off by a unit on a channel. To avoid drift, keep your original HEX or RGB value as the authoritative source.

What is the difference between a 3-digit and 6-digit hex code?

A 3-digit hex is shorthand that works only when each channel's two digits are identical: #f0c expands to #ff00cc by doubling each character. The 6-digit form (#RRGGBB) can express any of the 16,777,216 RGB colors, while the 3-digit form can express only 4,096 of them.

Can this tool handle transparency or an alpha channel?

This converter focuses on the opaque HEX, RGB, and HSL formats. Alpha is added separately as an 8-digit hex (#RRGGBBAA), as rgba(), or as hsla(), where the final value sets opacity from 0 to 1. Convert the solid color here, then append your alpha value in the format your code uses.

From our blog

How to Read, Fix, and Shrink JSON: A Practical Formatter Guide

By the Super Simple Digital Tools Team · Updated June 2026

JSON is everywhere in modern development, but it almost never arrives in a form you can read. API responses, webhook payloads, and minified config files tend to be a single dense line, and the moment the structure gets nested more than a level or two, scanning it by eye becomes guesswork. A formatter solves the first half of the problem by re-indenting that line into a tidy tree where every key sits at the depth it belongs to. The second half, validation, tells you whether the text is even legal JSON before you waste time debugging the wrong thing.

Start by pasting your text and formatting it. If it beautifies cleanly, the JSON is well-formed and you can read off the structure: objects in curly braces, arrays in square brackets, and indentation showing what is nested inside what. If formatting fails, the tool stops at the first syntax error and tells you the line and column. That location is the fastest path to a fix, because JSON parsers fail at the exact character where the grammar breaks, not at the conceptual mistake somewhere above it.

Most validation failures come down to a short list of habits borrowed from JavaScript or Python. Trailing commas are the number one offender: a comma after the last array element or object property is fine in JavaScript but illegal in JSON. Single quotes are second; JSON requires double quotes for every string and every key, with no exceptions for simple alphanumeric names. Comments are third, since JSON has no comment syntax at all. Knowing these three rules resolves the large majority of the errors people hit when writing JSON by hand.

Once your JSON is valid, minification is the inverse operation. The tool walks the parsed structure and writes it back with no spaces, no newlines, and no indentation, producing the smallest faithful representation of the same data. This is what you want when embedding JSON in a query string, a single-line environment variable, or a request body where every byte counts. Because both directions work from the same parsed tree, you can beautify to inspect, edit, and then minify again without any risk of the formatting step altering your values.

One thing a formatter does not do is judge whether your JSON is correct for its purpose. Syntactic validity only means the text follows the grammar; it says nothing about whether a field is named the way your API expects, whether a date string is in the right format, or whether a number is within an allowed range. Those are semantic concerns, and they belong to JSON Schema validation or to your application's own checks. Treat the formatter as the first gate that catches broken syntax cheaply, then layer schema validation on top when correctness of content matters.

  • If validation fails, look at the line just above the reported position first; a missing comma or an unclosed bracket often shows up as an error on the next token.
  • When pasting an API response from DevTools or curl, beautify it immediately so deeply nested fields become easy to trace before you start editing.
  • Use minify for values you have to fit on one line, such as a JSON-typed environment variable or a config field, but keep a beautified copy for editing.
  • If you need trailing commas or comments for readability, you are working in JSON5 or JSONC, not JSON; strip them before sending the data to a strict parser.

Read the full guide →

Tool by the Super Simple Digital Tools Team. Reviewed by our editorial team. Free to use, no signup required.

Related tools