Color Spaces
Choose the right representation for the job, because RGB, HSV, linear light, and display-encoded values make different operations easy or safe.
Interactive playground
Tweak the operator or scene live so the article connects to an immediate visual result.
Color spaces
The same endpoints can interpolate very differently depending on whether you reason in RGB channels or hue-based coordinates.
Endpoints
Reference viewRGB vs HSV interpolation
Interactive compareThe marker tracks one blend position so you can compare how the two spaces travel through color.
Family
Color & tone
Color spaces, gamma, tone mapping, compositing, and distribution-aware image remapping.
Builds on
1 topic
Read these first if you want the surrounding pipeline context.
Unlocks
4 next topics
Use these follow-ups when you want to keep turning the image-processing pipeline forward.
Learning paths
2
This topic appears in curated graphics progressions so the next step is obvious.
Problem
A color value is not just three arbitrary numbers. The meaning of those numbers changes depending on the color space, and some operations become misleading or outright wrong in the wrong representation.
Intuition
RGB is convenient for display and storage, but not always for reasoning. HSV or HSL makes hue and saturation easier to manipulate. Linear-light RGB is what you want for many physical light computations and blends. Display-encoded RGB is what your monitor expects.
Core idea
- Treat color space as part of the data, not an afterthought.
- Convert into a representation that makes the operation meaningful or safe.
- Do the manipulation there, then convert back if needed for storage or display.
Worked example
Adjusting brightness in display-encoded RGB is not the same as adjusting it in linear light. Likewise, rotating hue is much more natural in HSV-style coordinates than in raw RGB components.
Complexity
Color-space conversion is constant work per pixel, but the correctness impact is much larger than the arithmetic cost suggests.
When to choose it
- Choose linear-light spaces for physically meaningful blends and many lighting computations.
- Choose HSV or HSL when user-facing hue and saturation controls matter.
- Choose the display space only at output time when encoding for the screen.
Key takeaways
- Color values only make sense together with their space.
- Representation changes what operations are intuitive and what operations are correct.
- Gamma correction and tone mapping both depend on understanding the numeric meaning of the input and output spaces.
- A surprising number of rendering bugs are really color-space bugs.
Practice ideas
- Implement a hue slider in HSV and compare it to naive channel edits in RGB.
- Blend two colors in linear light and in display space, then compare the results.
- Trace where your pipeline changes color spaces and where it should.
Relation to other topics
- Gamma correction is fundamentally about moving between linear-light reasoning and display encoding.
- Tone mapping usually compresses HDR-style linear values before output encoding.
- Alpha compositing should respect the numeric meaning of the colors being mixed.
Build on these first
These topics supply the mental model or preceding stage that this page assumes.
What this enables
Once the current operator feels natural, these are the most useful follow-up jumps.
Alpha Compositing
Combine foreground and background layers with transparency so multiple images or passes can share the same final frame.
Gamma Correction
Match linear-light math to display-encoded output so blends, shading, and gradients do not look mysteriously wrong.
Histogram Equalization
Redistribute grayscale values so a low-contrast image uses more of the available intensity range.
Tone Mapping
Compress HDR-style scene values into a range a normal display can actually show while keeping highlights under control.
Related directions
These topics live nearby conceptually, even if they are not strict prerequisites.
Bilinear and Bicubic Interpolation
Reconstruct values between samples when resizing or sampling images, with different trade-offs between cost and smoothness.
Alpha Compositing
Combine foreground and background layers with transparency so multiple images or passes can share the same final frame.
Gamma Correction
Match linear-light math to display-encoded output so blends, shading, and gradients do not look mysteriously wrong.
Tone Mapping
Compress HDR-style scene values into a range a normal display can actually show while keeping highlights under control.
More from Color & tone
Stay in the same family when you want parallel operators built from the same mental model.
Alpha Compositing
Combine foreground and background layers with transparency so multiple images or passes can share the same final frame.
Dithering
Trade spatial noise for perceived smoothness when the output format cannot represent all the shades you want directly.
Gamma Correction
Match linear-light math to display-encoded output so blends, shading, and gradients do not look mysteriously wrong.
Histogram Equalization
Redistribute grayscale values so a low-contrast image uses more of the available intensity range.
Paths that include this topic
Follow one of these sequences if you want a guided next step instead of open-ended browsing.
Sampling and textures
Learn how image data is resampled, reconstructed, and stabilized across magnification and minification.
Color and tone pipeline
Track how values move from color spaces and gamma into dynamic-range compression, equalization, dithering, and compositing.
From the blog
Pair the graphics atlas with recent writing from the broader site whenever you want a wider engineering lens.