colorjs.io
Version:
Color space agnostic color manipulation library
109 lines (100 loc) • 5.95 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LCH Colour picker</title>
<meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" href="https://get.mavo.io/mavo.css">
<link rel="stylesheet" href="https://css.land/lch/style.css">
<script src="../../color.js" type="module"></script>
<script src="https://get.mavo.io/mavo.js" defer></script>
</head>
<body>
<main mv-storage="local" mv-app="lchPicker" mv-autosave style="--color: [color.toString(group(fallback: true))]"
mv-init='data:application/json,{"lightness": 50, "chroma": 50, "hue": 50, "alpha": 100}'
class="[if(showAdvanced, 'show-advanced')]" mv-mode="read">
<meta property="supportsP3" content='[self.CSS && CSS.supports("color", "color(display-p3 0 1 0)")]'>
<meta property="outputSpace" content='[if(supportsP3, "p3", "srgb")]'>
<meta property="color" content="[Color.get('lch', list(50, 50, 50), 1)]" />
<h1>
LCH Colour Picker
<!-- <button mv-action="set(lchPicker, CSS_color_to_LCH())">Import…</button>
<span class="name" hidden>[LCH_name(lightness, chroma, hue)]</span> -->
</h1>
<!-- <label class="color-slider-label">Lightness (0-100)
<input class="color-slider" type="range" property="lightness" mv-default="[lightnessNumber]"
style="--stops: [slider_stops(color, 'lightness', list(0, 100))]" />
<input type="number" property="lightnessNumber" mv-default="[lightness]" style="--percentage: [lightness / 100]" max="100" />
</label>
<label class="color-slider-label">Chroma (0-132)
<input class="color-slider" type="range" property="chroma" mv-default="[chromaNumber]"
style="--stops: [slider_stops(color, 'chroma', list(0, 132))]" max="132" />
<input type="number" property="chromaNumber" mv-default="[chroma]" style="--percentage: [chroma / 132]" max="132" />
</label>
<label class="color-slider-label">Hue (0-360)
<input class="color-slider" type="range" property="hue" max="360" mv-default="[hueNumber]"
style="--stops: [slider_stops(color, 'hue', list(0, 360))]" />
<input type="number" property="hueNumber" mv-default="[hue]" style="--percentage: [hue / 360]" max="360" />
</label>
<label class="color-slider-label">Alpha (0-100)
<input class="color-slider" type="range" property="alpha" mv-default="[alphaNumber]"
style="--stops: [slider_stops(color, 'alpha', list(0, 1))]" />
<input type="number" property="alphaNumber" mv-default="[alpha]" style="--percentage: [alpha / 100]" max="100" />
</label> -->
<!-- <label>CSS Color <span class="decimals">(<span property="decimals" mv-mode="edit" mv-edit-type="number" mv-edit-min="0" mv-edit-max="20">3</span> decimals)</span>
<input property="lchColor" value="lch([round(lightness, decimals)]% [round(chroma, decimals)] [round(hue, decimals)][alpha_to_string(alpha)])" readonly />
</label> -->
<!-- <label class="[if(!color.inGamut('srgb'), 'out-of-gamut')]" style="--color: [colorRGB]">
<abbr>sRGB</abbr> Color <span mv-if="!supportsP3" title="This is what is currently displayed">👁</span>
<input property="colorRGB" value="[color.toString(group(space: 'srgb', inGamut: false))]" readonly />
<div class="out-of-gamut-warning">Color is actually [color.toString(group(space: 'srgb'))], which is out of sRGB gamut; auto-corrected to sRGB boundary.</div>
</label> -->
<!-- <details mv-attribute="open" property="showAdvanced">
<summary>Advanced</summary>
<label class="[if(!isLCH_within_P3(lightness, chroma, hue), 'out-of-gamut')]">
P3 Color <span mv-if="supportsP3" title="This is what is currently displayed">👁</span>
<input property="colorP3" value="[LCH_to_P3_string(lightness, chroma, hue, alpha, true)]" readonly />
<div class="out-of-gamut-warning">Color is actually [LCH_to_P3_string(lightness, chroma, hue, alpha)], which is not displayable on most screens as of 2019; auto-corrected to P3 boundary.</div>
</label>
<label class="[if(!isLCH_within_r2020(lightness, chroma, hue), 'out-of-gamut')]">Rec.2020 Color
<input property="colorR2020" value="[LCH_to_r2020_string(lightness, chroma, hue, alpha)]" readonly />
<div class="out-of-gamut-warning">Out of Rec.2020 gamut, are you kidding?!</div>
</label>
<section>
<h2>
Saved colors
<button mv-action="add(group(lightness: lightness, chroma: chroma, hue: hue, alpha: alpha), storedColor)">+ Add current</button>
<button mv-action="clear(storedColor)" class="clear" mv-if="count(storedColor) > 0">× Clear All</button>
</h2>
<div id="saved">
<div property="storedColor" mv-multiple mv-initial-items="0"
style="--color: [rgbstring]" mv-mode="edit" mv-group
class="[if(lightness > 70 or alpha < 60, 'light', 'dark')]">
<span property="name" mv-default="[LCH_name(lightness, chroma, hue)]" mv-mode="edit"></span>
<meta property="rgbstring" content="[LCH_to_sRGB_string(lightness, chroma, hue, alpha)]" />
<span data-letter="L">[lightness]</span>
<span data-letter="C">[chroma]</span>
<span data-letter="H">[hue]</span>
<span data-letter="A">[alpha]</span>
<span mv-action="set(lchPicker, storedColor)"></span>
<span class="gamut">
[if(isLCH_within_sRGB(lightness, chroma, hue), 'within sRGB', if(isLCH_within_P3(lightness, chroma, hue), 'P3', 'outside P3'))]
</span>
</div>
</div>
</section>
<section mv-if="count(storedColor) >= 2">
<h2>Gradient</h2>
<div id="gradient" style="--stops: [storedColor.rgbstring]"></div>
</section>
</details> -->
<footer>
<a href="http://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/">What is LCH?</a>
Made by <a href="http://lea.verou.me">Lea Verou</a> with <a href="https://mavo.io">Mavo</a>.
Conversion logic by <a href="https://svgees.us">Chris Lilley</a>.
<a href="https://github.com/leaverou/css.land">Code on Github</a>.
</footer>
</main>
<script src="lch.js" type="module"></script>
</body>
</html>