Hex 6-Digit Color Calculator

Hex (6-digit)

Hex: #000000

RGB: rgb(0, 0, 0)

Preset Swatches

Select any swatch to apply its hex value.

:root { --bg: #f7f8fa; --panel: #ffffff; --muted: #6b7280; --accent: #111827; --radius: 10px; --shadow: 0 6px 18px rgba(15, 23, 42, 0.08); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg, #f1f5f9 0%, var(--bg) 100%); color: var(--accent); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .header { padding: 28px 24px; text-align: center; } .header h1 { margin: 0 0 6px 0; font-size: 20px; letter-spacing: -0.2px; } .header p { margin: 0; color: var(--muted); font-size: 13px; } .container { max-width: 980px; margin: 24px auto; padding: 0 20px 40px; display: grid; gap: 20px; grid-template-columns: 1fr 360px; align-items: start; } @media (max-width: 880px) { .container { grid-template-columns: 1fr; } } .panel { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; } .controls { display: flex; flex-direction: column; gap: 12px; } label { font-size: 13px; color: var(--muted); } .hex-row { display: flex; gap: 8px; align-items: center; } .hex-row .hash { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 40px; border-radius: 8px; background: #eef2ff; color: #3730a3; font-weight: 600; border: 1px solid rgba(15,23,42,0.04); } #hexInput { flex: 1; height: 40px; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(15,23,42,0.06); font-family: monospace; font-size: 15px; text-transform: uppercase; letter-spacing: 1.2px; } .btn { height: 40px; padding: 0 12px; border-radius: 8px; border: none; background: #111827; color: #fff; cursor: pointer; font-size: 14px; } .btn:active { transform: translateY(1px); } .error { color: #b91c1c; font-size: 13px; margin: 0; height: 18px; } .rgb-group { display: grid; gap: 10px; margin-top: 4px; } .slider-row { display: grid; grid-template-columns: 36px 1fr 72px; gap: 10px; align-items: center; } .slider-row label { font-size: 13px; color: var(--muted); } input[type="range"] { width: 100%; appearance: none; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #d1d5db 0%, #e5e7eb 100%); outline: none; } input[type="range"]::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #111827; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.15); cursor: pointer; } input[type="number"] { width: 72px; height: 36px; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(15,23,42,0.06); font-size: 14px; } .preview { margin-top: 8px; display: flex; gap: 12px; align-items: center; } .color-preview { width: 140px; height: 100px; border-radius: 12px; border: 1px solid rgba(15,23,42,0.06); background: #000; box-shadow: inset 0 -8px 24px rgba(0,0,0,0.15); } .color-info { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); } .palette-panel h2 { margin: 0 0 8px 0; font-size: 16px; } .palette-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; } .swatch { height: 58px; border-radius: 8px; border: 1px solid rgba(15,23,42,0.06); cursor: pointer; display: flex; align-items: end; padding: 8px; color: #fff; font-weight: 600; font-size: 12px; text-shadow: 0 1px 0 rgba(0,0,0,0.2); user-select: none; } .swatch .label { background: rgba(0,0,0,0.22); padding: 4px 6px; border-radius: 6px; margin-left: auto; } .footer { text-align: center; color: var(--muted); font-size: 13px; padding: 18px 20px; } export function clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } export function isValidHex6(value) { if (typeof value !== "string") return false; const cleaned = value.replace(/^#/, ""); return /^[0-9A-Fa-f]{6}$/.test(cleaned); } export function hexToRgb(hex) { const cleaned = hex.replace(/^#/, ""); const r = parseInt(cleaned.slice(0, 2), 16); const g = parseInt(cleaned.slice(2, 4), 16); const b = parseInt(cleaned.slice(4, 6), 16); return { r, g, b }; } export function componentToHex(c) { const v = clamp(Math.round(Number(c) || 0), 0, 255); return v.toString(16).padStart(2, "0").toUpperCase(); } export function rgbToHex(r, g, b) { return componentToHex(r) + componentToHex(g) + componentToHex(b); } import { isValidHex6, hexToRgb, rgbToHex } from "./color-utils.js"; const hexInput = document.getElementById("hexInput"); const applyHexBtn = document.getElementById("applyHex"); const copyHexBtn = document.getElementById("copyHex"); const hexError = document.getElementById("hexError"); const colorPreview = document.getElementById("colorPreview"); const hexOut = document.getElementById("hexOut"); const rgbOut = document.getElementById("rgbOut"); const rRange = document.getElementById("rRange"); const gRange = document.getElementById("gRange"); const bRange = document.getElementById("bRange"); const rNumber = document.getElementById("rNumber"); const gNumber = document.getElementById("gNumber"); const bNumber = document.getElementById("bNumber"); const paletteEl = document.getElementById("palette"); const PRESETS = [ { name: "Black", hex: "000000" }, { name: "White", hex: "FFFFFF" }, { name: "Crimson", hex: "DC143C" }, { name: "RoyalBlue", hex: "4169E1" }, { name: "LimeGreen", hex: "32CD32" }, { name: "Gold", hex: "FFD700" }, { name: "Coral", hex: "FF7F50" }, { name: "DarkSlate", hex: "2F4F4F" }, { name: "Teal", hex: "008080" }, { name: "MediumViolet", hex: "C71585" }, { name: "SlateBlue", hex: "6A5ACD" }, { name: "Olive", hex: "808000" }, { name: "Chocolate", hex: "D2691E" }, { name: "Tomato", hex: "FF6347" }, { name: "DeepSky", hex: "00BFFF" }, { name: "Turquoise", hex: "40E0D0" } ]; function setUIFromHex(hex) { const cleaned = hex.replace(/^#/, "").toUpperCase(); if (!isValidHex6(cleaned)) { showError("Invalid hex. Enter exactly 6 hex digits."); return; } clearError(); const { r, g, b } = hexToRgb(cleaned); rRange.value = r; gRange.value = g; bRange.value = b; rNumber.value = r; gNumber.value = g; bNumber.value = b; updatePreview(cleaned); hexInput.value = cleaned; } function setUIFromRgb(r, g, b) { const hex = rgbToHex(r, g, b); rRange.value = r; gRange.value = g; bRange.value = b; rNumber.value = r; gNumber.value = g; bNumber.value = b; updatePreview(hex); hexInput.value = hex; } function updatePreview(hex) { const cleaned = hex.replace(/^#/, "").toUpperCase(); colorPreview.style.background = "#" + cleaned; hexOut.textContent = "#" + cleaned; const { r, g, b } = hexToRgb(cleaned); rgbOut.textContent = `rgb(${r}, ${g}, ${b})`; } function showError(text) { hexError.textContent = text; } function clearError() { hexError.textContent = ""; } applyHexBtn.addEventListener("click", () => { const val = hexInput.value.trim(); setUIFromHex(val); }); hexInput.addEventListener("keydown", (e) => { if (e.key === "Enter") { e.preventDefault(); applyHexBtn.click(); } }); copyHexBtn.addEventListener("click", async () => { const val = hexInput.value.trim().replace(/^#/, "").toUpperCase(); if (!isValidHex6(val)) { showError("Cannot copy. Hex is invalid."); return; } try { await navigator.clipboard.writeText("#" + val); copyHexBtn.textContent = "Copied"; setTimeout(() => (copyHexBtn.textContent = "Copy"), 1200); } catch { showError("Copy failed. Clipboard not available."); } }); function onRangeChange() { const r = Number(rRange.value); const g = Number(gRange.value); const b = Number(bRange.value); rNumber.value = r; gNumber.value = g; bNumber.value = b; setUIFromRgb(r, g, b); } function onNumberChange() { const r = Number(rNumber.value); const g = Number(gNumber.value); const b = Number(bNumber.value); // clamp values to valid range const cr = Math.max(0, Math.min(255, r || 0)); const cg = Math.max(0, Math.min(255, g || 0)); const cb = Math.max(0, Math.min(255, b || 0)); setUIFromRgb(cr, cg, cb); } rRange.addEventListener("input", onRangeChange); gRange.addEventListener("input", onRangeChange); bRange.addEventListener("input", onRangeChange); rNumber.addEventListener("change", onNumberChange); gNumber.addEventListener("change", onNumberChange); bNumber.addEventListener("change", onNumberChange); // Populate palette PRESETS.forEach((p) => { const btn = document.createElement("button"); btn.className = "swatch"; btn.type = "button"; btn.title = p.name + " #" + p.hex; btn.style.background = "#" + p.hex; btn.innerHTML = `${p.name}`; btn.addEventListener("click", () => { setUIFromHex(p.hex); }); paletteEl.appendChild(btn); }); // Initialize default color setUIFromHex("000000");