All Tools

Color Tools for Designers & Developers

Everything you need to work with color - from palette discovery to accessibility testing. All tools are free, run entirely in the browser, and require no sign-up.

Color Palettes

Browse hundreds of hand-crafted, harmonious color palettes. Copy any color in HEX, RGB, or HSL - ready to drop straight into your project.

BrowseInspirationHEX / RGB / HSL

Open tool

Gradients

A library of beautiful CSS gradient presets across every hue and style. One click to copy the CSS rule directly into your stylesheet.

BrowseCSSPresets

Open tool

Gradient Generator

Drag color stops, set angle, switch between linear, radial, and conic modes. Exports clean CSS or a Tailwind arbitrary class - no extra dependencies.

LinearRadialConicCSS + Tailwind

Open tool

Tint & Shade Generator

Enter any base color and get a complete ten-step scale - just like Tailwind's built-in palettes. Export as CSS custom properties, Tailwind config, or SCSS variables.

Color ScaleCSS VarsTailwindSCSS

Open tool

Color Blindness Simulator

See exactly how your colors appear to people with deuteranopia, protanopia, tritanopia, and more - using accurate RGB matrix transforms, not just CSS filters.

AccessibilityWCAGDeuteranopiaProtanopia

Open tool

Color Converter

Paste any color in any format and instantly see every other format. Includes modern OKLCH conversion via sRGB linearization - great for CSS Color Level 4.

HEXRGBHSLCMYKOKLCH

Open tool

Box Shadow Generator

Stack up to 5 shadow layers, control x/y offset, blur, spread, color, opacity and inset - then copy the full CSS rule in one click.

CSSMulti-layerPresetsLive preview

Open tool

Glass Effect Generator

Tune blur, saturation, background color/opacity, and border - live preview on five gradient backgrounds. Copy the complete CSS class instantly.

CSSGlassmorphismbackdrop-filterrgba

Open tool

Border Radius Builder

Adjust all four corners independently or link them together. Switch between px, %, and rem. Choose from 10 presets and copy the smart CSS shorthand.

CSSpx / % / remPresetsShapes

Open tool

Type Scale Generator

Pick from 8 musical scale ratios (Minor Second through Golden Ratio) and preview all 10 steps live. Export as CSS custom properties, Tailwind fontSize, or SCSS.

TypographyCSS VarsTailwindSCSS

Open tool

Font Pairing

10 curated heading/body font pairings - filter by style, preview with your own text and colors, then copy the Google Fonts import link or Tailwind config.

TypographyGoogle FontsHTMLTailwind

Open tool

Palette from URL

Enter a URL or paste CSS/HTML directly - the tool parses every HEX, RGB, and HSL value, deduplicates them, and lets you select favorites for export.

ExtractHEXRGBHSL

Open tool

Palette Exporter

Build a palette up to 16 colors, name each swatch, load from presets, then export as CSS variables, SCSS, JSON, Tailwind config, SVG, or PNG.

ExportCSSSCSSJSONSVGPNG

Open tool

Contrast Checker

Enter foreground and background colors to get the exact contrast ratio with pass/fail badges for all five WCAG 2.1 criteria. Includes live text preview and a shareable URL.

WCAGAAAAAAccessibilityLive preview

Open tool

Text Shadow Generator

Stack multiple shadow layers, control offset, blur, color, and opacity per layer. Includes 8 presets (Neon, Embossed, Retro 3D, Outline) and live preview with custom font and size.

CSSMulti-layerPresetsTypography

Open tool

Color Harmonies

Pick a base color and instantly generate complementary, analogous, triadic, split-complementary, tetradic, square, or monochromatic harmony. Visualized on an interactive SVG color wheel.

ComplementaryTriadicAnalogousColor Wheel

Open tool

Random Color Generator

Click Generate or press Space for a random color. Filter by hue, saturation, and lightness range, or use presets like Pastel, Neon, or Earth Tones. Multi-mode generates 5 colors with lock toggles.

RandomPaletteFiltersSpacebar

Open tool

Color Mixer

Pick two colors and blend them at any ratio. Choose between RGB, HSL, or OKLCH blend modes - each produces visibly different results. Preview 5–11 intermediate steps as a gradient strip.

BlendRGBHSLOKLCHSteps

Open tool

Color Name Finder

Enter any HEX color to find its closest named match from 200+ CSS and design color names. Shows top 5 similar colors with similarity scores, plus search by name (e.g. "ocean", "rose").

NamesCSS ColorsSearchHEX

Open tool

CSS Filter Generator

Adjust all nine CSS filter properties with live sliders - blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia - plus drop-shadow. Preview on built-in or uploaded images.

CSSfilterBlurImagePresets

Open tool

Spacing Scale Generator

Create a consistent spacing scale using linear multipliers or musical ratios. Visual bar chart preview, configurable naming (numbered, T-shirt, Tailwind), export as CSS vars, SCSS, Tailwind config, or JSON.

Design SystemCSS VarsTailwindSCSSJSON

Open tool

Flexbox Generator

Set flex-direction, wrap, justify-content, align-items, and gap on the container. Control flex-grow, shrink, basis, align-self, and order per item. Live preview + CSS and HTML output.

CSSFlexboxLayoutVisualHTML

Open tool

CSS Grid Generator

Define grid-template-columns and rows with freeform text (supports fr, px, %, auto, minmax). Place items with column/row start and end. Live preview with colored cells, CSS and HTML output.

CSSGridLayoutVisualHTML

Open tool

Color Tools for Designers & Developers

Color Palettes

Gradients

Gradient Generator

Tint & Shade Generator

Color Blindness Simulator

Color Converter

Box Shadow Generator

Glass Effect Generator

Border Radius Builder

Type Scale Generator

Font Pairing

Palette from URL

Palette Exporter

Contrast Checker

Text Shadow Generator

Color Harmonies

Random Color Generator

Color Mixer

Color Name Finder

CSS Filter Generator

Spacing Scale Generator

Flexbox Generator

CSS Grid Generator

Other Essential Developer Tools

JSON Formatter Tool