CaveOps | Snippets: HEX/RGB Color Converter

:root {
    --gradient: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
 }
 *, *::before, *::after {
    outline: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html, body {
    height: 100vh;
    width: 100vw;
    font-family: Arial, Verdana, Helvetica, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courier New, Brush Script MT, monospace, cursive, serif, sans-serif;
    font-size: 20px;
    color: white;
    line-height: 1.2;
}
.container {
	width: 100%;
	min-height: 100%;
	background: var(--gradient);
    color: white;
	font-size: 1rem;
    padding: 20px;
	display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    overflow-y: scroll;
}
@media screen and (max-width: 640px) {
	.container {
		font-size: .6rem;
	}
}

CSS Before Head

HTML Head

.content {
    width: 100%;
    font-size: 1rem;
    padding: 0.5rem;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}
.wrapper {
    width: 100%;
    font-size: 1rem;
    padding: 0.5rem;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
input, button, #result {
    padding: 0.5rem;
    font-size: 1rem;
    border-radius: 6px;
    border: none;
}
#result {
    background: rgba(255, 255, 255, 0.2);
    width: 100%;
    min-height: 6rem;
    text-align: start;
}

CSS After Head

function rgbToHex(r, g, b) {
    r = r.toString(16);
    g = g.toString(16);
    b = b.toString(16);
    if (r.length == 1) r = "0" + r;
    if (g.length == 1) g = "0" + g;
    if (b.length == 1) b = "0" + b;
    return ("#" + r + g + b).toUpperCase();
}
function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

// Button events
function toHEX() {
	var rgbColor = {r: Number(document.getElementById('RGBInputR')?.value), g: Number(document.getElementById('RGBInputG')?.value), b: Number(document.getElementById('RGBInputB')?.value)};
	var hexColor = rgbToHex(rgbColor.r, rgbColor.g, rgbColor.b); // 将其转换为十六进制颜色值。
    document.getElementById('result').style.background = hexColor;
    document.getElementById('HexInput').value = hexColor.replace("#", "");
    document.getElementById('RGBInputR').value = rgbColor.r;
    document.getElementById('RGBInputG').value = rgbColor.g;
    document.getElementById('RGBInputB').value = rgbColor.b;
}

function toRGB() {
    var input = document.getElementById('HexInput')?.value;
	var hexColor = "#" + (input.length ? input : "000000");
	var rgbColor = hexToRgb(hexColor); // 将其转换为RGB颜色值。
    let cssrgb = "rgb(" + rgbColor.r + ', ' + rgbColor.g + ', ' + rgbColor.b + ')';
    document.getElementById('result').style.background = cssrgb;
    document.getElementById('RGBInputR').value = rgbColor.r;
    document.getElementById('RGBInputG').value = rgbColor.g;
    document.getElementById('RGBInputB').value = rgbColor.b;
    document.getElementById('HexInput').value = hexColor.replace("#", "");
}

JS Before HTML Body

<div class="container" id="container">
    <div class="content">
        <h1>HEX/RGB Converter</h1>
        <div class="wrapper">
            <p><label for="HexInput">#</label>
                <input type="text" id="HexInput" placeholder="输入HEX颜色" value="FFD43B"></p>
            
            <button onclick="javascript:toRGB()">转换至RGB</button>
            <p><label for="RGBInputR">R</label>
                <input type="number" id="RGBInputR" placeholder="输入RGB-R颜色" value="163"></p>
            
            <p><label for="RGBInputG">G</label>
                <input type="number" id="RGBInputG" placeholder="输入RGB-G颜色" value="234"></p>
            
            <p><label for="RGBInputB">B</label>
                <input type="number" id="RGBInputB" placeholder="输入RGB-B颜色" value="21"></p>
            
            <button onclick="javascript:toHEX()">转换至HEX</button>
            <div id="result"></div>
        </div>
    </div>
    <div class="footer">Hotodogo Copyright</div>
</div>

HTML Body

HTML Foot

JS After HTML Body