Shades Generator
Enter any hex color to generate a complete Tailwind-style shade palette — from light tints (50) to deep darks (950). Export as CSS variables or a Tailwind config snippet.
Base Color
#6366F1
Shade Palette
50
#F3F3FE100
#E3E3FC200
#CDCEFB300
#B4B6F8400
#9A9CF6500
#6366F1600
#4A4DB5700
#363885800
#26275C900
#161635950
#0A0A18CSS Variables
:root {
--color-50: #F3F3FE;
--color-100: #E3E3FC;
--color-200: #CDCEFB;
--color-300: #B4B6F8;
--color-400: #9A9CF6;
--color-500: #6366F1;
--color-600: #4A4DB5;
--color-700: #363885;
--color-800: #26275C;
--color-900: #161635;
--color-950: #0A0A18;
}Tailwind Config Snippet
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#F3F3FE',
100: '#E3E3FC',
200: '#CDCEFB',
300: '#B4B6F8',
400: '#9A9CF6',
500: '#6366F1',
600: '#4A4DB5',
700: '#363885',
800: '#26275C',
900: '#161635',
950: '#0A0A18',
},
},
},
},
};