Color Converter

This free color converter instantly converts between HEX, RGB and HSL color codes and works as a HEX color picker and color code finder in one. Convert HEX to RGB or RGB to HEX, pick a color from an image or the on-screen eyedropper, and copy CSS-ready values with a single click — a fast, browser-based color code picker for designers and developers.

What Is a Color Code? How Do HTML Color Codes Work?

A color code is a standard, numeric way of describing colors in digital media. Also known as HTML color codes, these values are used in CSS, HTML, graphics programs and mobile apps to express colors consistently across devices.

The three most common formats are:

• HEX (hexadecimal): written as #RRGGBB. Each pair of hexadecimal digits represents one color component from 0 to 255. For example #d63428 is a shade of red.
• RGB (Red, Green, Blue): three separate values, each from 0 to 255. Use rgba() for transparency.
• HSL (Hue, Saturation, Lightness): splits the color into hue, saturation and lightness. Ideal for building palettes and designing dark mode.

Color Code Comparison Table

The table below shows common color codes and their HEX, RGB and HSL equivalents:

How to Find a Color Code — Finding a HEX Code

There are several ways to find a color code with this tool:

• Color picker: click anywhere on the palette; the HEX, RGB and HSL values update automatically.
• Enter a HEX value: type the HEX code (#RRGGBB) you already know.
• Enter RGB or HSL: type the numeric values to convert the other formats instantly.
• Preset colors: pick a frequently used color from the built-in palette.

To find a HEX code elsewhere, you can also use your browser's developer tools (F12 → Elements → Styles) or the color panel in design apps such as Figma or Photoshop. As a HEX code finder it works both ways: paste a HEX value to read its RGB and HSL equivalents, or enter RGB numbers to get the HEX.

Converting HEX to RGB and RGB to HEX

The two most common conversions are HEX to RGB and RGB to HEX, and this tool does both automatically. A HEX code such as #d63428 is just three hexadecimal pairs — RR, GG and BB — so converting HEX to RGB means reading each pair as a number from 0–255: #d63428 becomes rgb(214, 52, 40). Going the other way, RGB to HEX converts each 0–255 value into a two-digit hexadecimal pair, so rgb(214, 52, 40) becomes #d63428. Whenever you change one format, the converter recalculates the others in real time.

How to Use an HTML Color Code in CSS

HTML color codes are used in CSS style declarations with various properties. All three formats have full browser support:

• With HEX: color: #d63428; or background-color: #6366f1;
• With RGB: color: rgb(214, 52, 40); — for transparency rgba(214, 52, 40, 0.5)
• With HSL: color: hsl(4, 69%, 50%); — for transparency hsla(4, 69%, 50%, 0.8)
• CSS variables: define --primary: hsl(4, 69%, 50%); and use color: var(--primary);

Color Theory in Web Design: Harmony and Palette Building

Choosing the right colors is as much aesthetic as it is technical. Understanding the basics of color theory helps you build a palette that fits your brand or project.

• Complementary colors: opposite positions on the color wheel create strong contrast — for example blue (#0000ff) with orange (#ffa500).
• Analogous colors: neighboring colors on the wheel create a calm, harmonious look, such as blue, blue-green and green.
• Triadic colors: three colors evenly spaced around the wheel — like red, yellow and blue — make a vivid, balanced palette.
• Monochromatic palette: use one hue at different saturation and lightness values. In HSL keep H fixed and vary S and L.
• Neutral colors: black, white and grays pair easily with any color and are common for typography and backgrounds.

Color Accessibility: WCAG Contrast Standards

Web accessibility standards (WCAG 2.1) define minimum contrast ratios between text and background. Following them improves user experience and is often a legal requirement.

• AA level (normal text): at least 4.5:1 contrast. Dark gray (#767676) on white (#ffffff) just meets this.
• AA level (large text): at least 3:1 is enough for 18pt and larger type.
• AAA level: the highest standard requires 7:1 contrast. Recommended for users with low vision.
• Color-blindness friendly: avoid conveying meaning with color alone; add icons, shapes or text. Red-green color blindness is the most common type.

Use this color converter to find HEX values and test them in contrast tools. It also works as a CSS color finder: copy any selected color as CSS-ready HEX, RGB or HSL.

Differences Between HEX, RGB and HSL

How to Use This Color Converter

1. Pick a color or enter a code: click the palette or type a value into the HEX, RGB or HSL box.
2. Automatic conversion: whenever a value changes, all of HEX, RGB and HSL update instantly.
3. Pick from an image (optional): switch to the "From Image" tab, upload a photo and click any pixel to grab its colour values.
4. Copy: use the HEX, RGB or HSL copy button and paste the value straight into your CSS.

See the FAQ section below for more on what a color code is, how to find a color code and how HTML color codes work.