noe/noe.sh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

oklab and oklch girltwink modes

Browse source
This commit is contained in:
41666 2025-04-15 20:46:20 -07:00
parent 1136fbf3d3
commit b3d747bc90
1 changed files with 33 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
-~-/what the fuck is a lightrunner/-~-/index.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<title>base32 color</title> <title>base36 color</title>
<link rel="preconnect" href="https://fonts.bunny.net" /> <link rel="preconnect" href="https://fonts.bunny.net" />
<link <link
href="https://fonts.bunny.net/css?family=atkinson-hyperlegible:400,400i,700,700i" href="https://fonts.bunny.net/css?family=atkinson-hyperlegible:400,400i,700,700i"
@ -21,6 +21,12 @@
height: 300px; height: 300px;
background-color: var(--color); background-color: var(--color);
} }
#color-box2 {
width: 100px;
height: 100px;
background-color: var(--color);
}
</style> </style>
<noscript> <noscript>
@ -36,11 +42,15 @@
<button id="update">update</button> <button id="update">update</button>
</section> </section>
<section> <section>
<div id="color-box"></div> <div id="color-box">oklab</div>
<div id="color-box2">hex</div>
<ul> <ul>
<li id="rgb">rgb(-1,-1,-1)</li> <li id="rgb">rgb(-1,-1,-1)</li>
<li id="rgb3">rgb(-1,-1,-1)</li>
<li id="hex">#HHHHHH</li> <li id="hex">#HHHHHH</li>
<li id="rgb2">high precision rgb(-1,-1,-1)</li> <li id="rgb2">high precision rgb(-1,-1,-1)</li>
<li id="oklch">oklch(-1 -1 -1)</li>
<li id="oklab">oklab(-1 -1 -1)</li>
</ul> </ul>
</section> </section>
<section> <section>
@ -67,35 +77,46 @@
</section> </section>
</main> </main>
<script src="https://colorjs.io/dist/color.global.js"></script>
<script> <script>
const inputEl = document.querySelector("#input"); const inputEl = document.querySelector("#input");
const updateEl = document.querySelector("#update"); const updateEl = document.querySelector("#update");
const colorBoxEl = document.querySelector("#color-box"); const colorBoxEl = document.querySelector("#color-box");
const colorBox2El = document.querySelector("#color-box2");
const hexEl = document.querySelector("#hex"); const hexEl = document.querySelector("#hex");
const rgbEl = document.querySelector("#rgb"); const rgbEl = document.querySelector("#rgb");
const rgb2El = document.querySelector("#rgb2"); const rgb2El = document.querySelector("#rgb2");
const rgb3El = document.querySelector("#rgb3");
const oklchEl = document.querySelector("#oklch");
const oklabEl = document.querySelector("#oklab");
const setColor = (r, g, b) => { const setColor = (r, g, b) => {
colorBoxEl.setAttribute("style", `--color: rgb(${r}, ${g}, ${b})`); const color = new Color(`rgb(${r}, ${g}, ${b})`);
hexEl.innerHTML = `#${( colorBoxEl.setAttribute(
Math.round(r).toString(16).padStart(2, "0") + "style",
Math.round(g).toString(16).padStart(2, "0") + `--color: ${color.to("oklch").toString()}`
Math.round(b).toString(16).padStart(2, "0") );
).toLowerCase()}`;
hexEl.innerHTML = color.toString({ format: "hex" });
colorBox2El.setAttribute("style", `--color: ${hexEl.innerHTML}`);
rgbEl.innerHTML = `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round( rgbEl.innerHTML = `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(
b b
)})`; )})`;
rgb2El.innerHTML = `highp rgb(${r}, ${g}, ${b})`; rgb2El.innerHTML = `highp rgb(${r}, ${g}, ${b})`;
rgb3El.innerHTML = color.toString({ format: "rgb" });
oklchEl.innerHTML = color.toString({ format: "oklch" });
oklabEl.innerHTML = color.toString({ format: "oklab" });
}; };
const base32to8bit = (b32) => (parseInt(b32, 36) / 46655) * 255; const base36to8bit = (b36) => (parseInt(b36, 36) / 46655) * 255;
const inputToColor = (inputRaw) => { const inputToColor = (inputRaw) => {
const input = inputRaw + "000000000"; const input = inputRaw + "000000000";
// Input will be 0-9A-Z, // Input will be 0-9A-Z,
const r = base32to8bit(input.substr(0, 3)); const r = base36to8bit(input.substr(0, 3));
const g = base32to8bit(input.substr(3, 3)); const g = base36to8bit(input.substr(3, 3));
const b = base32to8bit(input.substr(6, 3)); const b = base36to8bit(input.substr(6, 3));
return { r, g, b }; return { r, g, b };
}; };