v1.0.0
viewing older
Initial release
2026-08-20
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Color Mixer — demo</title>
<style>
html,body{margin:0;height:100%;background:#0a0e14;color:#e7ecf3;font:14px/1.5 -apple-system,Inter,sans-serif}
body{display:grid;place-items:center}
.box{background:#0f141c;border:1px solid #1f2937;border-radius:16px;padding:32px;width:min(420px,90vw)}
h1{margin:0 0 20px;font-size:20px;letter-spacing:-0.02em}
.swatch{height:140px;border-radius:12px;display:grid;place-items:center;font:600 22px ui-monospace,monospace;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5);margin-bottom:20px;transition:background .15s}
.row{margin:14px 0}
.row label{display:flex;justify-content:space-between;font-size:12px;color:#8b95a7;margin-bottom:4px;font-family:ui-monospace,monospace}
.row input[type=range]{width:100%;accent-color:#00ff95}
.copy{margin-top:14px;padding:10px;background:#0a0e14;border-radius:8px;text-align:center;font-family:ui-monospace,monospace;font-size:13px;cursor:pointer;border:1px solid #1f2937;transition:.2s}
.copy:hover{border-color:#00ff95}
</style>
</head>
<body>
<div class="box">
<h1>Color Mixer</h1>
<div class="swatch" id="sw">#00ff95</div>
<div class="row">
<label>Red <span id="lr">0</span></label>
<input type="range" id="r" min="0" max="255" value="0">
</div>
<div class="row">
<label>Green <span id="lg">255</span></label>
<input type="range" id="g" min="0" max="255" value="255">
</div>
<div class="row">
<label>Blue <span id="lb">149</span></label>
<input type="range" id="b" min="0" max="255" value="149">
</div>
<div class="copy" id="copy">📋 คลิกเพื่อ copy hex</div>
</div>
<script>
(() => {
const r = document.getElementById('r'), g = document.getElementById('g'), b = document.getElementById('b');
const lr = document.getElementById('lr'), lg = document.getElementById('lg'), lb = document.getElementById('lb');
const sw = document.getElementById('sw'), copy = document.getElementById('copy');
let hex = '#00ff95';
function update() {
const R = +r.value, G = +g.value, B = +b.value;
lr.textContent = R; lg.textContent = G; lb.textContent = B;
hex = '#' + [R, G, B].map(v => v.toString(16).padStart(2, '0')).join('');
sw.style.background = hex; sw.textContent = hex;
}
[r, g, b].forEach(el => el.addEventListener('input', update));
copy.onclick = () => {
navigator.clipboard.writeText(hex);
copy.textContent = '✓ Copied ' + hex;
setTimeout(() => copy.textContent = '📋 คลิกเพื่อ copy hex', 1200);
};
update();
})();
</script>
</body>
</html>