Understanding Color Models: RGB, HEX, and HSL
Colors on digital screens are produced by mixing light. Unlike paint, which uses subtractive color mixing (combining pigments absorbs wavelengths), screens use additive color mixing — combining red, green, and blue light to create every visible color. This fundamental principle underlies all the color models discussed below.
RGB — Red, Green, Blue
The RGB color model is the most direct representation of how screens produce color. Each channel (red, green, blue) accepts a value from 0 to 255, representing the intensity of that color component. A value of 0 means the channel is completely off; 255 means it is at full brightness.
When all three channels are at 0, the result is black — no light is emitted. When all three are at 255, the result is white — full intensity of all colors. Equal values across all channels produce shades of gray. For example, rgb(128, 128, 128) is a medium gray.
RGB is the native format for most image processing, video, and display hardware. It maps directly to the physical subpixels on your monitor, which is why it is the default color model in most programming contexts.
HEX Color Codes
A HEX color code is simply an RGB value written in hexadecimal notation. The format is #RRGGBB, where each pair of characters represents one channel as a two-digit hexadecimal number (00 to FF). For example, #FF0000 is pure red (R=255, G=0, B=0).
CSS also supports a shorthand 3-digit format: #RGB, where each digit is doubled. So #F00 is equivalent to #FF0000, and #3B8 expands to #33BB88.
HEX codes are the most common color format in web development because they are compact, easy to copy-paste, and universally supported in CSS, HTML, SVG, and design tools.
HSL — Hue, Saturation, Lightness
The HSL color model represents color in a way that is more intuitive for humans. Instead of thinking in terms of how much red, green, or blue light to mix, you describe color using three properties:
- Hue (H): The color’s position on the color wheel, measured in degrees from 0 to 360. Red is at 0°, green at 120°, blue at 240°, and red again at 360°.
- Saturation (S): The intensity or purity of the color, from 0% (completely desaturated / gray) to 100% (fully saturated / vivid).
- Lightness (L): How light or dark the color is, from 0% (black) to 100% (white). A value of 50% gives the most vivid version of the hue.
HSL is particularly useful for creating color palettes. Want a darker shade of a color? Decrease lightness. Want a pastel? Decrease saturation and increase lightness. These adjustments are much less intuitive in RGB, where you would need to adjust all three channels simultaneously.
When to Use Which Format
Each color format has its strengths depending on the context:
- HEX: Best for CSS, design specs, and quick copy-paste. Most designers and developers think in HEX for static colors.
- RGB: Best when you need to manipulate individual channels programmatically, work with image data (canvas, WebGL), or interface with graphics APIs.
- HSL: Best for generating color palettes, creating color themes, and making perceptual adjustments (lighter, darker, more or less saturated).
CSS supports all three formats natively: color: #3b82f6, color: rgb(59, 130, 246), and color: hsl(217, 91%, 60%) all produce the same blue.
Color in CSS
CSS has evolved significantly in how it handles color. Beyond the traditional rgb() and hsl() functions, modern CSS supports:
rgba()andhsla()for alpha transparency (though modern CSS allows a slash syntax:rgb(59 130 246 / 0.5)).- Named colors like
rebeccapurple,tomato, andcornflowerblue— CSS defines 148 named colors. oklch()andoklab()— perceptually uniform color spaces that produce more predictable results when interpolating between colors (gradients, animations).color-mix()for mixing two colors directly in CSS without JavaScript.
Accessibility and Color Contrast
Color choice is not just an aesthetic decision — it directly impacts accessibility. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and its background:
- Level AA: 4.5:1 for normal text, 3:1 for large text (18px+ bold or 24px+ regular).
- Level AAA: 7:1 for normal text, 4.5:1 for large text.
Contrast ratio is calculated from the relative luminance of two colors. A pure white background (#FFFFFF) with black text (#000000) has the maximum contrast ratio of 21:1. Light gray text on a white background might only achieve 2:1, which fails WCAG standards and makes content difficult to read for users with low vision.
When selecting colors for your design system, always verify contrast ratios. Tools that show you the computed ratio can help you choose accessible color combinations without guesswork.
Color Spaces: sRGB, Display P3, and Beyond
The standard HEX/RGB values you use in CSS operate within the sRGB color space, which was defined in 1996 and covers approximately 35% of visible colors. For decades this was sufficient, but modern displays — particularly Apple’s Retina displays, OLED screens, and professional monitors — support the Display P3 color space, which covers about 25% more colors than sRGB.
CSS now supports wide-gamut colors via the color() function: color(display-p3 0.23 0.51 0.96). This enables more vivid reds, greens, and cyans that are impossible to represent in sRGB. If you are building a design-heavy application and targeting modern hardware, wide-gamut colors can make your UI noticeably more vibrant.
A Brief History of Web-Safe Colors
In the early days of the web (mid-1990s), most displays could only show 256 colors. Web designers used a palette of 216 “web-safe” colors that rendered consistently across different operating systems and browsers. These colors were defined by limiting each RGB channel to one of six values: 00, 33, 66, 99, CC, FF.
By the early 2000s, 24-bit “true color” displays (16.7 million colors) became ubiquitous, and the web-safe palette became irrelevant. Today, with 10-bit and HDR displays commonplace, the limiting factor is the color space (sRGB vs. P3), not the number of available colors.
How This Tool Works
This color converter runs entirely in your browser. When you pick a color using the native color input or type a value in any format (HEX, RGB, or HSL), the tool converts between all formats in real-time using standard mathematical formulas. No data is sent to any server.
The conversion between RGB and HSL follows the standard algorithm defined by the W3C CSS Color specification. RGB to HEX is a straightforward base-16 encoding. All outputs are copyable with a single click.
Frequently Asked Questions
What is the difference between HEX and RGB?
They represent the same information in different notation. HEX uses hexadecimal (base-16), while RGB uses decimal (base-10). For example, #FF8000 in HEX is rgb(255, 128, 0) in RGB. Both describe the same orange color.
Why would I use HSL instead of RGB?
HSL is more intuitive for design work. If you want a lighter version of a color, you increase the L value. If you want a more muted tone, you decrease S. In RGB, creating a lighter shade requires adjusting all three channels, which is less intuitive.
What does the # symbol mean in HEX colors?
The # prefix indicates that the following characters are a hexadecimal color code. It is required in CSS. Without it, the browser might interpret the value as a named color or ignore it.
Can I convert CMYK colors with this tool?
This tool currently supports HEX, RGB, and HSL — the three formats most commonly used in web development. CMYK (Cyan, Magenta, Yellow, Key/Black) is a print color model and requires ICC color profiles for accurate conversion, which goes beyond simple mathematical formulas.
What is the color picker showing?
The color picker uses the browser’s native <input type="color"> element, which provides an operating-system-level color selection dialog. The selected color is converted to all formats in real-time.
Is this tool safe to use offline?
Yes. All conversions are performed locally in your browser using pure JavaScript. After the initial page load, the tool works without an internet connection.