|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | + <meta charset="UTF-8"> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | + <title>Document</title> |
| 7 | +<link rel="stylesheet" href="https://gist.githubusercontent.com/bgoonz/37bca66ce8441c688900b6f082f10560/raw/2e9a5966431d89b8ce6355e7b8039ba42554978b/CSS-Styling-for-Pandoc-generated-html.css"> |
| 8 | +<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> |
| 9 | +<link rel="stylesheet" href="https://raw.githubusercontent.com/bgoonz/styling-templates/master/bootstrap3/assets/css/bootstrap.min.css"> |
| 10 | +<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js" integrity="sha512-YBk7HhgDZvBxmtOfUdvX0z8IH2d10Hp3aEygaMNhtF8fSOvBZ16D/1bXZTJV6ndk/L/DlXxYStP8jrF77v2MIg==" crossorigin="anonymous"></script> |
| 11 | +<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-css.min.js" integrity="sha512-1qYok2x2Rsm2y+mrdyrp00iH7xYSgVyIQ1egDAoT7CBZ3kSzlaJK+NhWAh746NeL3gnH6dnP8FGS+3xOdwO7ig==" crossorigin="anonymous"></script> |
| 12 | +<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" /> |
| 13 | + |
| 14 | +</head> |
| 15 | +<body>; |
| 16 | +<p>Converts a RGB color tuple to HSL format.</p> |
| 17 | +<ul> |
| 18 | +<li>Use the <a href="https://www.niwa.nu/2013/05/math-behind-colorspace-conversions-rgb-hsl/">RGB to HSL conversion formula</a> to convert to the appropriate format.</li> |
| 19 | +<li>The range of all input parameters is [0, 255].</li> |
| 20 | +<li>The range of the resulting values is H: [0, 360], S: [0, 100], L: [0, 100].</li> |
| 21 | +</ul> |
| 22 | +<div class="sourceCode" id="cb1"><pre class="sourceCode js"><code class="language-js sourceCode javascript"><a class="sourceLine" id="cb1-1" title="1"><span class="kw">const</span> RGBToHSL <span class="op">=</span> (r<span class="op">,</span> g<span class="op">,</span> b) <span class="kw">=></span> <span class="op">{</span></a> |
| 23 | +<a class="sourceLine" id="cb1-2" title="2"> r /<span class="op">=</span> <span class="dv">255</span><span class="op">;</span></a> |
| 24 | +<a class="sourceLine" id="cb1-3" title="3"> g /<span class="op">=</span> <span class="dv">255</span><span class="op">;</span></a> |
| 25 | +<a class="sourceLine" id="cb1-4" title="4"> b /<span class="op">=</span> <span class="dv">255</span><span class="op">;</span></a> |
| 26 | +<a class="sourceLine" id="cb1-5" title="5"> <span class="kw">const</span> l <span class="op">=</span> <span class="va">Math</span>.<span class="at">max</span>(r<span class="op">,</span> g<span class="op">,</span> b)<span class="op">;</span></a> |
| 27 | +<a class="sourceLine" id="cb1-6" title="6"> <span class="kw">const</span> s <span class="op">=</span> l <span class="op">-</span> <span class="va">Math</span>.<span class="at">min</span>(r<span class="op">,</span> g<span class="op">,</span> b)<span class="op">;</span></a> |
| 28 | +<a class="sourceLine" id="cb1-7" title="7"> <span class="kw">const</span> h <span class="op">=</span> s</a> |
| 29 | +<a class="sourceLine" id="cb1-8" title="8"> <span class="op">?</span> l <span class="op">===</span> r</a> |
| 30 | +<a class="sourceLine" id="cb1-9" title="9"> <span class="op">?</span> (g <span class="op">-</span> b) / s</a> |
| 31 | +<a class="sourceLine" id="cb1-10" title="10"> : l <span class="op">===</span> g</a> |
| 32 | +<a class="sourceLine" id="cb1-11" title="11"> <span class="op">?</span> <span class="dv">2</span> <span class="op">+</span> (b <span class="op">-</span> r) / s</a> |
| 33 | +<a class="sourceLine" id="cb1-12" title="12"> : <span class="dv">4</span> <span class="op">+</span> (r <span class="op">-</span> g) / s</a> |
| 34 | +<a class="sourceLine" id="cb1-13" title="13"> : <span class="dv">0</span><span class="op">;</span></a> |
| 35 | +<a class="sourceLine" id="cb1-14" title="14"> <span class="cf">return</span> [</a> |
| 36 | +<a class="sourceLine" id="cb1-15" title="15"> <span class="dv">60</span> <span class="op">*</span> h <span class="op"><</span> <span class="dv">0</span> <span class="op">?</span> <span class="dv">60</span> <span class="op">*</span> h <span class="op">+</span> <span class="dv">360</span> : <span class="dv">60</span> <span class="op">*</span> h<span class="op">,</span></a> |
| 37 | +<a class="sourceLine" id="cb1-16" title="16"> <span class="dv">100</span> <span class="op">*</span> (s <span class="op">?</span> (l <span class="op"><=</span> <span class="fl">0.5</span> <span class="op">?</span> s / (<span class="dv">2</span> <span class="op">*</span> l <span class="op">-</span> s) : s / (<span class="dv">2</span> <span class="op">-</span> (<span class="dv">2</span> <span class="op">*</span> l <span class="op">-</span> s))) : <span class="dv">0</span>)<span class="op">,</span></a> |
| 38 | +<a class="sourceLine" id="cb1-17" title="17"> (<span class="dv">100</span> <span class="op">*</span> (<span class="dv">2</span> <span class="op">*</span> l <span class="op">-</span> s)) / <span class="dv">2</span><span class="op">,</span></a> |
| 39 | +<a class="sourceLine" id="cb1-18" title="18"> ]<span class="op">;</span></a> |
| 40 | +<a class="sourceLine" id="cb1-19" title="19"><span class="op">};</span></a></code></pre></div> |
| 41 | +<div class="sourceCode" id="cb2"><pre class="sourceCode js"><code class="language-js sourceCode javascript"><a class="sourceLine" id="cb2-1" title="1"><span class="at">RGBToHSL</span>(<span class="dv">45</span><span class="op">,</span> <span class="dv">23</span><span class="op">,</span> <span class="dv">11</span>)<span class="op">;</span> <span class="co">// [21.17647, 60.71428, 10.98039]</span></a></code></pre></div> |
| 42 | +</body></html> |
0 commit comments