Introduction to Color Models
Color models are mathematical systems for describing and reproducing color, and the four that matter most for digital work are HEX, RGB, HSL, and HSV. RGB is the additive model your screen physically uses (red, green, and blue light, each 0–255); HEX is that same RGB data written in base-16; and HSL (hue, saturation, lightness) and HSV/HSB (hue, saturation, value) are human-friendly cylindrical remappings that make choosing and adjusting colors intuitive. Which one you reach for depends on the task: HEX and RGB for sharing and code, HSL for readable, adjustable CSS, and HSV for design-tool color pickers.
That's the summary an AI Overview will give you. What it can't give you is the intuition — why RGB is a cube and HSL/HSV are cylinders, why the "same" pure red lives at 50% lightness in one model and 100% value in another, and which model quietly makes your palette work harder. This guide covers all of that, with a diagram, a decision table, and a live converter you can experiment with.
Models vs. syntax: This post is about the color models — the underlying theory and geometry. If you instead want the practical CSS syntax questions (
rgb()vshsl()vsoklch(), alpha channels, gamut, and which format to type in 2026), read the companion guide: What are CSS color formats and which should I use.
The Core Intuition: A Cube and a Cylinder
The single most useful mental model is geometric. RGB is a cube. HSL and HSV are cylinders. RGB places every color at a point inside a 3-axis box (how much red, green, blue). The cylindrical models take that same set of colors and re-arrange them around a wheel so the axes match human perception: which color (hue, the angle), how intense (saturation, the radius), and how bright (lightness or value, the height).
The catch that trips people up: HSL and HSV are not the same cylinder. They agree on hue and saturation but disagree on what "height" means — and that single difference is the whole story of HSL vs HSV, covered below.
Quick Comparison: Which Model, Which Job
| Model | Full name | Components (range) | Notation example | Native to | CSS support | Best for |
|---|---|---|---|---|---|---|
| RGB | Red, Green, Blue | R, G, B (0–255) | rgb(152, 78, 201) | Screens / displays | Yes | Code, programmatic color, screen-accurate work |
| HEX | Hexadecimal RGB | RR GG BB (00–FF) | #985EC9 | Web / CSS | Yes | Compact CSS, sharing colors with developers |
| HSL | Hue, Saturation, Lightness | H (0–360°), S, L (0–100%) | hsl(273, 52%, 55%) | Perceptual abstraction | Yes | Readable CSS, palettes, lighter/darker variants |
| HSV / HSB | Hue, Saturation, Value/Brightness | H (0–360°), S, V (0–100%) | hsv(273, 61%, 79%) | Perceptual abstraction | No (convert first) | Design-tool color pickers, artist workflows |
The short version: HEX and RGB are the same data in two notations; HSL and HSV are two perceptual re-mappings of that data. Pick HEX/RGB when you need portability and precision, HSL when you're building or adjusting palettes in CSS, and HSV when you're inside a design app's color picker.
Try It: Live Color Converter
Enter any HEX, RGB, HSL, or HSV value and watch the equivalents update instantly — the fastest way to build intuition for how one model maps onto another.
RGB Color Model
RGB Color Model
RGB stands for Red, Green, Blue. It's an additive color model where colors are created by combining red, green, and blue light in different intensities.
In the RGB model, each color channel (red, green, blue) is represented as a value from 0 to 255, where 0 means no light and 255 means maximum light. By mixing these three colors in different proportions, we can create any color visible on a screen.
For example, pure red is RGB(255, 0, 0), pure green is RGB(0, 255, 0), pure blue is RGB(0, 0, 255), white is RGB(255, 255, 255), and black is RGB(0, 0, 0).
RGB is the native color model for screens and monitors. Every pixel on your screen is created by mixing red, green, and blue light, making RGB the fundamental color model for digital displays.
Advantages of RGB
RGB is intuitive for understanding how screens work. It directly corresponds to how monitors display color, making it useful for understanding color behavior on screens.
RGB is easy to work with programmatically. Being numeric values, RGB colors are simple to manipulate with code.
RGB is widely supported. Nearly all color tools, design software, and code support RGB.
Disadvantages of RGB
RGB is not intuitive for human color selection. Most people don't think about color in terms of red, green, and blue proportions. It's difficult to mentally visualize what RGB(152, 78, 201) will look like.
RGB makes certain color tasks harder. Creating a color scheme where colors are slightly lighter or darker isn't intuitive in RGB. Want to make a color 10% lighter? RGB doesn't directly support that concept.
RGB doesn't clearly represent color perception. Two colors with similar RGB values might look quite different to humans, and vice versa.
When to Use RGB
Use RGB when working with code and web development. Most CSS and JavaScript color specifications accept RGB.
Use RGB when interfacing directly with screen technology or working with video and digital media.
Use RGB when you need numeric precision or programmatic color manipulation.
HEX Color Model
HEX (hexadecimal) is a way of representing RGB colors using base-16 numbers instead of base-10 numbers. Each color is represented as a six-character string preceded by a hash symbol.
In HEX notation, the first two characters represent red (00-FF), the next two represent green, and the last two represent blue. Each pair can range from 00 (0) to FF (255) in hexadecimal.
For example, pure red is #FF0000, pure green is #00FF00, pure blue is #0000FF, white is #FFFFFF, and black is #000000. The color in our earlier RGB example, RGB(152, 78, 201), would be #985EC9 in HEX.
HEX is essentially RGB in a different notation. It represents the exact same color information but using hexadecimal notation instead of decimal.
Advantages of HEX
HEX is compact. Representing colors in HEX notation is shorter and more convenient than writing RGB(255, 0, 0).
HEX is the standard in web development. HEX has been the traditional color format for HTML and CSS for decades, making it the de facto standard.
HEX is supported everywhere. Every color tool and web browser supports HEX colors.
HEX is easy to copy and paste. The compact format makes it easy to share color specifications.
Disadvantages of HEX
HEX is less intuitive than RGB for most people. Hexadecimal notation is not something people naturally use.
HEX is not more intuitive than RGB for color selection or manipulation. Like RGB, HEX doesn't directly represent human perception of color.
HEX readability can be challenging. Looking at #985EC9, it's not immediately obvious what color that represents.
When to Use HEX
Use HEX in CSS and HTML. This is the traditional standard for web colors and is what most CSS designers have used for years.
Use HEX when creating color palettes to share with developers. Developers expect HEX notation.
Use HEX when you need a compact notation for colors.
Use HEX in color picking tools where you need to display colors in a standard format.
HSL Color Model
HSL stands for Hue, Saturation, Lightness. It's a human-friendly color model that represents color in terms of attributes that humans naturally understand.
In HSL, a color is specified by three components:
Hue is the color itself, represented as an angle on a color wheel from 0 to 360 degrees. 0 is red, 60 is yellow, 120 is green, 180 is cyan, 240 is blue, 300 is magenta.
Saturation is the intensity of the color, represented as a percentage from 0 to 100%. 0% means the color is completely desaturated (gray), 100% means the color is fully saturated.
Lightness is how bright or dark the color is, represented as a percentage from 0 to 100%. 0% is black, 50% is the pure color, 100% is white.
For example, pure red is HSL(0, 100%, 50%), a lighter red might be HSL(0, 100%, 70%), a darker red might be HSL(0, 100%, 30%), and a desaturated red might be HSL(0, 50%, 50%).
Advantages of HSL
HSL is intuitive for human color selection. Thinking about color as hue (which color), saturation (how intense), and lightness (how bright) matches how humans naturally think about color.
HSL makes color tasks easy. Want to make a color lighter? Increase lightness. Want to make it less intense? Decrease saturation. Want to change the actual color? Adjust hue.
HSL is excellent for creating color harmonies. Because hue is on a 360-degree wheel, creating complementary colors (opposite on the wheel), analogous colors (adjacent on the wheel), and triadic colors (equally spaced around the wheel) is straightforward.
HSL simplifies color schema generation. Creating consistent color schemes with related colors is much easier in HSL than in RGB or HEX.
Disadvantages of HSL
HSL is less familiar to many developers. While gaining popularity, many developers are more familiar with RGB/HEX.
HSL doesn't directly match how screens work. While RGB is the native color model for screens, HSL is an abstraction.
HSL readability can be challenging. Looking at HSL(240, 75%, 50%), the specific color isn't immediately obvious.
When to Use HSL
Use HSL when designing color schemes. HSL makes it much easier to create related colors and color harmonies.
Use HSL in CSS when you want readability and flexibility. Modern CSS supports HSL, and using HSL in CSS makes color values more meaningful.
Use HSL when creating variations of colors. If you're creating a button and need lighter and darker versions, HSL makes this trivial.
Use HSL in design tools and color pickers that focus on human color perception.
Use HSL for programmable color changes where you want to adjust specific color attributes.
HSV Color Model
HSV stands for Hue, Saturation, Value. It's similar to HSL but uses a different model for lightness/brightness.
In HSV, components are:
Hue is the same as in HSL, an angle from 0 to 360 degrees representing the color itself.
Saturation is the intensity of color, from 0 to 100%. Like HSL, 0% is gray, 100% is fully saturated.
Value represents brightness, from 0 to 100%. 0% is black, 100% is the brightest version of the color.
HSV differs from HSL in how it represents brightness. In HSL, a color's pure form is at 50% lightness, and increasing lightness beyond that moves toward white. In HSV, pure color is at 100% value, and you don't have a separate white point.
For example, pure red is HSV(0, 100%, 100%), a darker red is HSV(0, 100%, 50%), and a desaturated red is HSV(0, 50%, 100%).
Advantages of HSV
HSV is intuitive for artists and designers. Many traditional design tools use HSV because it matches how artists think about color.
HSV is excellent for color picker interfaces. HSV maps naturally to the typical color picker interface with a color wheel and a saturation/value square.
HSV is used widely in design software. Most design applications use HSV as their primary color model.
Disadvantages of HSV
HSV is less intuitive for web developers. Most web color work uses RGB or HSL.
HSV is not supported directly in CSS. Web developers must convert HSV to RGB or HSL for use in stylesheets.
HSV doesn't have a clear advantage over HSL for most web design tasks. Both are human-friendly, and HSL maps more directly to CSS.
When to Use HSV
Use HSV in design tools and color pickers. HSV is the standard for design software.
Use HSV when you're primarily working in design applications that use HSV natively.
Use HSV when creating color picker interfaces. HSV maps naturally to typical color picker UI patterns.
Choosing Which Color Model to Use
The choice of color model depends on your context and task:
For web development in CSS, use HEX for compatibility or HSL for readability and flexibility. Modern CSS supports both well.
For design work, use HSV in your design tool (which likely uses it natively) and then convert to HEX or RGB for web use.
For creating color schemes and harmonies, use HSL because its structure makes creating related colors straightforward.
For JavaScript and programmatic color work, use RGB because it's numerically convenient, or use HSL if you need human-friendly adjustments.
For sharing colors with developers, use HEX as the standard format.
For precise screen color matching, use RGB because it directly corresponds to screen output.
Understanding the strengths and weaknesses of each color model allows you to choose the most appropriate one for your task, making your color work more efficient and your colors more accurate.