跳转到正文
▤

Tint & Shade Generator

ベース色からTint・Shade・ToneスケールとTailwind風50–950ランプを生成。

50
#f2f6fc
W 1.08:1 failB 19.36:1 AA
100
#e5edfa
W 1.18:1 failB 17.83:1 AA
200
#c1d5f6
W 1.49:1 failB 14.12:1 AA
300
#95b9f3
W 2:1 failB 10.51:1 AA
400
#5e96f3
W 2.94:1 failB 7.13:1 AA
500
#2473f5
W 4.33:1 near AAB 4.85:1 AA
600
#1161e3
W 5.46:1 AAB 3.84:1 fail
700
#1452b8
W 7.17:1 AAB 2.93:1 fail
800
#154593
W 9.11:1 AAB 2.3:1 fail
900
#143770
W 11.6:1 AAB 1.81:1 fail
950
#0f2343
W 15.65:1 AAB 1.34:1 fail

Step 500 is the closest to your input colour (nearest lightness).

:root {
  --color-50: #f2f6fc;
  --color-100: #e5edfa;
  --color-200: #c1d5f6;
  --color-300: #95b9f3;
  --color-400: #5e96f3;
  --color-500: #2473f5;
  --color-600: #1161e3;
  --color-700: #1452b8;
  --color-800: #154593;
  --color-900: #143770;
  --color-950: #0f2343;
}

Tints, shades, and tones are simple linear mixes in sRGB. The Tailwind ramp preserves hue while matching a lightness curve, with saturation slightly reduced at the extremes.

关于Tint & Shade Generator

A tint/shade/tone generator mixes white, black, or gray into a base color to build a scale of lightness steps. The practical need this answers is: "I picked one brand color — now give me a full 50–950 ramp I can drop into my design system," so beyond the classic hue-wheel theory, this tool outputs code ready to paste into Tailwind config. Tints mix white into the base to lighten it, shades mix black to darken it, and tones mix in mid-gray (#808080) to desaturate it. The mixing is a simple linear blend of sRGB channels — matching what anyone would expect from "mix in 20% white," with no surprises. Choose 5 or 10 steps; both always include the base color itself at 0%. The Tailwind ramp tab preserves your base color's hue and generates 11 steps following a lightness curve close to Tailwind's own palette (50 lightest, 950 darkest), nudging saturation down slightly at both ends so extremes don't look neon. Among the 11 steps, the one closest in lightness to your input color is marked, so you can tell at a glance that your brand color sits roughly at the 600 step. Copy the result as CSS variables, a Tailwind `colors` config fragment, or a plain HEX list — all computed locally in your browser.

使用方法

  1. Enter a base color as HEX, RGB, or HSL (or pick with the color input)
  2. Choose the Tailwind ramp, or pick tints/shades/tones and 5 or 10 steps
  3. Check the closest-step marker, then copy CSS, Tailwind, or HEX

常见问题

What's the difference between tints, shades, and tones?

Tints mix white into the base to lighten it, shades mix black to darken it, and tones mix in mid-gray (#808080) to desaturate it. All three are simple linear blends of sRGB channels.

How should I use the Tailwind ramp?

Treat your input color as a brand color, and the tool generates 11 steps from 50 (lightest) to 950 (darkest) around it. The highlighted step is the one closest in lightness to your input, giving you a sense of where it fits in an existing Tailwind numbering. The Tailwind tab's output pastes directly into `theme.extend.colors`.

Why use simple linear mixing instead of a perceptual color space?

Perceptually uniform spaces like OKLab are an option, but we prioritized matching what anyone expects from "mix in 20% white." It's simple and predictable, though lightness steps may not look perceptually even. If you need strict perceptual uniformity, do a final visual check.

What's the difference between 5 and 10 steps?

Both include the base color itself at 0%, then move toward white/black/gray in even increments (20% per step for 5 steps, 10% per step for 10 steps). Choose 10 steps for finer control.

Is my color data sent anywhere?

No. Scale generation and code formatting run entirely in your browser's JavaScript; nothing is sent to toco.tools's servers.