Shade & Tint Generator
Generate a scale of shades (darker) and tints (lighter) from any base color.
Result
Base Color
#3b82f6Tints (lighter)
#5c97f8, #7cacf9, #9dc1fb, #bed5fc, #deeafeShades (darker)
#316ccd, #2757a4, #1e417b, #142b52, #0a1629Tint CSS Variables
--tint-100: #5c97f8;
--tint-200: #7cacf9;
--tint-300: #9dc1fb;
--tint-400: #bed5fc;
--tint-500: #deeafe;Shade CSS Variables
--shade-100: #316ccd;
--shade-200: #2757a4;
--shade-300: #1e417b;
--shade-400: #142b52;
--shade-500: #0a1629;