🖌️ Color Palette Generator — Tints from One Hex
Start with a base hex color. The tool makes two lighter tints, the base, and two darker shades so you have a small UI palette.
Input
Result
Steps
Private by design. This tool runs entirely in your browser — nothing you enter or add is uploaded to any server.
How it works
- The base color accepts 3- or 6-digit hex, with or without #.
- Lighter steps mix the base with white; darker steps mix it with black.
- Each step is written as a six-digit hex code, from lightest to darkest.
Examples
- #0F766E produces a teal scale with the base in the middle.
- #fff is treated as white, so darker steps are grays.
- A three-digit value such as #39c is expanded before mixing.
Frequently asked questions
Is this a perceptual color scale?
No. Steps are simple RGB mixes toward white and black. They are even in channel space, not in lightness perception.
Can I export CSS variables?
The output lists hex codes one per line. Copy them into your stylesheet; this page does not write files.
Related tools
More Design tools →Color Contrast Checker
Measure WCAG contrast between two hex colors for text and interface graphics.
Aspect Ratio Calculator
Solve width, height and simplified aspect ratios without breaking proportions.
PX to REM Converter
Convert CSS px and rem using a configurable root font size.
CSS Specificity Calculator
Calculate CSS selector specificity as an (inline, ID, class, element) tuple.