ToolMochi
中文

Color Palette Generator

Generate tints, shades, complementary, analogous and triadic palettes from one base color.

Tints

d4d2f9

aaa6f2

7f79ec

544ce6

2920df

Shades

2119b3

191386

110d59

08062d

040316

Complementary

5048e5

dde548

Analogous

488fe5

5048e5

9e48e5

e548dd

Triadic

5048e5

e55048

48e550

This tool runs entirely in your browser. Your input is never uploaded.

How to use

  1. 1Enter a base color or pick one with the color picker
  2. 2Browse the generated tints, shades and color relationships
  3. 3Copy a single swatch or a whole group of colors

FAQ

How are the palettes calculated?

The base color is converted to HSL. Lightness creates tints and shades, while hue rotation creates complementary, analogous and triadic colors.

Can I use these in design tools?

Yes. Each group copies as a comma-separated HEX list that pastes directly into Figma or code.

Why do tints and shades look asymmetric?

They use fixed lightness steps, and different hues can look different at the same lightness. Fine-tune them for your brand if needed.

Related tools

Color Converter

Convert colors between HEX, RGB, HSL and HSV with a live color picker preview.

Contrast Checker

Check the contrast ratio between text and background colors and see WCAG AA / AAA results for normal and large text.

CSS Gradient Generator

Visually build linear or radial CSS gradients, adjust colors, angle and position, then copy the CSS.

CSS Box Shadow Generator

Tune offset, blur, spread, color and opacity, then copy ready-to-use box-shadow CSS.