Free color tools
Everything you need to create, check and ship color — all free, with no account and no ads.
Palette generator
Press the spacebar to generate harmonious color palettes, lock colors and export anywhere.
Contrast checker
Check the contrast ratio of any text and background color against WCAG 2.2 AA and AAA, plus APCA (WCAG 3 draft). Live preview and one-click fixes. Free, no sign-up.
Color picker
Free online color picker: choose a color visually or pick any pixel on your screen, then copy it as HEX, RGB, HSL, HSB, CMYK, LAB or OKLCH. See tints, shades and matching palettes.
Palette from image
Upload, drop or paste an image to extract its dominant colors as a palette with HEX codes. Click any pixel to pick an exact color. Private: images never leave your device.
Gradient maker
Create beautiful CSS gradients with multiple color stops: linear, radial or conic, with smooth OKLCH blending that avoids muddy middles. Copy the CSS or download a PNG. Free.
Gradient palette
Generate 3 to 20 evenly spaced color steps between any two colors, blended in perceptual OKLab, RGB or HSL. Copy the HEX codes or open them in the palette generator.
Tailwind colors
Turn any color into a full Tailwind CSS scale from 50 to 950. Preview it on buttons, badges and alerts, then copy config for Tailwind v4 (@theme), v3 or plain CSS variables.
Palette visualizer
See your color palette on a landing page, dashboard, mobile app, poster and typography mockups. Roles are assigned automatically; shuffle them or paste your own HEX codes. Free.
Color converter
Convert any color between HEX, RGB, HSL, HSB, HWB, CMYK, OKLCH, Lab, LCh and XYZ, plus ready code for Tailwind, SwiftUI, Android and Flutter. Paste any format; free, instant.
Tints & shades
Generate tints (mixed with white), shades (mixed with black) and tones (mixed with gray) of any color in 5%, 10% or 20% steps. Copy HEX codes or CSS variables. Free.
Color mixer
Mix up to five colors with adjustable amounts and see the result instantly. Choose perceptual, light (RGB) or paint-like blending, and get the blend steps between two colors. Free.
Mesh gradient
Create soft, colorful mesh gradients with up to six color points. Drag positions, randomize, and export pure CSS or a 1920×1080 PNG. Free, no sign-up.
Color blindness simulator
See how your image, screenshot or design looks with protanopia, deuteranopia, tritanopia, achromatopsia and four more types of color blindness. Runs privately in your browser.
Random color
Generate random colors with one press of the spacebar. Choose any, pastel, vivid, dark, light or muted colors and copy the HEX code. Free random color picker.
Color name finder
Find the name of any color from its HEX, RGB or HSL code, with match percentage and similar named colors. Search 4,900+ color names. Free.
Palette contrast grid
Paste a palette and see the WCAG contrast ratio of every text and background combination in one grid. Filter by 3:1, AA 4.5:1 or AAA 7:1. Free accessibility tool.
Box shadow generator
Design CSS box shadows with multiple layers, presets and live preview. Adjust offset, blur, spread, opacity and inset, then copy CSS or a Tailwind class. Free.
Glassmorphism generator
Generate frosted-glass CSS with backdrop blur, transparency, saturation, border and radius controls, previewed over a colorful background. Copy the CSS. Free.
Gradient gallery
120 ready-made CSS gradients with smooth OKLCH blending.
Palette library
Thousands of curated palettes, filterable by style and color.
Color library
Every HEX color with conversions, shades, harmonies and contrast.