Skip to content
ToolFarmToolFarm
DesignPopular

Color Converter

Convert colors between HEX, RGB and HSL. Paste any format, get the others.

2 min read

What this tool does

Color converter that moves between HEX, RGB and HSL on the fly. Paste any format and the others appear instantly. Built for designers and frontend developers.

Once you have the color, take it to palette generator for a harmonious palette or to gradient generator to build a CSS gradient.

What you can use it for

  • Move a HEX from Figma to RGB to drop into a CSS variable.
  • Convert an RGB exported from Photoshop to HSL to tweak saturation.
  • Check the HSL equivalent of a brand color.
  • Verify that two colors with different notations are actually the same.

How to use it

  1. Paste a color in any format: #ff5500, rgb(255, 85, 0) or hsl(20, 100%, 50%).
  2. The other representations appear automatically.
  3. Copy whichever you need with a single click.
  4. Change the value and the conversion updates instantly.

Everything runs inside your browser. No file is uploaded to any server. See more tools in this field.

Common colors and their three representations

To see how HEX, RGB and HSL line up, here are a few well-known brand colors with how they read in each notation.

  • ToolFarm green

    HEX: #22C55E
    RGB: rgb(34, 197, 94)
    HSL: hsl(142, 71%, 45%)

  • Spotify black

    HEX: #191414
    RGB: rgb(25, 20, 20)
    HSL: hsl(0, 11%, 9%)

  • Twitter blue

    HEX: #1DA1F2
    RGB: rgb(29, 161, 242)
    HSL: hsl(203, 89%, 53%)

  • Stripe pink

    HEX: #FF5996
    RGB: rgb(255, 89, 150)
    HSL: hsl(338, 100%, 67%)

  • Hacker orange

    HEX: #FF6600
    RGB: rgb(255, 102, 0)
    HSL: hsl(24, 100%, 50%)

  • Ink black

    HEX: #0F172A
    RGB: rgb(15, 23, 42)
    HSL: hsl(222, 47%, 11%)

Other tools people reach for in the same flow.

Design
Design

Palette Generator

Generate harmonious color palettes from any base color.

Design

Gradient Generator

Build beautiful CSS gradients with a live preview.

Frequently asked questions

Which color formats are accepted?

HEX (with or without the hash, 3 or 6 digits), RGB (rgb() and rgba()) and HSL (hsl() and hsla()). If you paste a color with transparency, it's preserved in the other formats when possible.

How are HEX, RGB and HSL converted between each other?

HEX and RGB are the same information in different notation: 8 bits per channel. HSL describes a color by hue, saturation and lightness and is computed from RGB through a reversible formula. The conversion is mathematically exact.

Can I use the tool to check contrast?

The converter does not compute WCAG contrast, but HSL helps you understand how light or dark a color is (the L component), which is useful for pairing accessible tones.

Does it work with CSS color names like "tomato"?

For now the tool only reads numeric notations. For CSS names, look up the HEX equivalent in any reference and paste it here.