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.

Visual builder for the CSS `clip-path` property — pick a shape (circle, ellipse, inset, or polygon), tweak the numbers with sliders or click the preview to add polygon points, and copy a ready-to-paste CSS declaration. 10 shape presets included (triangle, hexagon, star, arrow, message bubble, plus, …).

Stack as many text-shadow layers as you want — neon glow, 3D lift, outline, long shadow — live preview plus copy-ready CSS.

Compare how the modern CSS color-mix() function blends two colors in different interpolation spaces (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) — live swatches, computed hex, full gradient strip per space, and copyable CSS for each.

Visual builder for CSS `conic-gradient()` — rotate angle, center position, color stops, shape preview. Useful for pie charts, ring charts, checkered patterns, color wheels.

Find the closest CSS, Tailwind, or XKCD-survey color name for any hex/RGB input — ranked by perceptual distance in OKLab color space.

Generate a Material You / Material Design 3 tonal palette (tones 0–100) from any source color, plus contrast against black/white and CSS/Tailwind/JSON/SCSS export.

Convert a light wavelength in nanometres (380–780 nm — the visible spectrum) to an approximate sRGB color, with a clickable rainbow gradient bar and reference Fraunhofer absorption lines from real solar spectroscopy.

Convert between RGB / hex screen colors and CMYK percentages for print, with simple, GCR (Gray Component Replacement) and UCR (Under Color Removal) black-generation strategies, channel separation preview, and a total ink coverage readout.

Compare seven different brightness metrics — HSL Lightness, HSV Value, WCAG Relative Luminance / LRV, CIE Lab L* perceived lightness, Rec. 709 Luma, HSP Perceived Brightness, and naïve (R+G+B)/3 — for one or two colors side by side, with deltas to show why a 'lighter' color can actually feel darker.

Apply all 16 W3C compositing blend modes (multiply, screen, overlay, soft-light, hue, color, luminosity…) to two colors and see the computed hex result for each, with a copyable mix-blend-mode CSS snippet per mode.

Pick colours in the perceptually uniform OKLCH space (lightness · chroma · hue) — and see whether each pick fits inside the sRGB display gamut.

Pick a base color, get classic color-wheel harmonies — complementary, split-complementary, triadic, tetradic, square, analogous, monochromatic.

Pick two hex colors, get N discrete intermediate steps — in sRGB, linear RGB, OKLab or HSL — with optional easing.

Define a color palette once, export to CSS custom properties, Tailwind config, SCSS, LESS, design-token JSON, SwiftUI Color, or Android `colors.xml`. Live preview swatches.

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