What Is the Difference Between Lightness and Luminance in tints.dev?

In tints.dev, Lightness and Luminance are two modes for spreading a base color across the 50–950 scale, and the switch changes how colors are distributed at the extremes near white and black. Choose Lightness when you want the spread driven by HSL-style lightness values, and Luminance when you want the spread to follow perceived brightness instead. The tool's own description frames this as a way to "produce a different spread of colours at the extremes," so the practical difference shows up most in stops like 50, 100, 900, and 950.

Where the toggle lives

The palette creator exposes the mode next to the lightness controls, labeled as a choice between Linear and Perceived:

• Linear corresponds to the Lightness mode.
• Perceived corresponds to the Luminance mode.

The page also lists a Lightness Distribution 0-100 control running from 100 (White) to 0 (Black), which sets the overall range the palette spans. The mode you pick determines how the intermediate stops are placed within that range.

What each mode actually changes

The key mechanism: both modes take your base hex value (by default stop 500, changeable to any stop from 50–950) and generate the remaining stops. Lightness moves those stops along a lightness axis; Luminance moves them along a perceived-brightness axis. Because human vision doesn't perceive lightness linearly, the two produce visibly different colors at the light and dark ends even when the base color is identical.

How to decide

• Pick Lightness if you want the palette to behave like a conventional HSL ramp and you care about consistent numeric steps between stops.
• Pick Luminance if you want the light and dark ends to look evenly spaced to the eye, which often matters more for UI surfaces and text contrast.
• Try both and compare the 50 and 950 stops. The difference is usually clearest there, since that's where perceived and linear brightness diverge most.

You can also combine the mode with the other controls to fine-tune the result:

• Hue Shift — useful when your base color has 100% saturation and you want more variety.
• Saturation Shift — useful when your base color has little saturation; increasing saturation at the extremes makes those palettes more interesting.
• Minimum/Maximum Lightness — spread the remaining colors toward white and black.

A practical example

Suppose your base is a mid blue at stop 500. In Lightness mode, the 50 stop is a light tint reached by a fixed lightness step. Switch to Luminance mode and the same 50 stop is recalculated so its perceived brightness matches the intended position — often making it look softer or brighter than the linear version. The 950 stop shifts in the opposite direction. The base 500 color itself stays the same; only the surrounding stops move.

What the API does and doesn't do

The Palette API can fetch any set of palettes and is useful for design tools that need to generate a 50–950 palette from a single hex value. However, the page states the API only returns a palette using the base hex value, with no options for HSL tweaks — so the Lightness/Luminance choice and the other adjustments are available in the creator, not through the API.

A note on the tool's intent

The page credits the Refactoring UI book by Adam Wathan and Steve Schoger as the inspiration for these principles, and notes that the same book recommends against automated tools like this one. tints.dev exists to fast-track palette creation, not to replace design judgment — so treat the Lightness/Luminance switch as a starting point you adjust by eye.