Skip to content

Instantly share code, notes, and snippets.

@Sarverott

Sarverott/quickrun.sh

Created August 21, 2025 17:04
Show Gist options
  • Save Sarverott/4994161f03c374d9139506cc7703f227 to your computer and use it in GitHub Desktop.
Save Sarverott/4994161f03c374d9139506cc7703f227 to your computer and use it in GitHub Desktop.
Download ZIP
color samples to composing on website - dumb helper snippet
Raw
quickrun.sh
#!/bin/bash
python3 -m http.server 9980 .
Raw
rgb-sorter.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test of color pallet printing</title>
</head>
<body>
<!-- styles -->
<style>
input, button{
font-size:25px;
margin:30px;
}
body{
background:linear-gradient(140deg, #EADEDB 0%, #BC70A4 50%, #BFD641 75%);
font-family:monospace;
}
div, span{
display:inline-block;
}
div div{
width:2px !important;
height:100px !important;
}
div>div:hover, .marked-search{
margin: 5px;
width:8px !important;
}
span{
rotate: 90deg !important;
font-size:2px;
max-width:100px;
color:black;
text-shadow: 0 0 2px white;
}
h1{
text-shadow: 1px -1px 5px white, -2px 2px 10px white, 2px 2px 3px white, -2px -2px 2px white;
}
main{
padding:10px;
max-width:90vw;
}
div:hover>span, .marked-search>span{
padding-top:0 !important;
font-size:12px;
text-align:right;
height:100px;
color:white;
text-shadow: 0 0 4px black;
}
</style>
<main>
<input id="searched-code" placeholder="#f8f OR #00a">
<button id="mark-it">mark</button>
<!-- target div -->
<h1>ordering 1</h1>
<div id="test1"></div>
<h1>ordering 2</h1>
<div id="test2"></div>
<h1>ordering 3</h1>
<div id="test3"></div>
<h1>ordering 4</h1>
<div id="test4"></div>
</main>
<!-- script -->
<script>
document.getElementById("mark-it").addEventListener(
"click",
()=>{
var hexcode=document.getElementById("searched-code").value.split("#")[1].toLowerCase();
document.getElementById(
`color---${hexcode}`
).setAttribute(
"class",
"marked-search"
);
document.body.style.background=document.getElementById("searched-code").value.toLowerCase();
}
)
function hexingForStyle(int, ciphers){
var out="";
for(var i=1; i<ciphers; i++){
if(int<hexingMax(i))out+="0"
}
out+=int.toString(16);
return out;
}
function hexingMax(ciphers){
return (2**4)**ciphers;
}
async function getColorPallet(ciphers=3){
for(var i=0;i<hexingMax(ciphers);i++){
var hexstring=hexingForStyle(i, ciphers);
await printTest("#test1", hexstring, i);
await printTest("#test2", hexstring.split("").reverse().join(""), i);
await printTest("#test3", hexstring.charAt(1)+hexstring.charAt(2)+hexstring.charAt(0), i);
await printTest("#test4", hexstring.charAt(2)+hexstring.charAt(0)+hexstring.charAt(1), i);
}
}
async function printTest(selector, color, iter){
var x = document.createElement(`div`, {}), y=document.createElement(`span`, {})
x.style.background=`#${color}`
x.setAttribute("id", `color---${color}`)
y.style.paddingTop=`${iter%50}px`
x.setAttribute("title", `[CSS-style=] color: #${color.toUpperCase()} || color: ${x.style.background}`)
y.appendChild(document.createTextNode(`#${color.toUpperCase()}`))
x.appendChild(y)
document.querySelector(selector).appendChild(x);
}
getColorPallet();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment