Convert color temperature (Kelvin)
Slide between 1000 K (warm candle) and 20000 K (deep blue sky). Tanner Helland blackbody approximation. Pick from common presets.
Approximation of Planckian (blackbody) locus. Real lights deviate from the curve.
How to use color temperature
Slide the Kelvin value or pick a preset; the swatch updates live with the matching HEX.
- 01
Pick a preset
Candle (1800K) through Blue sky (10000K) — match a known light source.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
presetOKLCHCSS Color 4perceptuallivepreset · colordaylight · sRGB6500 K
loaded · normalisedOKLCH · ready - 02
Fine-tune with slider
Drag the slider for any value between 1000K and 20000K.
Format conversion handles
hex,rgb(),hsl(),oklch(),color(display-p3 …)with proper gamut mapping when crossing colour spaces.sliderhex · rgb · hslP3gamut-mappedlivek · optionslive · live4800 K
options applied · livelive - 03
Read HEX / RGB
The corresponding white-balance color updates instantly.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
readWCAG 2.2APCAAA · AAAcontrasthex · convertedout · ready#FFE5C9
converted · liveWCAG-aware - 04
Copy and use
One click to clipboard for use in CSS variables or shaders.
Copy formats any swatch in the chosen syntax (
#aabbcc,rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.copyclipboardCSS varspalette JSONblobok · copiedready · done✓ Copied
shipped · ready to shipsuccess
Colour work that survives accessibility audits
Use OKLCH for manipulation
OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.
Test against WCAG 2.2
4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.
Mind gamut clipping
P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.
Colour blindness affects 8%
Use the Color Blindness simulator to check critical UI before launch.
Don’t hardcode hex
Use CSS variables. Light/dark themes become trivial when colours are tokenised.
Dark mode isn’t inverted
Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.
When to convert color temperature
Photo workflows, lighting design, theming.
Photo grading
Pick a warm or cool tint without raw editor. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.
WCAG 2.2 AATheming
Match UI tints to time-of-day or seasonal themes. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).
P3-awareLighting design
Quick reference for tungsten vs. daylight whites. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.
perceptually-uniformShader inputs
Convert Kelvin to RGB for procedural lighting. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.
gamut-safeBias-light setup
Pick a Kelvin tint matching your monitor white point. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.
a11y-readyCross-tool
Sync color temp between photo, video and CSS. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.
design-tokenFrequently asked questions
Something missing?
Tell us what you need. We ship the top requests every two weeks.