Color & Image Calculator: Convert, Contrast, Palettes

Five panels share one color engine: Convert (HEX, RGB, HSL, HSV, CMYK, LAB, LCH), Contrast (the WCAG ratio with AA/AAA badges), Palettes (six harmony schemes, tints and shades, color-blind previews), Image (average color, dominant palette, RGB histogram from a file) and Photography (depth of field, exposure, astro, output). Each panel has its own address — /life/color/convert, /life/color/contrast, /life/color/image, /life/color/photo — and runs in the browser.

Updated 2026-10-01Reviewed by CalcX Editorial Team5 sources5 min read

How to use it

Convert a color.Set the picker or type a HEX value, or drag the R/G/B and H/S/L sliders; eight cards update together, each copyable, and the nearest CSS named color reports its ΔE₇₆ distance.
Check contrast.Choose foreground and background: one ratio, four badges (AA/AAA, normal and large text) and a live sample. If AA normal fails, click the suggested swatch to apply a lightness-only fix reaching 4.5 : 1.
Build a palette.Six rows — complementary, split-complementary, triadic, tetradic, analogous, monochromatic — follow the base color, then a 13-step tints-and-shades strip; every swatch copies as HEX. The color-blindness preview shows a chosen scheme under protanopia, deuteranopia and tritanopia.
Read an image.A chosen file is decoded locally and scaled to at most 480 px wide. Click a pixel for HEX, RGB and HSL; the panel adds the average color, up to six dominant colors from a median cut, and a 64-bin RGB histogram.
Plan a shot.Photography tabs cover depth of field, exposure (EV, shutter ladder, ND filters and countdown timer, sunny-16, flash), astro (500 and NPF rules, star trails, moon phase) and output (print size, file estimate, timelapse).

Worked examples

Readouts from this page's defaults.

You enter	The page reads
`#4a90e2`	hsl(212, 72%, 59%), hsv(212, 67%, 89%), cmyk(67%, 36%, 0%, 11%), lab(58.87 3.995 -48.11), lch(58.87 48.27 274.7), luminance 0.2689, nearest cornflowerblue · #6495ed · ΔE₇₆ = 6.26
`#999999` on white	2.85 : 1 — all four badges fail; the suggested foreground #757575 reads 4.61 : 1
`#767676`, then `#777777`, on white	4.54 : 1 passes AA normal and both large-text badges; 4.48 : 1 fails AA normal by 0.02
Palette base `#4a90e2`	triadic #4a90e2 / #e24a90 / #90e24a; tints and shades #e5effb → #0b1520; complementary pair under deuteranopia #6b66ce / #cbd06b
Photo: 50 mm, f/8, 3 m, full-frame; f/8, 1/250 s, ISO 100	near 2.36 m, far 4.12 m, total 1.76 m, hyperfocal 10.88 m; EV 13.97; ND1000 on 1/125 s gives 8.2″
Photo: 24 mm, f/2.8, 24 MP, declination 0°; 6000 × 4000 px at 300 dpi	500 rule 20.8 s, NPF 11.6 s, trail 6.1 px; print 50.8 × 33.9 cm, Excellent, RAW 14-bit 24.8 MB

The WCAG numbers behind the badges

Each sRGB channel is linearised (÷12.92 below the 0.04045 breakpoint, otherwise ((v + 0.055) / 1.055)²·⁴), relative luminance is L = 0.2126 R + 0.7152 G + 0.0722 B, and the contrast ratio is (L_light + 0.05) / (L_dark + 0.05) — black on white 21.00 : 1, equal colors 1.00 : 1. Thresholds: AA normal 4.5, AA large 3.0, AAA normal 7.0, AAA large 4.5. Convert cards follow sRGB → linear RGB → XYZ (D65) → CIELAB → LCH; the nearest-name card uses ΔE₇₆ against the 148 CSS keywords.

Assumptions and limits

sRGB only.: No monitor profile or gamut check; the CMYK card is a plain c/m/y/k subtraction — a dialogue value, not a press proof.
Display rounding.: LAB and LCH show four significant digits and ratios two decimals; verdicts compare the unrounded value.
Analysis, not editing.: The Image panel never writes pixels: no crop, resize, filter, format conversion or export. Capture planning belongs to the Photography panel, sky times to the Astronomy Sun panel, and color bit-packing to the programmer calculator.

The large-text threshold trap

The badge people misread is AAA large: it needs 4.5 : 1, the same as AA normal, not the 3 : 1 that AA large allows — passing "large text" under AA guarantees nothing at AAA. On white, #767676 reads 4.54 : 1 and passes AA normal plus both large badges (AAA normal needs 7.0), while #777777 reads 4.48 : 1 and fails AA normal by two hundredths. "Large" means 18 pt regular or 14 pt bold, and the ratio is symmetric: swapping text and background changes nothing.

Where it helps

Interface and brand work

Check body text and buttons against both backgrounds, keep a dark-mode pair honest, pull a six-color harmony from a logo, and see whether a red/green status palette survives deuteranopia.

Photography and image work

Sample a photo's average and dominant colors before choosing an overlay tint, then check whether 50 mm at f/8 holds a subject 3 m away in 1.76 m, how far ND1000 stretches 1/125 s, or how many 24 MP frames fill a 100 s timelapse.

Color in code and print

Hand a developer the exact hsl(212, 72%, 59%) or LAB string, verify a marketing hex against a white page, or sanity-check a CMYK readout before sending artwork to a printer.

References

W3C, WCAG 2.2 — Contrast (Minimum) and Contrast (Enhanced), w3.org （访问日期：2026-10-01）— the 4.5 : 1, 3 : 1 and 7 : 1 thresholds and the large-text definition.
W3C, WCAG 2.2 — relative luminance, w3.org （访问日期：2026-10-01）— the coefficients and 0.05 offset behind every ratio.
Wikipedia, CIELAB color space, en.wikipedia.org （访问日期：2026-10-01）— the XYZ-to-Lab transform and LCH polar form in the result cards.
Wikipedia, Median cut, en.wikipedia.org （访问日期：2026-10-01）— the dominant-color algorithm behind the six image swatches.
Wikipedia, Depth of field, en.wikipedia.org （访问日期：2026-10-01）— hyperfocal distance and the near/far limits the photo tab reports.