Hex Digit Color Code Calculator

6-digit hex 3-digit hex (shorthand)

                  HEX
                  #000000
                
                  RGB
                  rgb(0, 0, 0)
                
                  HSL
                  hsl(0, 0%, 0%)

How it works

Choose each hex digit from the dropdowns. For 3-digit mode each selected digit expands to a pair (for example, A becomes AA) to form a 6-digit hex. The preview, RGB, and HSL values update live.

:root { --bg: #f7f8fa; --card: #ffffff; --accent: #2b6cb0; --text: #0f172a; --muted: #64748b; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: Inter, Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial; background: var(--bg); color: var(--text); } .header { padding: 24px; text-align: center; background: linear-gradient(90deg, rgba(43,108,176,0.08), rgba(43,108,176,0.02)); border-bottom: 1px solid rgba(15,23,42,0.05); } .header h1 { margin: 0 0 6px 0; font-size: 1.5rem; } .header p { margin: 0; color: var(--muted); font-size: 0.95rem; } .container { max-width: 980px; margin: 28px auto; padding: 20px; display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; } .controls { background: var(--card); padding: 18px; border-radius: 10px; box-shadow: 0 6px 18px rgba(12,18,29,0.06); min-height: 220px; } .mode { display: flex; gap: 12px; margin-bottom: 14px; align-items: center; } .mode label { font-size: 0.95rem; color: var(--muted); } .hex-form { display: flex; flex-direction: column; gap: 12px; } .selects { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .digit-group { display: flex; flex-direction: column; gap: 6px; align-items: center; } .digit-group label { font-size: 0.75rem; color: var(--muted); } select.hex-digit { padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(15,23,42,0.08); background: #fff; font-weight: 600; font-size: 1rem; min-width: 54px; text-align: center; appearance: none; -moz-appearance: none; -webkit-appearance: none; cursor: pointer; } .actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } button { cursor: pointer; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(15,23,42,0.06); background: #fff; color: var(--text); font-weight: 600; transition: all 120ms ease; } button#apply-bg { background: var(--accent); color: #fff; border: none; } button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(12,18,29,0.06); } .output { display: flex; gap: 12px; align-items: center; margin-top: 12px; } .swatch { width: 84px; height: 84px; border-radius: 8px; border: 1px solid rgba(15,23,42,0.06); background: #000; flex: 0 0 84px; } .codes { display: flex; flex-direction: column; gap: 8px; color: var(--muted); } .code-line { display: flex; gap: 8px; align-items: baseline; } .code-line label { min-width: 40px; font-size: 0.85rem; color: var(--muted); } output { font-weight: 700; font-size: 1rem; color: var(--text); } .legend { background: var(--card); padding: 16px; border-radius: 10px; box-shadow: 0 6px 18px rgba(12,18,29,0.04); color: var(--muted); } .footer { text-align: center; padding: 18px; color: var(--muted); font-size: 0.9rem; } @media (max-width: 860px) { .container { grid-template-columns: 1fr; padding: 12px; } .selects { justify-content: center; } } export function clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } export function expandShortHex(hex) { // Accept formats like "abc" and return "aabbcc" if (hex.length === 3) { return hex.split("").map(c => c + c).join(""); } return hex; } export function hexToRgb(hex) { const cleaned = hex.replace(/^#/, ""); const full = expandShortHex(cleaned); const r = parseInt(full.slice(0, 2), 16); const g = parseInt(full.slice(2, 4), 16); const b = parseInt(full.slice(4, 6), 16); return { r, g, b }; } export function rgbToHsl(r, g, b) { r /= 255; g /= 255; b /= 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); let h, s; const l = (max + min) / 2; if (max === min) { h = s = 0; } else { const d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; default: h = (r - g) / d + 4; } h /= 6; } return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }; } export function rgbString({ r, g, b }) { return `rgb(${r}, ${g}, ${b})`; } export function hslString(hsl) { return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`; } import { hexToRgb, rgbToHsl, rgbString, hslString } from "./color-utils.js"; const HEX_DIGITS = [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F" ]; const selectsContainer = document.getElementById("selects"); const hexOutput = document.getElementById("hex-output"); const rgbOutput = document.getElementById("rgb-output"); const hslOutput = document.getElementById("hsl-output"); const swatch = document.getElementById("swatch"); const applyBgBtn = document.getElementById("apply-bg"); const copyHexBtn = document.getElementById("copy-hex"); const resetBtn = document.getElementById("reset"); const modeRadios = document.querySelectorAll('input[name="mode"]'); let mode = "6"; function buildSelect(labelText, index) { const wrapper = document.createElement("div"); wrapper.className = "digit-group"; const label = document.createElement("label"); label.textContent = labelText; const select = document.createElement("select"); select.className = "hex-digit"; select.setAttribute("data-index", index); HEX_DIGITS.forEach(d => { const opt = document.createElement("option"); opt.value = d; opt.textContent = d; select.appendChild(opt); }); select.value = "0"; select.addEventListener("change", updatePreview); wrapper.appendChild(label); wrapper.appendChild(select); return wrapper; } function buildSelects(count) { selectsContainer.innerHTML = ""; for (let i = 0; i < count; i++) { const label = i < count / 2 ? `R${i + 1}` : `B${i + 1 - Math.floor(count / 2)}`; selectsContainer.appendChild(buildSelect(label, i)); } } function getHexFromSelects() { const selects = Array.from(selectsContainer.querySelectorAll("select.hex-digit")); const values = selects.map(s => s.value); if (mode === "3") { return "#" + values.join(""); } return "#" + values.join(""); } function computeFullHex(hex) { const raw = hex.replace(/^#/, ""); if (raw.length === 3) { return "#" + raw.split("").map(c => c + c).join(""); } else if (raw.length === 6) { return "#" + raw; } else { return "#000000"; } } function updatePreview() { const partialHex = getHexFromSelects(); const fullHex = computeFullHex(partialHex); const rgb = hexToRgb(fullHex); const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b); hexOutput.textContent = fullHex.toUpperCase(); rgbOutput.textContent = rgbString(rgb); hslOutput.textContent = hslString(hsl); swatch.style.background = fullHex; swatch.setAttribute("aria-label", `Preview color ${fullHex}`); } function applyBackground() { const color = hexOutput.textContent || "#000000"; document.body.style.background = color; } function copyHexToClipboard() { const text = hexOutput.textContent || ""; if (!text) return; navigator.clipboard.writeText(text).then(() => { copyHexBtn.textContent = "Copied"; setTimeout(() => { copyHexBtn.textContent = "Copy Hex"; }, 1200); }).catch(() => { // Silent fail if not allowed }); } function resetAll() { const selects = selectsContainer.querySelectorAll("select.hex-digit"); selects.forEach(s => s.value = "0"); document.body.style.background = ""; updatePreview(); } function onModeChange(e) { mode = e.target.value; if (mode === "3") { buildSelects(3); } else { buildSelects(6); } updatePreview(); } modeRadios.forEach(r => r.addEventListener("change", onModeChange)); applyBgBtn.addEventListener("click", applyBackground); copyHexBtn.addEventListener("click", copyHexToClipboard); resetBtn.addEventListener("click", resetAll); // Initialize with default mode buildSelects(6); updatePreview();