Every color you see on screen is a point in three-dimensional space defined by hue (the color family: red, blue, green), saturation (the vividness: vivid vs. muted), and lightness (the brightness: light vs. dark). Understanding these three independent dimensions gives you precise control over color adjustments.
Hue: The Color Family
Hue is measured in degrees around the color wheel: 0 is red, 120 is green, 240 is blue. Changing hue shifts the entire character of the color. Moving from hue 240 (blue) to hue 260 (blue-violet) is a subtle shift. Moving from 240 to 30 (orange) is a dramatic one. Your primary color's hue is your brand's color identity.
Saturation: The Intensity
Saturation controls how much chromatic content the color has. At 100%, the color is as vivid as possible for its hue and lightness. At 0%, it is a neutral gray at the same lightness. Reducing saturation while keeping hue and lightness constant is how you create muted variants of a color for backgrounds and secondary elements.
Lightness: The Brightness
Lightness controls how much light the color appears to emit. At 0%, every color is black. At 100%, every color is white. At 50%, the color is at its most vivid for a given hue and saturation. Your PaletteRx Palette">shade scale (the range from light tints to dark shades of a color) is created by varying lightness while holding hue and saturation relatively constant.
Practical Adjustments
Need a hover state? Reduce lightness by 10 to 15 points. Need a background tint? Increase lightness to 95 and reduce saturation to 30. Need a dark mode variant? Increase lightness by 15 to 20 points and reduce saturation slightly. These systematic adjustments produce predictable results because you are changing one dimension at a time.