Skip to content
T TechnShield
Tool

Color Picker & Converter

Pick colors, build palettes, check WCAG contrast, generate gradients, and convert between HEX/RGB/HSL/HSV/CMYK/LAB — then export.

198°
86%
51%
100%
Conversions
WCAG Contrast Checker
Contrast: —
The quick brown fox jumps over the lazy dog 123!? — Large text preview
Gradient Generator
45°
5
Palette
Extract from image

Fast on-device quantization. Click a swatch to add to your palette.

Live preview
Conversions
WCAG check
Gradient CSS
Palette export

How it works

1) Pick & tweak

Use the color input or HEX field. Adjust HSL and opacity with sliders — everything updates in real time.

2) Convert & check

Copy values in HEX/RGB/HSL/HSV/CMYK/LAB. Verify text contrast against WCAG AA/AAA.

3) Build & export

Add colors to a palette, generate gradients, extract hues from images, and export JSON/CSS variables.

Practical Color: Picking, Contrast, and Conversions

A crash course on HEX/RGB/HSL/HSV/CMYK/LAB, WCAG contrast, and building accessible palettes.

Color spaces & when to use them

  • HEX/RGB: ubiquitous on the web; RGB is device colors, HEX is just RGB notation.
  • HSL/HSV: human-friendly adjustment of hue, saturation, and lightness/value.
  • CMYK: print workflows; approximated from sRGB here.
  • LAB: perceptual; useful for measuring visual distance (ΔE) and balancing lightness.

Contrast & accessibility

WCAG requires 4.5:1 for normal text (AA), 3:1 for large text (AA), 7:1 and 4.5:1 for AAA. Use the checker to test foreground/background pairs.

Gradients without banding

Prefer longer angles (e.g., 135°) and enough steps for discrete swatches. For CSS backgrounds, use linear-gradient() with color stops.

Palette building

Start from a primary hue, then derive tints and shades. Ensure accessible combinations for text, buttons, and backgrounds.

FAQ

Does LAB require a specific white point?

This tool uses sRGB with D65 white for XYZ↔LAB conversions.

Are conversions exact?

Integer rounding is applied for readability; LAB/CMYK are approximations from sRGB.

Can I pick from screen?

Yes in supporting browsers via the Eyedropper API. Otherwise, upload an image and extract.