-
Notifications
You must be signed in to change notification settings - Fork 52
/
Copy pathindex.html
98 lines (95 loc) · 5.33 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="shortcut icon" type="image/png" href="/favicon.png" />
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@200;800&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover" />
<meta name="description" content="An excellent HSL, HWB, and RGB color picker, written in React on Vite and fully open source." />
<meta property="og:site_name" content="HSL Color Picker" />
<meta property="og:title" content="HSL Color Picker" />
<meta property="og:url" content="https://hslpicker.com" />
<meta property="og:image" content="https://hslpicker.com/hslpicker.png" />
<meta property="og:description" content="An excellent color picker for the web, using HSL, HWB, and RGB color modes. It's open source and written in React on Vite." />
<title>HSL Color Picker</title>
<script type="application/javascript">
function toggleExplainer(event) {
const explainer = document.querySelector('#explainer')
explainer.dataset.visible = explainer.dataset.visible == 'false' ? true : false
}
</script>
</head>
<body>
<div id="app">
<header class="banner">
<div class="preamble">A Most Excellent</div>
<h1>HSL Color Picker</h1>
<div class="credit">Created for your enjoyment by <a rel="noreferrer" href="https://x.com/imathis"
target="_blank">Brandon Mathis</a></div>
</header>
<div>
<div id="root" />
<script type="module" src="/src/main.jsx"></script>
</div>
<footer>
<div class="footer-links">
<span>
<a href="https://github.com/imathis/hsl-picker">Source</a>
© 2024 <a rel='noreferrer' href="https://x.com/imathis">Brandon Mathis</a>
</span>
<span class="divider">|</span>
<Button onclick="toggleExplainer()">HSL vs HWB?</Button>
</div>
<div id="explainer" data-visible='false'>
<h3>HSL & HWB: Hue</h3>
<p>
In both <abbr title="Hue, Saturation, Luminosity">HSL</abbr> and <abbr title="Hue, Whiteness, Blackness">HWB</abbr>
we can describe and manipulate colors in a very natural way. The hue property ranges from 0 to 360 letting us select
our base color. For example, red shows up at 0, yellow at 50, and orange naturally resides between them at 25 degrees.
</p>
<p>
With the HSL model, a pure red is at <code>hsl(0 100% 50%)</code>. In HWB however, a pure red is <code>hwb(0 0 0)</code>.
Read on to learn the differences beteen these two models.
</p>
<h3>HSL: Saturation & Luminosity</h3>
<p>
Saturation is a percentage that describes the amount of hue in our color. Starting with our pure red at
<code>hsl(0 100% 50%)</code>, as we reduce the saturation our color will become more and more gray.
At 0% saturation the hue will not be evident in the color at all, leaving us with a grayscale spectrum. At
100% we will have the full brilliance of the hue availabe to our color mix.
</p>
<p>
Luminosity is a percentage which allows us to tweak the amount of white or black added to our color mix.
Again, given our pure red <code>hsl(0 100% 50%)</code>, our luminosity is at 50%. As we reduce the luminosity
our color darkens until it becomes black at 0%.
As you would expect, when we increase the luminosity our red becomes pink and eventually white at 100%
luminosity.
</p>
<h3>HWB: Whiteness & Blackness</h3>
<p>
Whiteness, as you‘d expect, ligthens a color as you increase it from 0% to 100%. And as it would follow
Blackness adds black to your color. A color with 0% blackness and 100% whiteness will always be white. As you
increase the blackness, the color will become more gray.
Let‘s look at our pure red again. In HWB it is <code>hwb(0, 0, 0)</code>. If we want to make it more pink, we
need to add whiteness. If we want to desaturate it a bit we can add some blackness too, which will make it
appear more of a smokey pink.
</p>
<h3>Which to use?</h3>
<p>
HSL came first to the web, rescuing us from the misery of picking colors in HEX (#c0ff33 anyone?) or RGB. HSL
was instantly a better choice and lead me to create this website to help people understand how HSL worked.
However, if you‘ve spent much time using graphics applications you may be familiar with HWB‘s cousin <abbr
title="Hue, Saturation, Brightness">HSB</abbr>. If that is what you‘re used to, HWB will feel very familiar
to you. With excellent browser support you will be fine with either choice.
</p>
<h3>WAIT A MINUTE, Eight Character Hex Colors???</h3>
<p>Yea pretty neat huh? It turns out hex colors support alpha. You can even have four character hex colors. Just
like <code>#F3A</code> is shorthand for <code>#FF33AA</code> so the color <code>#F3A0</code> is a transparent
pink which expands to <code>#FF33AA00</code>.
</div>
</footer>
</div>
</body>
</html>