Generators Category Tool

Color Picker and Color Format Converter (HEX, RGB, HSL)

Pick colors and retrieve equivalent codes for design and web development projects.

Includes
  • Browser visual picker
  • Conversion between HEX, RGB, and HSL
  • Instant preview
  • Readable text color suggestion
  • One-click copy of each format
Color selection

Adjust the color visually and follow every format in real time

Pick a color with the browser selector, refine the HEX or the RGB channels, and copy the format ready for CSS, interfaces, and documentation.

Preview
--

Adjust the fields to see the color.

Use the #RRGGBB format.

Enter a HEX color.

Use numbers from 0 to 255.

Use numbers from 0 to 255.

Use numbers from 0 to 255.

HEXInvalid
RGBrgb(0, 0, 0)
HSLhsl(0, 0%, 0%)
Who it is for

Take the same color to HEX, RGB, and HSL without doing the math

The color picker is for designers, front-end developers, and anyone building presentations who needs to repeat an exact color in another program.

  • Convert a brand HEX code to RGB or HSL.
  • Build a color from its red, green, and blue channels.
  • See whether light or dark text is more readable on the color.
Instructions

How to use it

  1. 1. Enter a six-digit HEX or adjust the R, G, and B values.
  2. 2. Check the swatch and the generated formats.
  3. 3. Look at the suggested text color for the swatch.
  4. 4. Copy the format you need.
How it works

Three ways to write the same color

HEX, RGB, and HSL describe the same color in different ways. The tool converts between them automatically.

HEX

Six hexadecimal digits, two for each channel.

#FF6600 means red FF, green 66, and blue 00.

RGB

Each channel ranges from 0 to 255.

It is the format used by many image editing tools.

HSL

Hue in degrees, saturation and lightness in percent.

It makes lighter or darker variations of the same color easier.

Verifiable example

Orange #FF6600

When you enter the HEX below, the tool shows the equivalent values.

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

For this orange, the suggested text color is white, because the color is not light enough for dark text.

Limits

Picker limits

The tool works with opaque screen colors.

  • HEX must have six digits: the short form, such as #F60, and transparency are not accepted.
  • The text suggestion uses a brightness estimate and does not replace a full accessibility contrast check.
  • Print colors, such as CMYK and Pantone, are not converted.
FAQ

Frequently asked questions

What is the difference between HEX, RGB, and HSL?

HEX represents color with hexadecimal components; RGB combines red, green, and blue; HSL describes hue, saturation, and lightness. They are different ways to represent the same color.