Free Online Color Tools

How to build a color palette that actually works

A palette is not five random colors you happen to like. It is a small system: one color carries the brand, one carries the background, one carries the accent, and the rest are supporting tones. The tools on this page cover each part of that workflow, and the sections below explain the decisions behind them.

1. Start from a real base color

Open the Color picker and either drag the HSL sliders or paste a HEX value. Better still, drop a screenshot, a logo or a photo into the image area and sample a color straight from it — colors taken from real assets are far easier to defend in a design review than colors picked from a blank swatch. The image never leaves your device: sampling happens through a local canvas, so nothing is uploaded.

2. Build the tints and shades

The Palette generator takes your base color and produces five steps across lightness while keeping hue and saturation fixed. That gives you the range you need for hover states, disabled states, borders, subtle backgrounds and strong text — all visibly related to one another instead of five unrelated blues.

3. Add contrast with a harmony rule

A single hue gets monotonous. The Color wheel section applies the classic rules: complementary (180° apart) for strong contrast, analogous (±30°) for calm interfaces, triadic (120° apart) for energetic layouts, split complementary for contrast without tension, and tetradic (90° apart) when you need four distinct colors that still feel like one family.

4. Check accessibility before shipping

This is the step most teams skip. Put your text color and background color into the WCAG contrast checker and read the ratio. WCAG 2.1 requires at least 4.5:1 for normal body text and 3:1 for large text (≥18pt, or ≥14pt bold); 7:1 reaches AAA. The checker shows which level you hit, so you can fix a failing pair in seconds instead of shipping text that a slice of your users simply cannot read.

5. Export in the format your project uses

Every palette, scheme and gradient can be exported as a HEX list, CSS custom properties, a Tailwind color block, SCSS variables or JSON. Paste it straight in and reference var(--palette-1) — no re-typing, no transcription errors.

Why HSL is usually the right control

HEX is compact and universal, but it is opaque: there is no way to look at #2457D6 and know how to make a lighter version of it. HSL separates hue (which color), saturation (how intense) and lightness (how bright), so “same hue, 20% lighter” is a one-slider change. Design in HSL, ship in HEX.

Privacy

Every calculation on this site happens in your browser. There is no backend, no account and no color history on a server — your recent colors and favorites live in localStorage on your own device, and you can clear them at any time.

Frequently asked questions

Is this color tool free?

Yes. Free, no sign-up and no usage cap. Every calculation runs locally in your browser, so your color values are never uploaded to a server.

What is the difference between HEX, RGB and HSL?

HEX (#2457D6) is the compact six-digit notation used in CSS. RGB describes a color as red, green and blue channels (0–255). HSL describes it by hue, saturation and lightness, which is much closer to how people think about color — adjust lightness and you get a lighter version of the same hue.

How do I pick accessible colors for a website?

Use the contrast checker: enter your text color and background color, read the ratio, and aim for at least AA (4.5:1 for body text, 3:1 for large text). AAA (7:1) is the stricter target.

Can I use the generated palettes directly in CSS?

Yes. Palettes, color-wheel schemes and gradients all output standard CSS values and linear-gradient() syntax, and can be exported as CSS variables, Tailwind config or SCSS variables.