Advanced Color
Preview#2563EB
Design color
A clean working swatch for interface surfaces, actions, accents, and palette building.
Primary • Interactive • System-ready
HEX
#2563EB
RGB
rgb(37, 99, 235)
HSL
hsl(221, 83%, 53%)
RGB channels
HSL channels
Shades
Tints
CSS variables
:root {
--color-base: #2563EB;
--color-shade-1: #2157CF;
--color-shade-2: #1C4BB3;
--color-shade-3: #183F96;
--color-shade-4: #13337A;
--color-tint-1: #3F76ED;
--color-tint-2: #5988F0;
--color-tint-3: #739BF2;
--color-tint-4: #8EAEF5;
}Overview
Generate advanced color values in HEX, RGB, and HSL. Create shades and tints, preview surfaces, and copy CSS variables instantly.
Build HEX, RGB, and HSL color systems with shades, tints, and copy-ready values.
Common workflows
- Generate shades, tints, and alternate color formats from one base color.
- Build palette harmonies and compare them in a UI preview before exporting values.
- Create CSS-ready gradients, radius values, shadow layers, and typography scales for frontend implementation.
FAQ
Can I copy HEX, RGB, and HSL values?
Yes. Every format can be copied individually, along with a CSS variable export for the full color system.
Does it generate shades and tints automatically?
Yes. The tool builds multiple darker shades and lighter tints from your base color for design system work.