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

oops that needs to be a different thing

Browse source
This commit is contained in:
41666 2025-04-15 20:59:07 -07:00
parent b3d747bc90
commit def17d8e17
1 changed files with 7 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -22,7 +22,8 @@
background-color: var(--color); background-color: var(--color);
} }
#color-box2 { #color-box2,
#color-box3 {
width: 100px; width: 100px;
height: 100px; height: 100px;
background-color: var(--color); background-color: var(--color);
@ -42,8 +43,9 @@
<button id="update">update</button> <button id="update">update</button>
</section> </section>
<section> <section>
<div id="color-box">oklab</div> <div id="color-box">highp rgb</div>
<div id="color-box2">hex</div> <div id="color-box2">hex</div>
<div id="color-box3">oklab</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="rgb3">rgb(-1,-1,-1)</li>
@ -84,6 +86,7 @@
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 colorBox2El = document.querySelector("#color-box2");
const colorBox3El = document.querySelector("#color-box3");
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");
@ -93,10 +96,7 @@
const setColor = (r, g, b) => { const setColor = (r, g, b) => {
const color = new Color(`rgb(${r}, ${g}, ${b})`); const color = new Color(`rgb(${r}, ${g}, ${b})`);
colorBoxEl.setAttribute( colorBoxEl.setAttribute("style", `--color: rgb(${r}, ${g}, ${b})`);
"style",
`--color: ${color.to("oklch").toString()}`
);
hexEl.innerHTML = color.toString({ format: "hex" }); hexEl.innerHTML = color.toString({ format: "hex" });
colorBox2El.setAttribute("style", `--color: ${hexEl.innerHTML}`); colorBox2El.setAttribute("style", `--color: ${hexEl.innerHTML}`);
@ -107,6 +107,7 @@
rgb3El.innerHTML = color.toString({ format: "rgb" }); rgb3El.innerHTML = color.toString({ format: "rgb" });
oklchEl.innerHTML = color.toString({ format: "oklch" }); oklchEl.innerHTML = color.toString({ format: "oklch" });
oklabEl.innerHTML = color.toString({ format: "oklab" }); oklabEl.innerHTML = color.toString({ format: "oklab" });
colorBox3El.setAttribute("style", `--color: ${oklabEl.innerHTML}`);
}; };
const base36to8bit = (b36) => (parseInt(b36, 36) / 46655) * 255; const base36to8bit = (b36) => (parseInt(b36, 36) / 46655) * 255;