All Projects → edelstone → Tints And Shades

edelstone / Tints And Shades

🌈 Display tints and shades of a given hex color in 10% increments.

Projects that are alternatives of or similar to Tints And Shades

JavaScript micro library to generate gradient color stops 🏳️‍🌈
Stars: ✭ 144 (-36.84%)
Mutual labels:  hex, color-scheme, rgb, colors, color-palette
Delightful color picker wheel for iOS in Swift.
Stars: ✭ 37 (-83.77%)
Mutual labels:  colors, color-scheme, color-palette
Material Palette Generator
🎨 Get perfect Material Design color palettes from any hex color.
Stars: ✭ 114 (-50%)
Mutual labels:  hex, color-scheme, colors
Golang Helper for beautiful CLI Applications
Stars: ✭ 86 (-62.28%)
Mutual labels:  hex, colors, rgb
🍇 Get the tints and shades of a color
Stars: ✭ 97 (-57.46%)
Mutual labels:  hex, rgb, colors
🎨 Easiest way to get a universal color palette
Stars: ✭ 21 (-90.79%)
Mutual labels:  colors, color-scheme, color-palette
Helper with GUI to generate color codes such as CSS color notations.
Stars: ✭ 88 (-61.4%)
Mutual labels:  hex, color-palette, rgb
🦚 A simple colors library
Stars: ✭ 15 (-93.42%)
Mutual labels:  hex, colors, rgb
React Color Extractor
A React component which extracts colors from an image
Stars: ✭ 314 (+37.72%)
Mutual labels:  hex, rgb, colors
An arctic, north-bluish color palette.
Stars: ✭ 4,816 (+2012.28%)
Mutual labels:  color-scheme, colors, color-palette
A curated list of awesome resources to choose your next color scheme
Stars: ✭ 702 (+207.89%)
Mutual labels:  color-scheme, colors, color-palette
colorschemes, colormaps, gradients, and palettes
Stars: ✭ 55 (-75.88%)
Mutual labels:  color-scheme, colors, color-palette
🎨 Overly descriptive color palettes
Stars: ✭ 207 (-9.21%)
Mutual labels:  color-scheme, colors, color-palette
Nord Hyper
An arctic, north-bluish clean and elegant Hyper theme plugin.
Stars: ✭ 96 (-57.89%)
Mutual labels:  color-scheme, colors
A tool that can convert your rgb images to nordtheme palette
Stars: ✭ 105 (-53.95%)
Mutual labels:  color-scheme, color-palette
Minimal vim color scheme
Stars: ✭ 93 (-59.21%)
Mutual labels:  color-scheme, colors
Nord Termite
An arctic, north-bluish clean and elegant Termite color theme.
Stars: ✭ 104 (-54.39%)
Mutual labels:  color-scheme, colors
Color manipulation utilities for Julia
Stars: ✭ 114 (-50%)
Mutual labels:  color-scheme, colors
Awesome Vim Colorschemes
Collection of awesome color schemes for Neo/vim, merged for quick use.
Stars: ✭ 1,951 (+755.7%)
Mutual labels:  color-scheme, colors
A collection of tools for handling colors on iOS SDK
Stars: ✭ 128 (-43.86%)
Mutual labels:  color-scheme, rgb

 Tint & Shade Generator

Screenshot of app home page Screenshot of color swatches after submitting form Perfect score on Lighthouse

What is the Tint & Shade Generator?

The purpose of this tool is to accurately produce tints (pure white added) and shades (pure black added) of a given hex color in 10% increments.

Why is this tool unique?

It takes the math seriously. In my experience similar tools get the calculation incorrect due to rounding errors, creator preferences, or other inconsistencies.

Testing shows that the output matches Chrome DevTools' calculation method as well as the Sass tint and shade functions.

When would I use this?

It's best used when you already have some base colors but would like complimentary colors for gradients, borders, backgrounds, shadows or other elements.

This is useful for designers who may be communicating color intent to developers who use Sass or PostCSS in their builds. It's also a solid way to quickly preview what tints and shades look like for a base color you may be considering for your design.

Calculation method

The given hex color is first converted to RGB. Then each component of the RGB color has the following calculation performed on it, respectively.

  • Tints: New value = current value + ((255 - current value) x tint factor)
  • Shades: New value = current value x shade factor

The new value is rounded if necessary, and then converted back to hex for display.

Example calculation

Let's say we want tints and shades of Rebecca Purple, #663399.

10% tint

  1. #663399 is converted to the RGB equivalent of 102, 51, 153
  2. R: 102 + ((255 - 102) x .1) = 117.3, rounded to 117
  3. G: 51 + ((255 - 51) x .1) = 71.4, rounded to 71
  4. B: 153 + ((255 - 153) x .1) = 163.2, rounded to 163
  5. RGB 117, 71, 163 is converted to the hex equivalent of #7547a3

10% shade

  1. #663399 is converted to the RGB equivalent of 102, 51, 153
  2. R: 102 x .9 = 91.8, rounded to 92
  3. G: 51 x .9 = 45.9, rounded to 46
  4. B: 153 x .9 = 137.7, rounded to 138
  5. RGB 92, 46, 138 is converted to the hex equivalent of #5c2e8a

Feedback and contributing

This project is open source and I'd love your help!

If you notice a bug or want a feature added please file an issue on GitHub. If you don't have an account there, just email me the details.

If you're a developer and want to help with the project, please comment on open issues or create a new one and communicate your intentions. Once we agree on a path forward you can just make a pull request and take it to the finish line.

Support this project

The Tint & Shade Generator will always be free but your support is greatly appreciated.


Michael Edelstone designed and organized the project with big-time assistance from Nick Wing on the color calculations.

We use these amazing open-source libraries across the project:

Many thanks to Joel Carr, Sebastian Gutierrez, Tim Scalzo, Aman Agarwal, and Aleksandr Hovhannisyan for their valuable contributions.

Fine print

  • Typography: Work Sans by Wei Huang
  • Colors: #000000, #ffffff, #e96443, and #ca228e
  • License: CC BY-SA 4.0
  • Performance: We have a perfect score on Google's web page auditing tool, Lighthouse. Check out the full report.
  • Privacy: The Tint & Shade Generator uses Hotjar and Google Analytics, both of which record basic information about your visit. I use this data strictly to improve the application and to understand the people who use it.
  • Like Google's Material Design? Try this other thing I made.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].