404
+This page doesn't exist or has been moved.
+diff --git a/.eleventy.js b/.eleventy.js deleted file mode 100644 index 215a5be..0000000 --- a/.eleventy.js +++ /dev/null @@ -1,10 +0,0 @@ -module.exports = function(eleventyConfig) { - eleventyConfig.addPassthroughCopy("./fonts"); - eleventyConfig.addPassthroughCopy("./images"); - eleventyConfig.addPassthroughCopy("./js"); - eleventyConfig.addWatchTarget("./styles"); - eleventyConfig.addPassthroughCopy("*.svg"); - eleventyConfig.addPassthroughCopy("*.png"); - eleventyConfig.addPassthroughCopy("*.ico"); - eleventyConfig.addPassthroughCopy("*.webmanifest"); -}; \ No newline at end of file diff --git a/.eleventyignore b/.eleventyignore deleted file mode 100644 index 455f916..0000000 --- a/.eleventyignore +++ /dev/null @@ -1,2 +0,0 @@ -google6440a06758b62a5f.html -README.md \ No newline at end of file diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 5a87346..0000000 --- a/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -node_modules -_site \ No newline at end of file diff --git a/.nojekyll b/.nojekyll deleted file mode 100644 index e69de29..0000000 diff --git a/404.html b/404.html new file mode 100644 index 0000000..8206b21 --- /dev/null +++ b/404.html @@ -0,0 +1,133 @@ + + +
+ + + + + + + +This page doesn't exist or has been moved.
+This page doesn't exist or has been moved.
-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.
+ +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 some established, popular methods to derive tints and shades via Sass. + +
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.
+I've also heard it's useful for teachers, data professionals, and people who make presentations.
+ +The given hex color is first converted to RGB. Then each component of the RGB color has the following calculation performed on it, respectively.
+ +New value = current value + ((255 - current value) x tint factor)
New value = current value x shade factor
The new value is rounded if necessary, and then converted back to hex for display.
+ +Let’s say we want tints and shades of Rebecca Purple, #663399.
+ +102 + ((255 - 102) x .1) = 117.3
, rounded to 11751 + ((255 - 51) x .1) = 71.4
, rounded to 71153 + ((255 - 153) x .1) = 163.2
, rounded to 163102 x .9 = 91.8
, rounded to 9251 x .9 = 45.9
, rounded to 46153 x .9 = 137.7
, rounded to 138This 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.
+ +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, Aleksandr Hovhannisyan, Shubhendu Sen, and Luis Escarrilla for their valuable contributions.
+ +0% | 10% | 20% | 30% | 40% | 50% | 60% | 70% | 80% | 90% | 100% |
0% | 10% | 20% | 30% | 40% | 50% | 60% | 70% | 80% | 90% | 100% |