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