← All Color Tools
☀️
Lightness Adjuster
Generate tints and shades (Tailwind 50-950)
🎨 Lightness Adjuster
☀️ Base Color
🎨 Tailwind Scale (50-950)
50
#e7f0fe
100
#cee0fd
200
#9ec1fa
300
#6da2f8
400
#3c83f6
500
#0b64f4
600
#0a54cd
700
#0842a1
800
#06327a
900
#04204e
950
#021431
CSS Variables
:root {
--color-50: #E7F0FE;
--color-100: #CEE0FD;
--color-200: #9EC1FA;
--color-300: #6DA2F8;
--color-400: #3C83F6;
--color-500: #0B64F4;
--color-600: #0A54CD;
--color-700: #0842A1;
--color-800: #06327A;
--color-900: #04204E;
--color-950: #021431;
}
❓ Frequently Asked Questions
Common questions about Lightness Adjuster
What lightness adjuster?▼
Generates lighter (tints) and darker (shades) variations of base color. Perfect for hover states, depth.
Free shades tool?▼
Yes, 100% free. Enter base. Get 10+ variations. Tailwind-style 50-950 scale. Copy CSS.
Tint vs Shade?▼
Tint: add white (lighter). Shade: add black (darker). Tone: add gray. All from same base color.
Tailwind 50-950?▼
Color-50: very light. Color-500: base color. Color-950: very dark. Standard scale across all colors.
Use cases?▼
Hover states (slightly darker). Backgrounds (lighter shades). Borders (medium shades). Text (dark/light).
How many variations?▼
Standard 11 (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950). Tailwind convention.
Maintain hue?▼
Pure tinting may shift perceived hue. Use HSL: keep H, adjust L only. Maintain color identity.
Design system?▼
Color tokens with lightness scale. Reusable across project. CSS variables: --primary-50 to --primary-950.
Dark mode prep?▼
Generate dark variants automatically. Light mode primary-500 might be dark mode primary-300.
CSS export?▼
Tool generates CSS variables, Tailwind config, JSON. Plug directly into design system.