Color Tools

Convert between HEX, RGB, HSL, OKLCH, and Tailwind colors

Generate complementary, analogous, and triadic color palettes

Check WCAG AA/AAA contrast ratio between two colors

Design CSS/SVG gradients and export as CSS, SVG, or Figma tokens

Test WCAG contrast ratios for every color pair in a palette

Map a hex/rgb color to the nearest Tailwind class

Translate a CSS gradient into SwiftUI, Android, and Flutter code

Find the closest CSS named color to any hex (Euclidean in RGB)

Complementary, analogous, triadic, tetradic & split-comp schemes from a base color

Full Tailwind CSS v3 color palette — 18 families × 11 shades, searchable

Google Material 2014 palette — families with 50–900 + A100–A700 shades

Browse all 147 CSS named colors with hex values — instantly searchable

Generate 9 darker shades + 9 lighter tints from any base color

Find the opposite color on the wheel — 180° hue rotation

Generate colors adjacent on the wheel (±30°) — gentle, harmonious palettes

Generate three colors equally spaced on the wheel (120°) — vivid & balanced

Four colors at 90° — two complementary pairs for rich palettes

Build a single-hue palette — nine lightness steps at the same saturation

Bulk random colors (hex/rgb/hsl) — great for placeholders & mocks

Blend 2+ colors using perceptual square-mean RGB (not linear RGB mud)

Shift a color's lightness by +/- N%, preserving hue & saturation

Convert 1000–40000K to an RGB approximation (Tanner Helland formula)

Search common Pantone PMS spot colors with sRGB approximations