🎨 Color Palette Generator
Generate shades, tints, and harmonious color schemes from any base color. Get hex, RGB, and HSL values ready to use in your project.
Base Color
Scheme
🌗 Shades & Tints (11 steps)
50
#f1f1fe
100
#e2e3fd
200
#c0c1fb
300
#8b8df8
400
#4d4ff5
500
#0e12f1
600
#0c0fca
700
#0a0ca9
800
#07097d
900
#040548
950
#020327
🎡 Color Harmony — Complementary
Base
#6366f1
rgb(99, 102, 241)
Complement
#f2ef64
rgb(242, 239, 100)
📋 CSS Custom Properties
:root {
--color-primary-50: #f1f1fe;
--color-primary-100: #e2e3fd;
--color-primary-200: #c0c1fb;
--color-primary-300: #8b8df8;
--color-primary-400: #4d4ff5;
--color-primary-500: #0e12f1;
--color-primary-600: #0c0fca;
--color-primary-700: #0a0ca9;
--color-primary-800: #07097d;
--color-primary-900: #040548;
--color-primary-950: #020327;
}