How to use
- Enter a color in any format (HEX, RGB, or HSL)
- All formats update automatically as you type
- Click Copy to copy any format to clipboard
- Click palette swatches to select tints and shades
- Use Random to generate a new color
About the color converter
The color converter turns one color into its HEX, RGB, and HSL values at the same time, so you can copy whichever format your CSS, design file, or brand sheet expects. Type a hex code, drag the red, green, and blue numbers, or adjust hue, saturation, and lightness, and every field updates together against a live preview swatch.
It works entirely on your device, so the colors you enter stay in the page. Reach for it when a design hands you a hex code and your stylesheet wants rgb(), or when you need a quick row of lighter and darker shades built from one starting color.
How to use
- Type a six-digit hex code in the HEX field, with or without the leading hash.
- Or set the R, G, and B numbers (0 to 255), or the H, S, and L numbers, to dial the color in.
- Watch the preview swatch and the other two formats update as you change any field.
- Select Copy next to HEX, RGB, or HSL to put that value on your clipboard.
- Click a swatch in the tint and shade row to jump to a lighter or darker version, or select Random Color to start from a fresh color.
Worked examples
#3B82F6 = rgb(59, 130, 246) = hsl(217, 91%, 60%)
A blue hex code from a design file shown in all three formats so you can paste the one your stylesheet uses.
rgb(34, 197, 94) = #22C55E
A green you mixed with the RGB sliders, ready to copy as a hex code for a button.
#3B82F6 row: #DBEAFE to #1E3A8A
The tint and shade strip turns one brand blue into lighter and darker steps for hover and border states.
Frequently asked questions
- How do I convert a HEX code to RGB?
- Type the hex code into the HEX field and the RGB and HSL fields fill in automatically. Then select Copy next to RGB to grab the rgb() value.
- What is the difference between RGB and HSL?
- RGB describes a color by its red, green, and blue light amounts, while HSL describes it by hue, saturation, and lightness. HSL makes it easier to nudge a color lighter or more muted, which is why the tint and shade row is built from HSL lightness.
- Do I need to include the hash symbol in a hex code?
- No. You can type 3B82F6 or #3B82F6 and the converter treats them the same. It expects six hex digits and adds the hash for you when it reports the value.
- What are the tint and shade swatches for?
- They take your current hue and saturation and show the color at several lightness levels, from a pale tint to a deep shade. Click any swatch to make it the active color, which is handy for building hover, border, and background variants from one base color.
- Does the Random Color button help with anything practical?
- It picks a fresh color across the full range, which is useful when you want a starting point to explore rather than a specific value. From there you can read its three formats or generate its tints and shades.
- Why does the RGB or HSL value look slightly different after a round trip?
- HEX, RGB, and HSL are rounded to whole numbers, so converting back and forth can shift a value by a point. The preview swatch shows the color you actually get, and the difference is not visible to the eye.
- Are the colors I enter saved anywhere?
- No. Conversions are calculated on the spot as you type, and the color values are never collected. Copy the values you want before you close the tab.
Ready for a quick Daily Challenge?
Play Daily Challenge on sts.games