:root { --bg: #0f1724; --card: #0b1220; --muted: #9aa4b2; --accent: #7c5cff; --glass: rgba(255,255,255,0.04); --radius: 12px; --mono: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: var(--mono); background: linear-gradient(180deg, #071025 0%, var(--bg) 100%); color: #e6eef6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .wrap { max-width: 980px; margin: 48px auto; padding: 20px; } header { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; } header h1 { font-size: 20px; margin: 0; letter-spacing: -0.2px; } .grid { display: grid; grid-template-columns: 1fr 360px; gap: 18px; } .card { background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); border-radius: var(--radius); padding: 18px; box-shadow: 0 6px 18px rgba(2,6,23,0.6); border: 1px solid rgba(255,255,255,0.03); } .controls { display: grid; gap: 12px; } .row { display: flex; gap: 10px; align-items: center; } .input-hex { display: flex; gap: 10px; align-items: center; } label { font-size: 13px; color: var(--muted); width: 92px; flex-shrink: 0; } input[type="text"], .value { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.03); padding: 10px 12px; border-radius: 10px; color: #eaf2ff; font-weight: 600; outline: none; width: 160px; } input[type="text"]:focus { box-shadow: 0 0 0 4px rgba(124,92,255,0.08); border-color: rgba(124,92,255,0.35); } .btn { background: linear-gradient(90deg, var(--accent), #5fb0ff); border: none; color: white; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-weight: 700; letter-spacing: 0.2px; } .btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,0.06); color: var(--muted); font-weight: 600; } .sliders { display: grid; gap: 10px; } .slider-row { display: flex; gap: 8px; align-items: center; } .slider-row input[type="range"] { -webkit-appearance: none; appearance: none; height: 6px; width: 100%; background: rgba(255,255,255,0.06); border-radius: 10px; outline: none; } .slider-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: white; box-shadow: 0 2px 6px rgba(0,0,0,0.6); border: 2px solid rgba(0,0,0,0.2); } .preview { height: 220px; border-radius: 12px; display: flex; flex-direction: column; gap: 12px; padding: 14px; justify-content: space-between; align-items: flex-start; color: #fff; } .swatches { display: flex; gap: 10px; margin-top: 6px; } .swatch { flex: 1; height: 46px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; font-weight: 700; cursor: pointer; } .meta { display: grid; gap: 6px; } .meta .meta-row { display: flex; gap: 10px; align-items: baseline; } .muted { color: var(--muted); font-size: 13px; } .recent { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .chip { background: var(--glass); padding: 6px 10px; border-radius: 999px; font-weight: 700; font-size: 13px; cursor: pointer; border: 1px solid rgba(255,255,255,0.03); } footer { margin-top: 18px; color: var(--muted); font-size: 13px; display: flex; justify-content: space-between; align-items: center; } @media (max-width: 880px) { .grid { grid-template-columns: 1fr; } .preview { height: 180px; } } const qs = sel => document.querySelector(sel); const qsa = sel => Array.from(document.querySelectorAll(sel)); // Elements const hexInput = qs('#hex'); const hexCopyBtn = qs('#copy-hex'); const randomBtn = qs('#random'); const preview = qs('#preview'); const swatchMain = qs('#swatch-main'); const swatchComp = qs('#swatch-comp'); const swatchText = qs('#swatch-text'); const rRange = qs('#r'); const gRange = qs('#g'); const bRange = qs('#b'); const rVal = qs('#r-val'); const gVal = qs('#g-val'); const bVal = qs('#b-val'); const rgbDisplay = qs('#rgb'); const hslDisplay = qs('#hsl'); const luminanceDisplay = qs('#lum'); const contrastDisplay = qs('#contrast'); const copyRgbBtn = qs('#copy-rgb'); const copyHslBtn = qs('#copy-hsl'); const recentWrap = qs('#recent'); // Utilities function clamp(v, a=0, b=255) { return Math.max(a, Math.min(b, Math.round(v))); } function normalizeHex(h) { if (!h) return null; h = h.trim().replace(/^#/, ''); if (h.length === 3) { h = h.split('').map(c => c + c).join(''); } if (/^[0-9a-fA-F]{6}$/.test(h)) return h.toLowerCase(); return null; } function hexToRgb(hex) { const h = normalizeHex(hex); if (!h) return null; const r = parseInt(h.slice(0,2),16); const g = parseInt(h.slice(2,4),16); const b = parseInt(h.slice(4,6),16); return { r, g, b }; } function rgbToHex(r,g,b) { return [ r.toString(16).padStart(2,'0'), g.toString(16).padStart(2,'0'), b.toString(16).padStart(2,'0') ].join('').toLowerCase(); } function rgbToHsl(r, g, b) { r/=255; g/=255; b/=255; const max=Math.max(r,g,b), min=Math.min(r,g,b); let h=0, s=0, l=(max+min)/2; if (max !== min) { 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; case b: h = (r-g)/d + 4; break; } h /= 6; } return { h: Math.round(h*360), s: Math.round(s*100), l: Math.round(l*100) }; } function relativeLuminance(r,g,b) { const toLinear = v => { v = v / 255; return v <= 0.03928 ? v/12.92 : Math.pow((v+0.055)/1.055, 2.4); }; const R = toLinear(r); const G = toLinear(g); const B = toLinear(b); return 0.2126 * R + 0.7152 * G + 0.0722 * B; } function contrastRatio(rgb1, rgb2) { const L1 = relativeLuminance(rgb1.r, rgb1.g, rgb1.b); const L2 = relativeLuminance(rgb2.r, rgb2.g, rgb2.b); const lighter = Math.max(L1, L2); const darker = Math.min(L1, L2); return +( (lighter + 0.05) / (darker + 0.05) ).toFixed(2); } function suggestedTextColor(r,g,b) { // WCAG approachable: if luminance is high, pick black, otherwise white const lum = relativeLuminance(r,g,b); return lum > 0.179 ? '#000000' : '#ffffff'; } function complementColor(r,g,b) { return { r: 255-r, g: 255-g, b: 255-b }; } // Recent colors using localStorage const RECENT_KEY = 'hex-color-calculator-recent'; function loadRecent() { try { const raw = localStorage.getItem(RECENT_KEY); return raw ? JSON.parse(raw) : []; } catch { return []; } } function saveRecent(list) { try { localStorage.setItem(RECENT_KEY, JSON.stringify(list.slice(0,12))); } catch {} } function pushRecent(hex) { const list = loadRecent().filter(h => h !== hex); list.unshift(hex); saveRecent(list); renderRecent(); } function renderRecent() { const list = loadRecent(); recentWrap.innerHTML = ''; list.slice(0,12).forEach(h => { const btn = document.createElement('button'); btn.className = 'chip'; btn.textContent = '#' + h; btn.style.background = 'linear-gradient(180deg, rgba(255,255,255,0.02), transparent)'; btn.onclick = () => applyHex(h); recentWrap.appendChild(btn); }); } // Updates function updateUIFromRgb(r,g,b, addToRecent = false) { r = clamp(r); g = clamp(g); b = clamp(b); const hex = rgbToHex(r,g,b); const hsl = rgbToHsl(r,g,b); const lum = relativeLuminance(r,g,b); const textColor = suggestedTextColor(r,g,b); const comp = complementColor(r,g,b); const contrastWithWhite = contrastRatio({r,g,b}, {r:255,g:255,b:255}); const contrastWithBlack = contrastRatio({r,g,b}, {r:0,g:0,b:0}); // Inputs hexInput.value = '#' + hex; rRange.value = r; gRange.value = g; bRange.value = b; rVal.textContent = r; gVal.textContent = g; bVal.textContent = b; // Displays swatchMain.style.background = '#' + hex; swatchComp.style.background = '#' + rgbToHex(comp.r, comp.g, comp.b); swatchText.style.background = textColor; preview.style.background = `linear-gradient(180deg, rgba(0,0,0,0.06), rgba(255,255,255,0.02)), #${hex}`; rgbDisplay.textContent = `rgb(${r}, ${g}, ${b})`; hslDisplay.textContent = `hsl(${hsl.h}°, ${hsl.s}%, ${hsl.l}%)`; luminanceDisplay.textContent = lum.toFixed(4); contrastDisplay.textContent = `white ${contrastWithWhite}:1 • black ${contrastWithBlack}:1`; // Buttons text color for readability const btnText = suggestedTextColor(r,g,b) === '#000000' ? '#000' : '#fff'; hexCopyBtn.style.color = btnText; copyRgbBtn.style.color = btnText; copyHslBtn.style.color = btnText; if (addToRecent) pushRecent(hex); } function applyHex(raw) { const h = normalizeHex(raw); if (!h) return; const rgb = hexToRgb(h); if (!rgb) return; updateUIFromRgb(rgb.r, rgb.g, rgb.b, true); } // Event handlers hexInput.addEventListener('input', e => { const val = e.target.value; const rgb = hexToRgb(val); if (rgb) { updateUIFromRgb(rgb.r, rgb.g, rgb.b); } }); hexInput.addEventListener('blur', e => { const val = e.target.value; const h = normalizeHex(val); if (h) { applyHex(h); } else { // reset to current slider color const r = Number(rRange.value), g = Number(gRange.value), b = Number(bRange.value); updateUIFromRgb(r,g,b); } }); rRange.addEventListener('input', () => { updateUIFromRgb(Number(rRange.value), Number(gRange.value), Number(bRange.value)); }); gRange.addEventListener('input', () => { updateUIFromRgb(Number(rRange.value), Number(gRange.value), Number(bRange.value)); }); bRange.addEventListener('input', () => { updateUIFromRgb(Number(rRange.value), Number(gRange.value), Number(bRange.value)); }); randomBtn.addEventListener('click', () => { const r = Math.floor(Math.random()*256); const g = Math.floor(Math.random()*256); const b = Math.floor(Math.random()*256); updateUIFromRgb(r,g,b, true); }); hexCopyBtn.addEventListener('click', async () => { try { await navigator.clipboard.writeText(hexInput.value); hexCopyBtn.textContent = 'Copied'; setTimeout(()=> hexCopyBtn.textContent = 'Copy', 1200); } catch { hexCopyBtn.textContent = 'Fail'; setTimeout(()=> hexCopyBtn.textContent = 'Copy', 1200); } }); copyRgbBtn.addEventListener('click', async () => { try { await navigator.clipboard.writeText(rgbDisplay.textContent); copyRgbBtn.textContent = 'Copied'; setTimeout(()=> copyRgbBtn.textContent = 'Copy', 1200); } catch { copyRgbBtn.textContent = 'Fail'; setTimeout(()=> copyRgbBtn.textContent = 'Copy', 1200); } }); copyHslBtn.addEventListener('click', async () => { try { await navigator.clipboard.writeText(hslDisplay.textContent); copyHslBtn.textContent = 'Copied'; setTimeout(()=> copyHslBtn.textContent = 'Copy', 1200); } catch { copyHslBtn.textContent = 'Fail'; setTimeout(()=> copyHslBtn.textContent = 'Copy', 1200); } }); swatchMain.addEventListener('click', () => { navigator.clipboard.writeText(hexInput.value).then(() => { swatchMain.textContent = 'Copied'; setTimeout(()=> swatchMain.textContent = '', 900); }); }); swatchComp.addEventListener('click', () => { const compHex = swatchComp.style.background.replace('#','').replace('rgb','').trim(); navigator.clipboard.writeText(getComputedStyle(swatchComp).backgroundColor).then(()=> { swatchComp.textContent = 'Copied'; setTimeout(()=> swatchComp.textContent = '', 900); }); }); // Init with a friendly color function init() { renderRecent(); applyHex('7c5cff'); } init(); Hex Color Code Calculator

Hex Color Code Calculator

Convert • Inspect • Generate • Copy

Hex

Red

Green

Blue

RGB

rgb(0, 0, 0)

HSL

hsl(0°, 0%, 0%)

Lum

0.0000

Contrast

white 1:1 • black 1:1

Recent

Tip

Click swatches to copy