Skip to content

Instantly share code, notes, and snippets.

@malikbenkirane

malikbenkirane/solarized_hex.html

Created June 21, 2023 17:58
Show Gist options
  • Save malikbenkirane/55a0195a1e1dc08aaf44eb5014aee023 to your computer and use it in GitHub Desktop.
Save malikbenkirane/55a0195a1e1dc08aaf44eb5014aee023 to your computer and use it in GitHub Desktop.
Download ZIP
hexadecimal and rgb solarized with vanilla javascript and html
Raw
solarized_hex.html
<html>
<body>
<div style="display:flex;justify-content:space-around">
<div>
<h1>11</h1>
<div style="display:flex">
<div style="background-color:rgb(15,38,47);width:20px;height:20px"></div>
<div id="rgb_15_38_47">(15,38,47)</div>
</div>
<div style="display:flex">
<div style="background-color:rgb(165,127,30);width:20px;height:20px"></div>
<div id="rgb_165_127_30">(165,127,30)</div>
</div>
</div>
<div>
<h1>20</h1>
<div style="display:flex">
<div style="background-color:rgb(22,47,57);width:20px;height:20px"></div>
<div id="rgb_22_47_57">(22,47,57)</div>
</div>
<div style="display:flex">
<div style="background-color:rgb(181,75,31);width:20px;height:20px"></div>
<div id="rgb_181_75_31">(181,75,31)</div>
</div>
</div>
<div>
<h1>45</h1>
<div style="display:flex">
<div style="background-color:rgb(82,98,105);width:20px;height:20px"></div>
<div id="rgb_82_98_105">(82,98,105)</div>
</div>
<div style="display:flex">
<div style="background-color:rgb(197,61,46);width:20px;height:20px"></div>
<div id="rgb_197_61_46">(197,61,46)</div>
</div>
</div>
<div>
<h1>50</h1>
<div style="display:flex">
<div style="background-color:rgb(94,111,119);width:20px;height:20px"></div>
<div id="rgb_94_111_119">(94,111,119)</div>
</div>
<div style="display:flex">
<div style="background-color:rgb(188,63,117);width:20px;height:20px"></div>
<div id="rgb_188_63_117">(188,63,117)</div>
</div>
</div>
<div>
<h1>60</h1>
<div style="display:flex">
<div style="background-color:rgb(123,136,139);width:20px;height:20px"></div>
<div id="rgb_123_136_139">(123,136,139)</div>
</div>
<div style="display:flex">
<div style="background-color:rgb(98,103,185);width:20px;height:20px"></div>
<div id="rgb_98_103_185">(98,103,185)</div>
</div>
</div>
<div>
<h1>65</h1>
<div style="display:flex">
<div style="background-color:rgb(139,150,151);width:20px;height:20px"></div>
<div id="rgb_139_150_151">(139,150,151)</div>
</div>
<div style="display:flex">
<div style="background-color:rgb(61,127,200);width:20px;height:20px"></div>
<div id="rgb_61_127_200">(61,127,200)</div>
</div>
</div>
<div>
<h1>92</h1>
<div style="display:flex">
<div style="background-color:rgb(234,229,208);width:20px;height:20px"></div>
<div id="rgb_234_229_208">(234,229,208)</div>
</div>
<div style="display:flex">
<div style="background-color:rgb(70,148,141);width:20px;height:20px"></div>
<div id="rgb_70_148_141">(70,148,141)</div>
</div>
</div>
<div>
<h1>97</h1>
<div style="display:flex">
<div style="background-color:rgb(251,245,224);width:20px;height:20px"></div>
<div id="rgb_251_245_224">(251,245,224)</div>
</div>
<div style="display:flex">
<div style="background-color:rgb(125,141,31);width:20px;height:20px"></div>
<div id="rgb_125_141_31">(125,141,31)</div>
</div>
</div>
</div>
<br>
<button onclick="hex()">hex</button>
<script>
// http://stackoverflow.com/questions/5623838/ddg#5624139
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
const hex = function() {
console.log("hex!");
// 16 to hex
["rgb_15_38_47",
"rgb_165_127_30",
"rgb_22_47_57",
"rgb_181_75_31",
"rgb_82_98_105",
"rgb_197_61_46",
"rgb_94_111_119",
"rgb_188_63_117",
"rgb_123_136_139",
"rgb_98_103_185",
"rgb_139_150_151",
"rgb_61_127_200",
"rgb_234_229_208",
"rgb_70_148_141",
"rgb_251_245_224",
"rgb_125_141_31"].forEach(id => {
const fields = id.split("_")
const r = parseInt(fields[1]);
const g = parseInt(fields[2]);
const b = parseInt(fields[3]);
console.log(id);
document.getElementById(id).innerText = rgbToHex(r, g, b);
})
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment