Color Tools

A free suite of color tools — color palette generator, CSS gradient generator, contrast checker, and colorblind simulator — all in your browser.

Generate a Color Palette Build a CSS Gradient

TL;DR

Color Tools is a free suite of browser-based color tools — no sign-up, no install — that lets you instantly build color palettes, CSS gradients, and check WCAG contrast and colorblind visibility.

All conversions and calculations run in your browser; your input values are never sent to or stored on a server.

Color Tools

Color Palette Generator

Enter a base color and automatically generate complementary, analogous, triadic, and other color scheme palettes.

CSS Gradient Generator

Choose colors and an angle to create linear-gradient CSS code with a live preview.

Contrast Checker

Calculate the luminance contrast ratio of text and background colors and check WCAG AA/AAA pass status.

Colorblind Simulator

See how colors appear to people with red-green and blue-yellow color vision deficiency.

Color Guides

Web Color Contrast & Accessibility

WCAG contrast ratio standards (4.5:1, 3:1) and how to design colors with colorblind users in mind.

Check Contrast Now

Confirm whether your design's text and background colors pass accessibility standards.

Why Use Color Tools

Free & install-free — Use it straight from your browser with no sign-up or app install.
No data collected — All color conversions and contrast calculations happen in your browser; input values are never sent to a server.
Standards-based — Contrast uses the WCAG 2.1 relative-luminance and contrast-ratio formulas; color schemes use the HSL color wheel.
One-click copy — Copy HEX codes and CSS gradients with a single button and paste them straight into your project.

The colorblind simulation and some results are approximations for reference only. For precise accessibility decisions, also consult the official WCAG 2.1 documentation.

Last updated: 2026-06-25