facebook twitter github smile-o hacker-news medium reddit-alien Slice 2 Copy

Color Shades Generator

Enter Color

Example: #808080 or rgb(128, 128, 128) or gray or

Color Shades

Select color shade above and then click to copy value in desired type below

Selected Color

How to use Color Shades Generator?

  • Enter value of your color in textbox above in any format (RGB, HEX, RGBA, HSL, HSV etc.)
  • Different shades of the color will be generated which you can select to show more details.
  • Click to copy value of selected color shade in HEX, RGB, HSL or HSV.
  • Value will be copied directly to your clipboard.
  • In case your browser does not support copying values directly to clipboard via script then you can do a manual copy.
  • You can use the "Random" button to generate a random starting color for generating shades.
  • You can share the color shades using the URL in address bar as it updates to reflect current color.
  • We do not store any data entered by you and everything is done inside your browser.


  • Vue.js - The Progressive JavaScript Framework
  • TinyColor - Fast, small color manipulation and conversion for JavaScript
  • SweetAlert - A beautiful replacement for JavaScript's alert