FluffyBench

HEX, RGB, and HSL color converter

Enter one color and see the matching HEX, RGB, and HSL values.

FluffyShield Protected workspace
FluffyShield

Isolated workspace: other page scripts can't read your files. How FluffyShield works

Need RGB when you have a HEX code?

Paste your color into FluffyBench and copy the HEX, RGB or HSL value your next field needs. Conversion happens in your browser; your color isn't sent to an API.

FluffyBench · 4 min read · Reviewed

Convert and copy a color in FluffyBench

Think of HEX, RGB and HSL as different address styles for a color. Here's how to turn an HSL red into the format your next field needs in FluffyBench.

  1. FluffyBench Color input containing hsl(0, 100%, 50%) and Read as HSL.
    FluffyBench Color input containing hsl(0, 100%, 50%) and Read as HSL.
    Step 1. Paste a color. FluffyBench updates the results as you type.
    1. Enter hsl(0, 100%, 50%).
    2. Read as HSL confirms the input format.
  2. Red preview, HEX #FF0000, RGB rgb(255, 0, 0), and HSL hsl(0, 100%, 50%), with row copy buttons and Copy all.
    Red preview, HEX #FF0000, RGB rgb(255, 0, 0), and HSL hsl(0, 100%, 50%), with row copy buttons and Copy all.
    Step 2. Check that the preview is the red you meant. Copy the row that matches your destination's format; there's no file to download.
    1. Copy HEX, Copy RGB or Copy HSL copies that row.
    2. Copy all copies all three values on separate lines.
    3. The preview shows the red from your input.

The swatch previews the color on your screen; our color profiles guide explains why it can look different on another display.

FluffyBench rounds the HSL numbers, so that spelling can be an approximation. If your destination accepts HEX or RGB, use one of those to preserve FluffyBench's exact RGB result when you move between fields.

hsl(120.5, 100%, 50%) branches to exact HEX #00FF02, exact RGB rgb(0, 255, 2), and rounded HSL hsl(120, 100%, 50%).

One input, three outputs

HEX and RGB preserve the RGB result; HSL rounds the hue to a whole number in this example. How we measured

Which color values does FluffyBench accept?

FluffyBench accepts these four forms. Match your entry to one of them if you see this message: Enter HEX, rgb(r, g, b), or hsl(h, s%, l%).

Accepted: #RGB, #RRGGBB, rgb(r, g, b), hsl(h, s%, l%). Short HEX doubles each digit: #ABC becomes #AABBCC. Space-separated rgb(114 81 138) needs commas: rgb(114, 81, 138). rgba(1, 2, 3, 0.5) and #72518A80 aren't accepted; transparency stays separate.

Color input reference

Short HEX expands digit by digit; RGB needs commas, and transparency stays separate from the color value.

If copying is blocked, FluffyBench shows “Copy was unavailable. Select and copy the results.” You can select the result text directly.

Choose a color with FluffyBench's picker

Want to change a color before copying it? Open FluffyBench's picker and select the fields you want to edit.

  1. Pick a color button below the color input.
    Pick a color button below the color input.
    Step 1. Open FluffyBench's picker to edit a color in separate fields.
    1. Pick a color opens Choose a color.
  2. Complete Choose a color dialog, with presets above Palette input format set to HEX, the HEX color field, and Apply below.
    Complete Choose a color dialog, with presets above Palette input format set to HEX, the HEX color field, and Apply below.
    Step 2. Choose HEX for the code edit shown here.
    1. Palette input format selects HEX, RGB or HSL fields.
  3. HEX color field edited from the starting purple to #FF0000.
    HEX color field edited from the starting purple to #FF0000.
    Step 3. Replace the starting purple code with red.
    1. Enter #FF0000 in HEX color.
  4. Apply button in FluffyBench color picker.
    Apply button in FluffyBench color picker.
    Step 4. Apply the edited color to the converter.
    1. Apply updates the result rows and closes the picker.

What FluffyBench's HEX, RGB and HSL fields change

HEX, RGB and HSL give you different ways to edit FluffyBench's starting purple.

Real FluffyBench picker fields: HEX #72518A; RGB Red 114, Green 81, Blue 138; HSL Hue 275 degrees, Saturation 26%, Lightness 43%. RGB fields take 0 through 255; Saturation and Lightness take 0% through 100%.

Three alternative color field layouts

Choose one layout: HEX edits a code; RGB edits red, green and blue amounts; HSL edits the color family, vividness and lightness.

Here's what the Saturation and Lightness fields change. Each row varies one field while the other two stay fixed, so you can see which adjustment you want.

Saturation swatches go from gray through the starting purple to vivid purple. Lightness swatches go from black through the starting purple to white.

HSL adjustments, rendered for illustration

Rendered for illustration with FluffyBench's color conversion; the middle swatch in both rows is the starting purple.

Need to write a CSS gradient?

Search FluffyBench