Check any foreground and background pair against WCAG 2.1. Get the contrast ratio, pass/fail for AA and AAA at both text sizes, and a suggested fix when it fails.
Convert any color between HEX, RGB, HSL, CMYK, LAB, OKLCH, HWB, HSB, LCH, XYZ and LUV at once. Every format is shown side by side and copies with one click.
Build a palette from any base color using six harmony rules: complementary, analogous, triadic, tetradic, split-complementary and monochromatic. Copy as CSS, Tailwind or JSON.
See any color or palette as it appears with eight types of color vision deficiency, including protanopia, deuteranopia and tritanopia, and spot the pairs that stop being distinguishable.
Pull the dominant colors out of any photo, screenshot or artwork. Upload or paste an image and get a ready-to-use palette with hex, RGB and HSL values. Nothing is uploaded to a server.
Paste any hex, RGB or HSL value and find the nearest Tailwind CSS class across the full v4 palette, with the exact distance and the neighbouring shades to compare against.
Paste any CSS color value (named, hex, rgb(), hsl(), oklch(), color-mix()) and get every other CSS format back, with alpha preserved and modern syntax alongside legacy.
Pick any color and instantly get its value in HEX, RGB, HSL, CMYK, and 7 more formats. Click to copy.
Create CSS gradients with an interactive editor. Build linear, radial, and conic gradients with custom color stops and angles.
Generate shades and tints of any color. Create lighter and darker variations with hex codes ready to copy.
Generate random colors with optional constraints like pastel, vivid, warm, or cool. Get hex codes, RGB, and HSL values instantly.
Mix two or more colors together with adjustable ratios. See the blended result in HEX, RGB, HSL, and more.
Enter any hex or RGB color and find its closest named color. Identify what color you're looking at from a database of 500+ named colors.
Check WCAG contrast ratios for every color pair in your palette. Find which combinations pass AA and AAA accessibility standards.
Enter a background color and get the best text colors that meet WCAG accessibility standards. Instantly find readable foreground colors.
Generate a full Tailwind CSS color palette (50-950) from a single brand color. Get perceptually uniform shades ready to paste into your config.
Generate evenly-spaced color scales between two colors. Compare interpolation in sRGB, HSL, and LAB color spaces.
Convert your color palette into design tokens. Export as CSS custom properties, SCSS variables, Tailwind config, or JSON tokens.
Extract CSS gradients from images. Upload any image and get the closest CSS linear or radial gradient with color stops.
Create and preview CSS box shadows with an interactive editor. Adjust offset, blur, spread, and color. Stack multiple shadows.
Create and preview CSS text shadows. Adjust offset, blur, and color to add depth and style to your typography.
Create and preview CSS border-radius values with individual corner controls. Supports elliptical radii and complex shapes.
Preview Google Font combinations for headings and body text. Find the perfect font pairing with custom colors and sizing.