How to convert HEX to RGB colors and back: guide for designers and developers

Color models are mathematical systems for representing colors digitally. Whether you work in web development, graphic design, branding, or any visual discipline, you need to understand at least three models: HEX, RGB, and HSL. Each has advantages depending on the context.

Modern CSS accepts all three formats. You can write the same red in these ways:

• HEX: #FF0000
• RGB: rgb(255, 0, 0)
• HSL: hsl(0, 100%, 50%)

All three produce exactly the same color, but their usefulness varies. HEX is compact for writing in CSS. RGB is intuitive when thinking about light mixing. HSL is ideal when you want to adjust lightness or saturation without changing the hue.

With the NexTools color converter, you can convert between all these formats instantly and see a real-time preview of the color.

The HEX (hexadecimal) format represents colors with a # sign followed by 6 hexadecimal digits (0-9, A-F). The digits are grouped in pairs: the first two for red, the next two for green, and the last two for blue.

Structure: #RRGGBB

Each pair ranges from 00 (0 decimal, none of that color) to FF (255 decimal, maximum intensity):

Color	HEX	Explanation
Black	#000000	Zero red, green, and blue
White	#FFFFFF	Maximum red, green, and blue
Pure Red	#FF0000	Maximum red, no green or blue
Pure Green	#00FF00	No red, maximum green, no blue
Pure Blue	#0000FF	No red, no green, maximum blue
Yellow	#FFFF00	Maximum red and green, no blue
Medium Gray	#808080	Equal medium amounts

Shorthand HEX: When each pair has repeated digits, you can abbreviate: #FF0000 = #F00, #AABBCC = #ABC. But #A1B2C3 cannot be shortened.

HEX with transparency: You can add two more digits for alpha (opacity): #FF000080 is red at 50% opacity. 00 = fully transparent, FF = fully opaque.

The RGB (Red, Green, Blue) model is based on additive light synthesis. Each component ranges from 0 to 255, and mixing them produces millions of colors (exactly 16,777,216 combinations: 256 x 256 x 256).

In CSS: rgb(red, green, blue)

Practical examples:

• rgb(255, 165, 0) = orange
• rgb(128, 0, 128) = purple
• rgb(0, 128, 128) = teal
• rgb(255, 192, 203) = pink

With transparency (RGBA): rgba(255, 0, 0, 0.5) = red at 50% opacity. The fourth value (alpha) goes from 0 (transparent) to 1 (opaque).

HEX to RGB conversion: Convert each hexadecimal pair to decimal. For #3A7BF2: 3A = 58, 7B = 123, F2 = 242. Result: rgb(58, 123, 242).

RGB to HEX conversion: Convert each decimal value to a 2-digit hexadecimal. For rgb(58, 123, 242): 58 = 3A, 123 = 7B, 242 = F2. Result: #3A7BF2.

The HSL (Hue, Saturation, Lightness) model is the most intuitive for humans because it separates color into three easy-to-understand dimensions:

• Hue: The base color in degrees from 0 to 360. 0°/360° = red, 120° = green, 240° = blue, 60° = yellow, 180° = cyan, 300° = magenta.
• Saturation: How "vivid" the color is, from 0% (gray) to 100% (pure color).
• Lightness: How light or dark, from 0% (black) to 100% (white). 50% is the pure color.

Why HSL is powerful: If you have a blue button hsl(220, 80%, 50%) and want its lighter hover version, simply increase the lightness: hsl(220, 80%, 60%). With HEX or RGB, you would have to manually calculate each component.

Creating palettes with HSL:

• Monochromatic: Keep the same hue, vary saturation and lightness.
• Complementary: Add 180° to the hue. The complement of hsl(220, 80%, 50%) is hsl(40, 80%, 50%).
• Triadic: Add 120° and 240° to the hue. Three equidistant colors on the color wheel.

Experiment with color palettes using the palette generator.

These are the colors you will encounter most frequently in web design with their equivalents:

Name	HEX	RGB	Common use
Tailwind Blue 500	#3B82F6	rgb(59,130,246)	CTAs, links
Tailwind Red 500	#EF4444	rgb(239,68,68)	Errors, alerts
Tailwind Green 500	#22C55E	rgb(34,197,94)	Success, confirmation
Tailwind Yellow 500	#EAB308	rgb(234,179,8)	Warnings
Tailwind Gray 900	#111827	rgb(17,24,39)	Primary text
Tailwind Gray 100	#F3F4F6	rgb(243,244,246)	Light backgrounds
NexTools Primary	#C75B39	rgb(199,91,57)	Terracotta, brand

To find the exact color of any website, use the color picker tool which lets you enter a HEX and see all its equivalents.

While RGB and HEX are for screens (light), CMYK (Cyan, Magenta, Yellow, Key/Black) is the model for printing (ink). If you ever send a design to a printer, you need to know the difference.

Why colors look different in print: A screen emits light (RGB) while paper reflects light (CMYK). The color range (gamut) of CMYK is smaller than RGB, which means some vibrant colors you see on screen cannot be reproduced exactly on paper.

RGB/HEX to CMYK conversion is not exact and depends on the printer's color profile (ICC profile). As a general rule:

• Electric blues and neon greens lose vibrancy in CMYK
• Reds and oranges usually hold up well
• Pure black in CMYK is C:75 M:68 Y:67 K:90 (called "rich black"), not C:0 M:0 Y:0 K:100

If designing for print, always work in CMYK from the start rather than converting at the end.

Choosing colors is not just about aesthetics. The WCAG 2.1 guidelines (Web Content Accessibility Guidelines) establish minimum contrast ratios between text and background:

• AA (minimum): Contrast ratio of 4.5:1 for normal text, 3:1 for large text (18px+ or 14px+ bold)
• AAA (optimal): Contrast ratio of 7:1 for normal text, 4.5:1 for large text

Example: white text #FFFFFF on blue background #3B82F6 has a contrast ratio of 3.1:1, which passes AA for large text but NOT for normal text. You need a darker blue like #1D4ED8 (ratio 6.1:1) to meet AA for normal text.

Always check the contrast of your color combinations with the contrast checker tool before publishing your design.

Fact: Approximately 8% of men and 0.5% of women have some degree of color blindness. Never use color alone to convey critical information (also use icons, patterns, or text).

In modern web development, colors are managed with CSS Custom Properties (CSS variables) to facilitate themes and dark mode:

:root {
  --color-primary: #C75B39;
  --color-background: #FFFFFF;
  --color-text: #1A1A1A;
}

.dark {
  --color-primary: #E8956E;
  --color-background: #1A1A1A;
  --color-text: #F5F5F5;
}

With this approach, changing the entire palette of a site requires modifying only the variables, not every individual selector. Frameworks like Tailwind CSS use this pattern internally with their color system.

Tip: When creating a dark theme, do not simply invert colors. Slightly reduce saturation (saturated colors "vibrate" on dark backgrounds) and use warm grays instead of pure black (#1A1A1A instead of #000000).

Generate custom CSS gradients for your themes with the gradient generator.