Hex Color Codes Password Generator

Length (1–6) Include leading # Max allowed hex (no #)

Use the up/down arrows beside each digit to change its value. No random colors are used.

Generated password

:root { --bg: #0f1724; --card: #0b1220; --accent: #06b6d4; --muted: #94a3b8; --danger: #fb7185; --glass: rgba(255,255,255,0.03); --text: #e6eef6; } * { box-sizing: border-box; } body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg, #071226 0%, #081426 100%); color: var(--text); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .container { width: 780px; max-width: 96%; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.04); padding: 20px; border-radius: 12px; box-shadow: 0 8px 30px rgba(2,6,23,0.6); } h1 { margin: 0 0 12px 0; font-size: 20px; color: var(--accent); } .controls { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; } .control-row { display: flex; gap: 8px; align-items: center; background: var(--glass); padding: 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.02); } .control-row span { font-size: 13px; color: var(--muted); } .control-row input[type="number"], .control-row input[type="text"] { width: 84px; padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.04); background: transparent; color: var(--text); } .control-row input[type="checkbox"] { width: 18px; height: 18px; } .note { color: var(--muted); font-size: 12px; } .digits-container { display: flex; gap: 10px; padding: 12px 0; flex-wrap: wrap; } .digit { width: 72px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.03); border-radius: 8px; padding: 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; } .digit .display { font-family: "Courier New", monospace; font-size: 20px; letter-spacing: 2px; color: var(--text); padding: 6px 8px; min-width: 40px; border-radius: 6px; background: rgba(0,0,0,0.15); } .digit .buttons { display: flex; gap: 6px; } .digit button { background: transparent; border: 1px solid rgba(255,255,255,0.03); color: var(--text); padding: 6px 8px; border-radius: 6px; cursor: pointer; min-width: 28px; } .digit button:disabled { opacity: 0.35; cursor: not-allowed; } .output { margin-top: 12px; display: grid; gap: 8px; } .password-row { display: flex; gap: 8px; align-items: center; } #passwordOutput { flex: 1; padding: 10px 12px; font-family: "Courier New", monospace; border-radius: 8px; border: 1px solid rgba(255,255,255,0.03); background: rgba(255,255,255,0.02); color: var(--text); } #copyBtn { padding: 10px 12px; border-radius: 8px; border: none; background: var(--accent); color: #021018; cursor: pointer; font-weight: 600; } .warning { color: var(--danger); font-size: 13px; min-height: 18px; } .footer { margin-top: 14px; color: var(--muted); font-size: 12px; } @media (max-width: 520px) { .digit { width: 56px; } } export function createDigitControls(container, length, digits, callbacks) { // callbacks: { onChange, canChange } container.innerHTML = ""; for (let i = 0; i < length; i++) { const digit = digits[i] || "0"; const wrapper = document.createElement("div"); wrapper.className = "digit"; wrapper.dataset.index = i; const display = document.createElement("div"); display.className = "display"; display.textContent = digit; const btns = document.createElement("div"); btns.className = "buttons"; const up = document.createElement("button"); up.type = "button"; up.className = "btn-up"; up.title = "Increment"; up.textContent = "▲"; const down = document.createElement("button"); down.type = "button"; down.className = "btn-down"; down.title = "Decrement"; down.textContent = "▼"; up.addEventListener("click", () => { const newChar = nextHexChar(display.textContent, +1); const ok = callbacks && callbacks.canChange ? callbacks.canChange(i, newChar) : true; if (ok) { display.textContent = newChar; callbacks && callbacks.onChange && callbacks.onChange(i, newChar); } else { flashWarning(container, "Value would exceed maximum allowed hex."); } }); down.addEventListener("click", () => { const newChar = nextHexChar(display.textContent, -1); const ok = callbacks && callbacks.canChange ? callbacks.canChange(i, newChar) : true; if (ok) { display.textContent = newChar; callbacks && callbacks.onChange && callbacks.onChange(i, newChar); } else { flashWarning(container, "Value would exceed maximum allowed hex."); } }); btns.appendChild(up); btns.appendChild(down); wrapper.appendChild(display); wrapper.appendChild(btns); container.appendChild(wrapper); } } function nextHexChar(char, step) { const hex = "0123456789abcdef"; const idx = hex.indexOf(char.toLowerCase()); if (idx === -1) return "0"; let n = idx + step; if (n < 0) n = 0; if (n > hex.length - 1) n = hex.length - 1; return hex[n]; } function flashWarning(container, text) { const win = document.querySelector("#warning"); if (!win) return; win.textContent = text; setTimeout(() => { if (win.textContent === text) win.textContent = ""; }, 1600); } import { createDigitControls } from "./digitSelector.js"; const lengthInput = document.getElementById("length"); const includeHash = document.getElementById("includeHash"); const maxHexInput = document.getElementById("maxHex"); const digitsContainer = document.getElementById("digitsContainer"); const passwordOutput = document.getElementById("passwordOutput"); const copyBtn = document.getElementById("copyBtn"); const warningEl = document.getElementById("warning"); // internal state let length = clampNumber(parseInt(lengthInput.value, 10) || 6, 1, 6); let digits = Array.from({ length }, () => "0"); let maxHex = normalizeHex(maxHexInput.value || "fffff"); let maxValue = hexToNumber(maxHex); // initialize renderDigits(); updateOutput(); // events lengthInput.addEventListener("input", () => { length = clampNumber(parseInt(lengthInput.value, 10) || 1, 1, 6); digits = adjustDigitsArray(digits, length); renderDigits(); updateOutput(); }); includeHash.addEventListener("change", updateOutput); maxHexInput.addEventListener("input", () => { const raw = maxHexInput.value.trim(); if (!/^[0-9a-fA-F]{1,6}$/.test(raw)) { // invalid, do not apply warning("Max hex must be 1–6 hex characters (0-9, a-f)."); return; } clearWarning(); maxHex = normalizeHex(raw); maxValue = hexToNumber(maxHex); // enforce current digits against new max clampCurrentToMax(); renderDigits(); updateOutput(); }); copyBtn.addEventListener("click", () => { const val = passwordOutput.value; if (!val) return; navigator.clipboard?.writeText(val).then(() => { copyBtn.textContent = "Copied"; setTimeout(() => (copyBtn.textContent = "Copy"), 1200); }).catch(() => { copyBtn.textContent = "Copy"; }); }); function renderDigits() { createDigitControls(digitsContainer, length, digits, { onChange: (index, newChar) => { digits[index] = newChar.toLowerCase(); updateOutput(); }, canChange: (index, newChar) => { // build prospective hex string const prospective = digits.slice(0, length); prospective[index] = newChar.toLowerCase(); const hexStr = prospective.join(""); return hexToNumber(hexStr) <= maxValue; } }); updateButtonsState(); } function updateButtonsState() { // Disable Up buttons when increment would exceed max const digitElems = digitsContainer.querySelectorAll(".digit"); digitElems.forEach((el, idx) => { const up = el.querySelector(".btn-up"); const down = el.querySelector(".btn-down"); // compute if up or down possible const cur = el.querySelector(".display").textContent.toLowerCase(); const hex = "0123456789abcdef"; const curIdx = hex.indexOf(cur); let canUp = curIdx < hex.length - 1; let canDown = curIdx > 0; if (canUp) { const prospective = digits.slice(0, length); prospective[idx] = hex[curIdx + 1]; if (hexToNumber(prospective.join("")) > maxValue) canUp = false; } up.disabled = !canUp; down.disabled = !canDown; }); } function updateOutput() { const hex = digits.slice(0, length).join(""); const out = (includeHash.checked ? "#" : "") + hex; passwordOutput.value = out; // visual feedback if over max (shouldn't happen) if (hexToNumber(hex) > maxValue) { warning("Selected value exceeds maximum allowed. Adjust digits."); } else { clearWarning(); } updateButtonsState(); } function clampCurrentToMax() { // If current numeric > max, reduce lexicographically starting from rightmost digit let curNum = hexToNumber(digits.slice(0, length).join("")); if (curNum <= maxValue) return; // reduce digits until <= max for (let i = length - 1; i >= 0; i--) { const hexList = "0123456789abcdef"; let idx = hexList.indexOf(digits[i] || "0"); while (idx > 0 && hexToNumber(digits.slice(0, length).join("")) > maxValue) { idx--; digits[i] = hexList[idx]; } } // final check if (hexToNumber(digits.slice(0, length).join("")) > maxValue) { // as a fallback, set to max trimmed/padded to length let maxHexTrimmed = maxHex; if (maxHexTrimmed.length > length) { // take rightmost 'length' chars maxHexTrimmed = maxHexTrimmed.slice(maxHexTrimmed.length - length); } else if (maxHexTrimmed.length < length) { // left pad with zeros maxHexTrimmed = maxHexTrimmed.padStart(length, "0"); } digits = maxHexTrimmed.split(""); } } // helpers function clampNumber(v, a, b) { if (Number.isNaN(v)) return a; return Math.max(a, Math.min(b, v)); } function adjustDigitsArray(arr, newLen) { const next = arr.slice(0, newLen); while (next.length < newLen) next.push("0"); return next; } function normalizeHex(s) { return s.replace(/^#/, "").toLowerCase(); } function hexToNumber(s) { if (!s) return 0; return parseInt(s, 16) || 0; } function warning(text) { warningEl.textContent = text; setTimeout(() => { if (warningEl.textContent === text) warningEl.textContent = ""; }, 2200); } function clearWarning() { warningEl.textContent = ""; } // expose a small watcher to update UI when digits array changes externally // observe digitsContainer and rebuild button states const observer = new MutationObserver(() => updateButtonsState()); observer.observe(digitsContainer, { childList: true, subtree: true }); // initial clamp against default max clampCurrentToMax(); renderDigits(); updateOutput();