Color Shades Generator

How do you generate a shade scale from one hex color?

Enter your color in Base Color, choose Steps per Side, and inspect the lighter tints above the base and darker shades below it. There is no Generate button: valid input and settings changes rebuild the scale immediately. For a reproducible example, enter #336699, select 5 steps (11 total), and leave Color Space on sRGB (Tailwind compat.).

The base is RGB (51, 102, 153). Each side uses five mixing fractions: 1/6 through 5/6. The first table row is the lightest tint, and the last is the darkest shade. These are selected positions from the resulting scale, not a separate preset palette.

Selected results for #336699 with five steps per side in sRGB

Position	Mixing fraction	RGB result	HEX result
Lightest tint	5/6 toward white	221, 230, 238	#dde6ee
Closest tint	1/6 toward white	85, 128, 170	#5580aa
Base	No mixing	51, 102, 153	#336699
Closest shade	1/6 toward black	43, 85, 128	#2b5580
Darkest shade	5/6 toward black	9, 17, 26	#09111a

Click the colored area to copy uppercase HEX. The RGB and HSL rows copy their respective CSS function strings. For another input notation, use Color Converter to obtain a hex value first.

What are tints, shades, and tones?

A tint mixes a color toward white; a shade mixes it toward black. A tone adds gray. This generator provides the two separate lighter and darker branches, not a gray-mixing control. The original base remains between them, so you can compare every variation with the starting color.

Use the scale to explore surface fills, borders, interactive states, and text colors. These roles are design decisions rather than automatic assignments. A light tint may suit a large background while a dark shade suits text, but their actual contrast depends on the paired color. For combinations across different hues, continue with Palette Generator.

How does the mixing formula calculate each step?

For sRGB, each channel follows round(base + (target - base) × i / (steps + 1)). Target is 255 for tints and 0 for shades. The index runs from 1 through the selected step count. Dividing by steps plus one deliberately excludes the white and black targets; it does not divide by steps.

In the example, the nearest tint's green channel is round(102 + (255 - 102) / 6) = 128. The nearest shade's red channel is round(51 + (0 - 51) / 6) = 43. Each channel rounds independently. Swatch percentage labels round separately too: a label of 17% represents the fraction 1/6, not a calculation rerun at exactly 17%.

How do sRGB and OKLCH differ in this generator?

sRGB operates directly on the stored red, green, and blue channel values. OKLCH separates lightness, chroma, and hue, as defined in CSS Color Level 4. Here, OKLCH tints move lightness toward 1, shades move it toward 0, and both reduce chroma by the factor 1 - t. The hue angle stays fixed during this calculation.

Property	sRGB	OKLCH
Calculation	Interpolate RGB channels	Adjust lightness and chroma, hold hue
Neutral handling	Equal RGB channels remain equal	Chroma below 0.004 becomes zero
Exported color notation	HEX	HEX after RGB conversion

OKLCH results return to integer sRGB channels clamped between 0 and 255. That rounding and clipping can change the final color relative to the intermediate OKLCH coordinates. Treat the mode as an alternative way to build a scale, rather than a promise of perfectly uniform visual intervals or an exact match to a framework's stock palette.

How many steps should you use, and what gets exported?

Steps per Side offers 5, 10, 15, or 20, producing 11, 21, 31, or 41 swatches including the base. Start with five for a compact overview; increase the count when you need more intermediate values to inspect or copy. Every export still contains only 11 evenly sampled positions, regardless of preview size.

For 10 steps per side, export indices are 0, 2, 4, through 20. For 20 steps, they are 0, 4, 8, through 40. All formats label those positions 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. The base occupies the middle position, 500. Base Maps to currently changes only a comment in CSS and SCSS; it does not move the base or relabel the exported colors.

How do you use CSS, SCSS, JSON, or Tailwind exports?

Set Variable prefix: to a simple name such as brand. CSS Variables produces a :root block containing names such as --brand-500; use it with color: var(--brand-500). SCSS produces variables such as $brand-500. JSON Tokens nests numeric stop keys beneath the prefix, for example {"brand":{"500":"#336699"}} for the base entry.

The JSON is a simple string map, without token type or value metadata. Tailwind Config produces a JavaScript module.exports configuration containing theme.extend.colors. It is not CSS to paste inside an @theme block. Choose the output your project consumes, inspect the generated code, then click Copy. Exporting does not automatically install tokens or assign component styles.

How should you read the WCAG contrast ratios?

Enable Show WCAG contrast ratios (vs white / black) to reveal two badges per swatch. They compare that color separately with white and black, rather than displaying only the higher ratio. WCAG 2.2 contrast uses relative luminance and (lighter + 0.05) / (darker + 0.05). The engine linearizes sRGB with a piecewise transfer function, not a simple gamma approximation.

Badges show one decimal place, but their 4.5:1 pass threshold uses the unrounded result. A displayed 4.5 can therefore sit just below the threshold. This is a normal-text check; use Contrast Checker for your actual foreground/background pairing rather than assuming all combinations in the scale pass.

Which input and sharing limits should you know?

The hex field accepts three or six hexadecimal digits, with an optional leading #. It rejects alpha hex, CSS color names, RGB/HSL function strings, and surrounding spaces. Invalid nonempty input shows an error while the preview retains the last valid color. White, black, and near-neutral inputs can yield repeated colors, especially after integer rounding; swatch count does not guarantee unique hex values.

Scale calculations run in your browser. Copy shareable link includes the color and step count in a fragment, but leaves out the mode, prefix, base-stop choice, and contrast toggle. Reopening it uses sRGB defaults for those omitted settings. To preserve the exact output of an OKLCH session, copy the exported code as well as sharing the input color.