Color Shade Generator

These are the three classic ways of altering a color while keeping its hue recognizable. A shade mixes the color with black, making it darker. A tint mixes it with white, making it lighter and softer. A tone mixes it with gray, muting it without pushing it toward pure black or white. This tool generates all three as an 11-step strip, from the original color down to 0%.

Each step blends the red, green, and blue channels of your color toward the target (black, white, or gray) by a fixed percentage, the same simple linear-interpolation approach used by most color reference tools, rather than adjusting lightness in HSL. That keeps the progression visually even and matches what you would get mixing paint or ink toward black, white, or gray.

Complementary rotates only the hue 180° around the color wheel while keeping the same saturation and lightness, so a vivid red becomes an equally vivid cyan, this is the "opposite color" used in color theory and design. Inverted instead flips each red, green, and blue value (255 minus the original), which also changes brightness, white becomes black under inversion, but stays white under the complementary operation since there is no hue to rotate.

Triadic picks two more colors evenly spaced 120° apart on the color wheel, giving three colors with strong contrast that still feel balanced together. Analogous picks colors 30° to either side of your hue, colors that sit next to each other on the wheel and naturally look harmonious. Monochromatic keeps the exact hue and saturation of your color but varies only the lightness, giving a set of colors guaranteed to match since they are really the same color at different brightness levels.

The 216 web-safe colors are the palette that rendered identically on old 256-color displays, each red, green, and blue channel limited to one of six values (0, 51, 102, 153, 204, 255). Modern screens do not need this restriction, but the web-safe equivalent is still useful as a reference for retro styling or extremely limited-color output.

HSL, HSV, and CMYK all describe the same color through different models built for different purposes. HSL and HSV both describe hue, and the difference between HSV's "value" and HSL's "lightness" means the same color can report a different saturation percentage between the two. CMYK describes how much cyan, magenta, yellow, and black ink a printer would mix, which follows subtractive color rules instead of the additive red, green, and blue light rules RGB and HSL/HSV use, so it is not a simple direct conversion.

Yes. Click any hex code in the Color Values row, in any shade, tint, tone, or color scheme swatch, to copy it to your clipboard. The CSS Code section at the bottom has ready-made background-color, color, border-color, and box-shadow rules with their own copy buttons.