This tool is part of these guided projects. Each project provides step-by-step instructions with checklists and all the tools you need in one place.
Tools you might need next
Simulate protanopia, deuteranopia, tritanopia, and other color vision deficiencies. Check color accessibility for designers.
Find complementary colors on the color wheel from any hue. Get opposite-pair hex codes for high-contrast palettes, accents, and vibrant design schemes.
Convert color temperature between Kelvin and RGB approximations. Map warm and cool white lighting values for photography, video, and UI white balance.
Shades are created by mixing the base color with black (darker) or white (lighter). The HSL model is preferred because adjusting lightness produces perceptually uniform steps.
Shade[n] = HSL(H, S, L × (1 - n/steps)); Tint[n] = HSL(H, S, L + (100-L) × n/steps)Linear interpolation in HSL can produce perceptually uneven steps. For design systems, use OKLCH or CIELAB color spaces which better model human color perception.
Updated: July 2026
Generate 10 evenly spaced shades from a primary brand blue for a design system.
→ 10 shades from #1d4ed8 (dark) to #dbeafe (light)
Build a 9-step gray scale from near-black to near-white for typography and borders.
→ Gray 900 through Gray 100 in even lightness increments
Linear hex interpolation produces perceptually uneven color steps. Work in HSL or OKLCH to get visually balanced shade progressions.
Adjacent shades may not meet WCAG contrast requirements. Always verify that text shades against background shades maintain at least 4.5:1 ratio for normal text.
Generate lighter and darker shades from any base color. Build tints and shades palettes for UI themes, buttons, hover states, and accessible contrast. It applies the shade generation algorithm (Shade[n] = HSL(H, S, L × (1 - n/steps)); Tint[n] = HSL(H, S, L + (100-L) × n/steps)). For example: brand color palette (10 shades) — Generate 10 evenly spaced shades from a primary brand blue for a design system.