Color Temperature Shifter
Warm or cool a color along the blackbody locus. The white-balance slider for brand colors and product photography.
White Balance, But for Brand Colors
Photographers use color temperature constantly. A photo taken under tungsten light at 3200 Kelvin looks orange, and the white balance correction adds blue until the whites read white. A photo at 6500 Kelvin daylight needs the opposite shift. The same temperature math applies to any color: shifting a brand color toward a warmer temperature pushes it toward orange and yellow, while shifting toward cooler pushes it toward blue and cyan. The tool reaches uses are concrete. A brand color that looked right in a previous campaign may need a warm shift to match a new photographic style. A dark mode design system often benefits from a slight cool shift across the palette to feel evening-appropriate. A hero illustration that clashes with adjacent product photography can usually be reconciled by shifting both toward the same temperature. The math comes from the blackbody locus, the curve in color space that describes the colors a heated black body emits at each temperature, from deep red at 1500 Kelvin through neutral white at 5500 to light blue at 10000.
How the Slider Works
Paste a color in any CSS format. Drag the temperature slider between 2000 Kelvin (very warm, orange) and 10000 Kelvin (very cool, blue), with 6500 Kelvin in the middle as the daylight neutral. The tool computes the color shift in OKLab space along the curve and shows the live result next to the original. A second slider controls the strength of the shift from 0 to 100 percent, which lets you dial in subtle warming or cooling without committing to the full blackbody color at the chosen temperature. The OKLab math runs through culori at version 4.0.2 under the MIT license; the chromatic adaptation matrix is the Bradford method commonly used in photography software. The result is a temperature shift that preserves the lightness of the input color and shifts only the chromaticity, which is what photographers and colorists actually want from white balance. Output is available in HEX, RGB, OKLCH, and Display P3 formats, ready to paste into design tokens or stylesheets.
Practical Scenarios for Temperature Shifting
Match brand colors to product photography: shoot a photo, sample the actual white-balanced color in the photo, then shift the brand color toward the photo temperature so they sit naturally together rather than clashing. Build a cohesive dark mode palette: shift the entire light mode palette toward a slightly cooler temperature (around 7000 Kelvin) so the dark mode feels like an evening adaptation rather than a separate brand. Adapt for screen versus print: print papers reflect cooler than typical screens display, so a slight warm shift helps a brand color match print. Add seasonal variation: shift the palette warmer in autumn campaigns and cooler in summer beach campaigns, which gives subtle seasonal mood variation without redesigning the brand. Build accessible filters: a slight warm shift across UI colors helps reduce eye strain in evening use, which is what the various night mode and reading mode features in operating systems implement under the hood. The tool is the manual version of that automatic shift, calibrated for the specific colors in your design system.
Frequently Asked Questions
What does color temperature actually mean?+
Color temperature is a way to describe the color of a light source by the temperature in Kelvin to which a perfect black body would need to be heated to emit light of the same color. Lower temperatures (below 4000 Kelvin) produce warm orange-red light, like candles and incandescent bulbs. Higher temperatures (above 6500 Kelvin) produce cool blue light, like overcast daylight and computer monitors. The blackbody locus is the curve in chromaticity space that traces this progression.
Is this the same as white balance in Lightroom?+
The math is the same: a chromatic adaptation along the blackbody locus. The difference is application: Lightroom applies the shift to every pixel in a photo to correct the apparent color of the light source, while this tool applies the shift to a single color value. Both use the Bradford chromatic adaptation matrix as the modern standard.
How much temperature shift is too much?+
For brand colors, shifts above 1000 Kelvin (about 15 percent on the slider) usually start to read as a different color rather than a temperature-shifted version of the same color. For UI palette adaptation, shifts of 500 to 1000 Kelvin are typical for moving between day and night modes. For dramatic effect in marketing or hero illustrations, larger shifts work but should be intentional rather than accidental.
Does the shift preserve lightness?+
Yes, by design. The chromatic adaptation runs in OKLab space and preserves the L (lightness) channel while shifting only the a and b chromaticity axes. This means a temperature-shifted dark color stays dark and a shifted light color stays light, which is what you want for accessibility and for visual continuity in design systems.
Why use Kelvin instead of just a hue rotation?+
Kelvin temperature shifts follow the physical curve of how natural light actually changes color, so a 1000-Kelvin shift looks like the difference between morning and afternoon sun rather than an arbitrary hue rotation. Hue rotations rotate the entire wheel uniformly, which produces unnatural-looking shifts for colors near the green end of the spectrum. Temperature shifts feel right because they map to a real-world experience.
Can I save a temperature shift as a CSS filter?+
CSS does not have a native color-temperature filter, but the closest equivalent is a combination of hue-rotate and saturate filters. The tool does not generate filter syntax because the precise match requires per-color tuning rather than a uniform image filter. For applying a temperature shift to a whole image, use a Lightroom export or a photo editor with white balance support.
What is the blackbody locus exactly?+
It is the curve in the CIE chromaticity diagram traced by the color of light emitted by an idealized black body as its temperature increases. The locus starts in deep red below 1500 Kelvin, passes through warm white around 3000 Kelvin (incandescent bulb), neutral white around 5500 Kelvin (midday sun), and ends in cool blue above 10000 Kelvin (overcast northern sky). Most natural light sources sit on or very near this curve.
Does the shift work on saturated brand colors?+
Yes, and the visual effect is more pronounced on saturated colors than on near-grays. A saturated red shifted warmer becomes a saturated orange-red; the same red shifted cooler becomes a saturated magenta-red. The OKLab math handles saturated and desaturated inputs consistently, so the slider response is predictable across the palette.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service