Color Shades Generator

Generate light-to-dark shades with copyable HEX, RGB and CSS variables.

COLOR TOOLS
#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;

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.

Related Tools