Color

Pick two colors and see how perceptually different they are — CIE76 ΔE, CIEDE2000 ΔE, and plain RGB distance with a side-by-side swatch.

Slide a Kelvin value and watch the black-body colour shift from warm amber to neutral white to cool blue — plus a handful of common light-source presets.

The full Tailwind CSS default palette — 22 hues × 11 shades, 50 through 950 — with click-to-copy as Tailwind class, HEX, or rgb().

Drag hue, saturation, lightness, and alpha sliders to dial in a color — copy HEX, RGB, HSL, or a Tailwind arbitrary value.

All 147 CSS / X11 named colors with HEX, RGB, and a live swatch — searchable and grouped by hue.

Generate tints (lighter), shades (darker), and tones (with gray) from any base color — 2 to 20 stops, in HEX, RGB, or HSL.

Interpolate between two colors in RGB, HSL, or CIELAB space. See a gradient strip of intermediate steps.

Drag the control points to design a CSS easing curve — preview the motion live, copy the cubic-bezier() value.

Generate pure-CSS triangles (8 directions) using border or clip-path — copy the rule, drop it in.

Drag corners independently, try elliptical radii, copy the CSS — with chat-bubble, pill, blob, and tab presets.

Build a fluid `font-size: clamp(...)` that scales smoothly between two viewport widths — copy a one-liner.

Visually compose blur, brightness, contrast, hue, sepia, invert, and more — copy the CSS filter or Tailwind arbitrary value.

Drop an image and the tool extracts a dominant-color palette via Canvas — copy HEX or grab the whole set.

See how your image looks to people with each of 8 types of color vision deficiency (CVD).

Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.

Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.

Build linear or radial CSS gradients with multi-stop colors and copy the code.

Build harmonious color palettes from a base color in six schemes.

Check text/background contrast against WCAG AA and AAA levels.

Paste a list of hex colors and sort them by hue, saturation, lightness, or perceived brightness — useful for tidying a design-token palette.