RGB to Hex Converter

The RGB to Hex Converter instantly converts RGB color values (Red, Green, Blue) to hexadecimal color codes used in web design, CSS, and graphic applications. It provides multi-format output including HSL, HSV, and CMYK, along with CSS code snippets, color harmony palettes, WCAG accessibility contrast checking, and nearest named color matching.

How RGB to Hex Conversion Works

RGB (Red, Green, Blue) and Hex are two different notations for the same additive color model used by electronic displays. Each color channel ranges from 0 to 255 in decimal. To convert to Hex, each decimal channel value is expressed as a two-digit hexadecimal number (base 16), and the three pairs are combined with a # prefix.

The Conversion Formula

For each channel value V (0–255):

1. Divide V by 16. The quotient is the first hex digit, the remainder is the second.
2. Map digits 10–15 to letters A–F.
3. Combine: #RRGGBB

Example: RGB(255, 165, 0) → 255 = FF, 165 = A5, 0 = 00 → #FFA500 (Orange)

Color Formats Explained

HEX (Hexadecimal)

The most common color notation in web development. A # followed by 6 hex digits representing RR, GG, BB. Shorthand (#RGB) is available when each pair has identical digits, e.g. #FF0000 → #F00.

HSL (Hue, Saturation, Lightness)

A more intuitive model for designers. Hue is an angle on the color wheel (0°–360°), Saturation is vividness (0–100%), and Lightness ranges from black (0%) through pure color (50%) to white (100%). HSL makes it easy to create color variations by adjusting a single parameter.

HSV / HSB (Hue, Saturation, Value / Brightness)

Similar to HSL but defines brightness differently. Value of 100% means the color is at its brightest possible state for that hue and saturation. This model is used in many graphic design applications like Photoshop and Figma.

CMYK (Cyan, Magenta, Yellow, Key/Black)

A subtractive color model used in print. While screens add light (RGB), printers mix inks that absorb light (CMYK). Converting to CMYK is essential when preparing digital designs for physical printing to ensure color accuracy.

Color Harmony Types

Color harmonies are combinations of colors based on their positions on the color wheel. This tool generates four types:

• Complementary: The color directly opposite on the wheel (180° apart). Creates maximum contrast and visual impact.
• Analogous: Colors adjacent on the wheel (±30°). Creates harmonious, comfortable designs found commonly in nature.
• Triadic: Three colors evenly spaced (120° apart). Offers vibrant contrast while maintaining balance.
• Split-Complementary: The two colors adjacent to the complement (150° and 210°). A softer alternative to complementary with more variety.

WCAG Accessibility Contrast

The Web Content Accessibility Guidelines (WCAG) define contrast ratios to ensure readability:

Common RGB to Hex Conversions

Frequently Asked Questions

How do you convert RGB to Hex?

To convert RGB to Hex, take each color channel value (0-255), divide by 16 to get the quotient and remainder, then map each to hexadecimal digits (0-9, A-F). Combine all three 2-digit hex values with a # prefix. For example, RGB(255, 165, 0) becomes #FFA500: 255→FF, 165→A5, 0→00.

What is the difference between RGB and Hex color codes?

RGB and Hex represent the same colors using different notation. RGB uses three decimal numbers (0-255) for Red, Green, and Blue channels, like rgb(255, 0, 0). Hex uses a # followed by six hexadecimal digits, like #FF0000. Both encode identical color information — Hex is simply a more compact base-16 representation of the same RGB values.

What color model does Hex use?

Hex color codes use the RGB (Red, Green, Blue) additive color model, the same model used by computer displays. The six hex digits represent three pairs: the first two for red, middle two for green, and last two for blue. Each pair ranges from 00 (0 intensity) to FF (maximum 255 intensity).

What is a WCAG contrast ratio?

WCAG contrast ratio measures the luminance difference between two colors, used to ensure text readability for people with visual impairments. The ratio ranges from 1:1 (no contrast) to 21:1 (maximum). WCAG 2.0 requires at least 4.5:1 for normal text (AA level), 3:1 for large text (AA Large), and 7:1 for enhanced contrast (AAA level).

How do you convert RGB to HSL?

To convert RGB to HSL: normalize R,G,B to 0-1, find the max and min values, calculate Lightness as (max+min)/2, Saturation depends on lightness, and Hue is calculated based on which channel is dominant (0° for red, 120° for green, 240° for blue) adjusted by the difference between channels.

What is CMYK and when should I use it?

CMYK stands for Cyan, Magenta, Yellow, and Key (Black). It is a subtractive color model used in print. While RGB/Hex are used for screens (additive light mixing), CMYK is essential for print design because printers mix ink rather than light. Converting RGB to CMYK helps ensure your digital colors translate correctly to printed materials.

Additional Resources

• WCAG 2.1 Contrast Guidelines