What the colour adjustments tool does
Start from one colour and apply a transformation: make it warmer (shift toward red), cooler (toward blue), desaturate it (toward grey), or invert it (the exact opposite on every channel). Each variant is shown with its hex code. It is a quick way to get a related colour for a specific job — a cooler version of the brand colour for a night theme, a muted version for a disabled state, the inverse for a dark-mode accent — without opening a full colour picker. Runs in your browser.
What each adjustment does
| Adjustment | Operation | Effect |
|---|---|---|
| Warm | Increase red, slightly decrease blue | Reads as sunlit, cosy, energetic |
| Cool | Increase blue, slightly decrease red | Reads as calm, clinical, night-time |
| Desaturate | Move each channel toward the colour's luminance grey | Muted, softer; keeps the lightness |
| Invert | 255 − each channel | The complementary-ish opposite; dark becomes light |
#E85D26 (232, 93, 38)
Warm: #F25320 more red, less blue
Cool: #D0673A less red, more blue
Desaturate: #B27A64 toward grey, similar lightness
Invert: #17A2D9 (255−232, 255−93, 255−38)Warm and cool in practice
- Warm shifts suit calls to action, food, hospitality and anything meant to feel welcoming; cool shifts suit tech, finance, health and dark themes.
- Shifting the whole palette a few degrees warm or cool is how brands get a “seasonal” variant without changing the identity.
- Neutrals matter most: a warm grey (
#8A857D) versus a cool grey (#7D8590) changes the feel of an entire interface more than the accent does. - Keep warm and cool versions of the same hue from appearing side by side unless the contrast is deliberate; it looks like a colour-management error.
Desaturation for UI states
Disabled controls, placeholder text, secondary icons and inactive tabs are conventionally the active colour desaturated and lightened, not a different hue. Desaturating keeps the element recognisably “the same thing, but off”. Pair it with reduced opacity or a lighter tint from the Shades generator for a full disabled treatment, and check that the result still passes 3:1 contrast if it conveys information.
Inversion and dark mode
Inverting a colour is not the same as making a good dark-mode version — inverted brand colours are usually the wrong hue entirely (orange becomes blue). Inversion is useful for finding a high-contrast opposite, for “negative” effects, and for checking what filter: invert(1) will do to an element. For dark mode, keep the hue and reduce saturation and lightness instead: the Shades generator's darker steps, slightly desaturated, are the usual answer.
Doing the same in CSS
filter: saturate(0.5); /* desaturate an element (images too) */
filter: hue-rotate(15deg); /* nudge warm/cool — rotates around the wheel */
filter: invert(1); /* invert */
filter: sepia(0.3); /* a warm tone overlay */
/* Relative colour syntax (all current browsers) */
color: hsl(from var(--brand) h calc(s * 0.5) l); /* desaturate a token */