COLOR TOOLS
Color Shades Generator.
Generate light-to-dark shades with copyable HEX, RGB and CSS variables.
#ffdd0f · rgb(255, 221, 15)
#ffca0e · rgb(255, 202, 14)
#ffb70d · rgb(255, 183, 13)
#ffa40b · rgb(255, 164, 11)
#e1910a · rgb(225, 145, 10)
#c47e09 · rgb(196, 126, 9)
#a76b07 · rgb(167, 107, 7)
#895806 · rgb(137, 88, 6)
#6c4605 · rgb(108, 70, 5)
#4e3304 · rgb(78, 51, 4)
--shade-100: #ffdd0f;
--shade-200: #ffca0e;
--shade-300: #ffb70d;
--shade-400: #ffa40b;
--shade-500: #e1910a;
--shade-600: #c47e09;
--shade-700: #a76b07;
--shade-800: #895806;
--shade-900: #6c4605;
--shade-1000: #4e3304;
Three simple steps
How to use Color Shades Generator
1
Choose base color
Select your starting brand color.
2
Review generated shades
Copy individual HEX/RGB values as needed.
3
Copy CSS variables
Paste the full variable set into your styles.