Color Converter & Palette Generator
Convert between HEX, RGB, HSL and CMYK, then generate tints, shades, complementary, triadic, and analogous palettes — all in your browser.
r
g
b
h°
s%
l%
c
m
y
k
Palette Generator
Click any color to set it as your new base.
Tints (lighter)
#5895F7#76A8F9#93BAFA#B1CDFB#CEE0FDShades (darker)
#326FD1#295BAC#204887#183462#0F213EComplementary
#3B82F6#F6AF3CTriadic
#3B82F6#F63C83#83F63CAnalogous
#3CF6ED#3CC1F6#3B82F6#3C45F6#713CF6CSS Variables Export
Drop these custom properties into your stylesheet to use the full palette.
How designers use color palettes
Brand systems
Pick a primary, then derive tints and shades for backgrounds, hovers, and borders — keeping a consistent visual identity.
Accessible UI states
Use shades for pressed/active states and tints for muted or disabled surfaces to maintain hierarchy.
Data visualization
Analogous palettes work for ordered/sequential data; triadic and complementary palettes highlight categories.
Marketing & illustration
Complementary pairs add punch to calls-to-action, while analogous schemes feel harmonious for hero sections.