Online Tool Store
Color Temperature Adjuster
Shift any color warmer or cooler with a slider, and get a ready-to-use 5-shade ramp in hex. Runs entirely in your browser.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Adjusted palette (hex)
How it works
- Pick a base color and drag the warmth slider left (cooler) or right (warmer).
- The tool shifts the color's red and blue channels in opposite directions based on the slider.
- Five shades — darker to lighter — are generated around the adjusted color and shown as hex values.
The formula
Warmth shift: red += 0.4 × amount, green += 0.1 × amount, blue −= 0.4 × amount, where amount ranges from −1 (fully cool) to +1 (fully warm). Shades are then produced by blending toward black or white by 20% and 40%.
FAQ
What does "warmer" and "cooler" mean for a color?
Warming a color shifts it toward red/orange/yellow, while cooling shifts it toward blue — the same visual effect as adjusting white balance in photography.
Why does the tool generate 5 shades instead of 1 color?
A single adjusted color rarely works alone in a real design — the 5-step ramp (darker to lighter) gives you a usable mini-palette around your chosen warmth.
Can I use the output directly as CSS?
Yes — each line is a plain hex value, ready to paste into a CSS custom property or design token file.
Is my color sent anywhere?
No — all color math (RGB shifts, lightening, darkening) happens locally in your browser.
How we compare
| Feature | Online Tool Store | Photoshop white balance | Manual hex editing |
|---|---|---|---|
| No software install | ✓ | ✗ | ✓ |
| Generates a ready-to-use shade ramp | ✓ | ✗ | ✗ |
| Copy hex values instantly | ✓ | ✓ | ✓ |
If you need a whole warm or cool palette from one brand color without opening design software, this generates it in one slider drag.