forked from edelstone/tints-and-shades
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
223 lines (171 loc) · 11.5 KB
/
about.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GNR8WM6SC0"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-GNR8WM6SC0');
</script>
<meta charset="UTF-8">
<meta name="description" content="Easily make tints and shades that match the output of Chrome DevTools, Sass, Less, and PostCSS.">
<meta name="author" content="Michael Edelstone">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About | Tint and Shade Generator</title>
<meta name="title" content="Tint and Shade Generator">
<link rel="canonical" href="https://maketintsandshades.com/about">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#fff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)">
<meta property="og:type" content="website">
<meta property="og:url" content="https://maketintsandshades.com/">
<meta property="og:title" content="Tint and Shade Generator">
<meta property="og:description" content="Easily make tints and shades that match the output of Chrome DevTools, Sass, Less, and PostCSS.">
<meta property="og:image" content="https://maketintsandshades.com/images/og-image.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://maketintsandshades.com/">
<meta name="twitter:title" content="Tint and Shade Generator">
<meta name="twitter:description" content="Easily make tints and shades that match the output of Chrome DevTools, Sass, Less, and PostCSS.">
<meta name="twitter:image" content="https://maketintsandshades.com/images/og-image.jpg">
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/fonts.css">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/dark.css">
<link rel="stylesheet" href="/css/carbon-alt.css">
<script> </script> <!-- Empty script tag fixes Chromimum bug where transitions fire on page load: https://bugs.chromium.org/p/chromium/issues/detail?id=1404365 -->
</head>
<body>
<a href="#main-content" class="offscreen">Jump to main content</a>
<div class="dark-mode">
<label for="darkmode-toggle" class="switch" tabindex="0">
<input id="darkmode-toggle" class="darkmode-toggle" type="checkbox" tabindex="-1">
<span class="control"></span>
<span class="label" id="darkmode-text-toggle">Go dark</span>
</label>
</div>
<a href="https://github.com/edelstone/tints-and-shades" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#000; color:#fff;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
<div class="ts-wrapper">
<header class="ts-header">
<div class="ts-headline">
<h1><a href="/">Tint & Shade Generator</a></h1>
<div class="ts-ad item-ads ts-ad-secondary">
<script async src="//cdn.carbonads.com/carbon.js?serve=CE7DP5QY&placement=maketintsandshadescom" id="_carbonads_js"></script>
</div>
</div>
</header>
<main id="main-content" class="ts-content ts-documentation">
<h2>What is the Tint & Shade Generator?</h2>
<p>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.</p>
<h2>Why is this tool unique?</h2>
<p>It takes the math seriously. In my experience similar tools get the calculation incorrect due to rounding errors, creator preferences, or other inconsistencies.</p>
<p>Testing shows that the output matches Chrome DevTools' calculation method as well as some <a href="https://css-tricks.com/snippets/sass/tint-shade-functions">established</a>, <a href="https://sindresorhus.com/sass-extras/#color-function-tint">popular</a> methods to derive tints and shades via Sass.
<h2>When would I use this?</h2>
<p>It's best used when you already have some base colors but would like complimentary colors for gradients, borders, backgrounds, shadows or other elements.</p>
<p>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.</p>
<p>I've also heard it's useful for teachers, data professionals, and people who make presentations.</p>
<h2>Calculation method</h2>
<p>The given hex color is first converted to RGB. Then each component of the RGB color has the following calculation performed on it, respectively.</p>
<ul>
<li><b>Tints:</b> <code>New value = current value + ((255 - current value) x tint factor)</code></li>
<li><b>Shades:</b> <code>New value = current value x shade factor</code></li>
</ul>
<p>The new value is rounded if necessary, and then converted back to hex for display.</p>
<h2>Example calculation</h2>
<p>Let’s say we want tints and shades of <a href="https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/">Rebecca Purple</a>, #663399.</p>
<h3>10% tint</h3>
<ol>
<li>#663399 is converted to the RGB equivalent of 102, 51, 153</li>
<li><b>R:</b> <code>102 + ((255 - 102) x .1) = 117.3</code>, rounded to 117</li>
<li><b>G:</b> <code>51 + ((255 - 51) x .1) = 71.4</code>, rounded to 71</li>
<li><b>B:</b> <code>153 + ((255 - 153) x .1) = 163.2</code>, rounded to 163</li>
<li>RGB 117, 71, 163 is converted to the hex equivalent of #7547a3</li>
</ol>
<h3>10% shade</h3>
<ol>
<li>#663399 is converted to the RGB equivalent of 102, 51, 153</li>
<li><b>R:</b> <code>102 x .9 = 91.8</code>, rounded to 92</li>
<li><b>G:</b> <code>51 x .9 = 45.9</code>, rounded to 46</li>
<li><b>B:</b> <code>153 x .9 = 137.7</code>, rounded to 138</li>
<li>RGB 92, 46, 138 is converted to the hex equivalent of #5c2e8a</li>
</ol>
<h2>Feedback and contributing</h2>
<p>This project is open source and I'd love your help!</p>
<p>If you notice a bug or want a feature added please <a href="https://github.com/edelstone/tints-and-shades/issues/new">file an issue on GitHub</a>. If you don't have an account there, just <a href="mailto:[email protected]">email me</a> the details.</p>
<p>If you're a developer and want to help with the project, please comment on <a href="https://github.com/edelstone/tints-and-shades/issues">open issues</a> 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.</p>
<h2>Support this project</h2>
<p>The Tint & Shade Generator will always be free but your support is greatly appreciated.</p>
<ul>
<li><a href="https://www.buymeacoffee.com/edelstone">Buy Me a Coffee</a></li>
<li><a href="https://venmo.com/michaeledelstone">Venmo</a></li>
<li><a href="https://cash.app/$edelstone">Cash App</a></li>
<li><a href="https://www.paypal.me/edelstone">Paypal</a></li>
</ul>
<h2>Credits</h2>
<p><a href="https://michaeledelstone.com">Michael Edelstone</a> designed and organized the project with big-time assistance from <a href="https://github.com/wickning1">Nick Wing</a> on the color calculations.</p>
<p>We use these amazing open-source libraries across the project:</p>
<ul>
<li><a href="https://colinespinas.github.io/darken/">Darken</a></li>
<li><a href="https://clipboardjs.com">clipboard.js</a></li>
<li><a href="https://jquery.com/">jQuery</a></li>
</ul>
<p>Many thanks to <a href="https://github.com/joelcarr">Joel Carr</a>, <a href="https://github.com/pepas24">Sebastian Gutierrez</a>, <a href="https://github.com/TJScalzo">Tim Scalzo</a>, <a href="https://github.com/AmanAgarwal041">Aman Agarwal</a>, <a href="https://github.com/AleksandrHovhannisyan">Aleksandr Hovhannisyan</a>, <a href="https://github.com/Sen-442b">Shubhendu Sen</a>, and <a href="https://github.com/latesc">Luis Escarrilla</a> for their valuable contributions.</p>
<h2>Other details</h2>
<ul>
<li>Typography: <a href="https://weiweihuanghuang.github.io/Work-Sans/">Work Sans</a> by Wei Huang</li>
<li>Colors: <a href="https://maketintsandshades.com/#000000">#000000</a>, <a href="https://maketintsandshades.com/#ffffff">#ffffff</a>, <a href="https://maketintsandshades.com/#e96443">#e96443</a>, and <a href="https://maketintsandshades.com/#ca228e">#ca228e</a></li>
<li>Performance: We have a perfect score on Google's web page auditing tool, Lighthouse. Check out <a href="https://maketintsandshades.com/lighthouse">the full report</a>.</li>
<li>Privacy: We use Google Analytics to record basic information about your visit strictly to improve the application and understand the people who use it.</li>
<li>Like Google's Material Design? Try <a href="https://materialpalettes.com">this other thing I made</a>.</li>
</ul>
</main>
<footer class="ts-footer">
<p><a href="/about">About</a><a href="/about#support-this-project">Support this project</a><p>
</footer>
</div>
<script src="/scripts/darken.js"></script>
<script src="/scripts/anchor.min.js"></script>
<script>anchors.add('h2');</script>
<script>
// Get the checkbox element from DOM.
let darkmodeToggle = document.getElementById('darkmode-toggle');
let darkModeTextToggle = document.getElementById("darkmode-text-toggle");
// Set options.
const darkmodeOptions = {
class: "darkmode-active",
/* Add here any option but do not use the toggle
option as you manually added an event listener. */
}
// Instantiate darken with options and callback.
const darkmode = new darken(darkmodeOptions, active => {
// If darkmode is active then check the checkbox.
if(active){
darkmodeToggle.checked = active;
darkModeTextToggle.innerText="Go bright";
}else{
darkModeTextToggle.innerText="Go dark";
}
// Same as
// if (active) darkmodeToggle.checked = true;
// else darkmodeToggle.checked = false;
});
// Add event listener on checkbox click.
darkmodeToggle.addEventListener('click', () => {
// Depending on the state of the checkbox, call the on/off methods.
if (darkmodeToggle.checked){
darkmode.on();
darkModeTextToggle.innerText="Go bright";
}
else{
darkmode.off();
darkModeTextToggle.innerText="Go dark";
}
});
</script>
</body>
</html>