Hex Color Picker

Hex Color Picker

Color Hex

#3498db

Contrast: 4.06

Palette

:root { --bg: #f7f9fb; --card: #ffffff; --text: #0f1724; --muted: #6b7280; --accent: #3498db; --radius: 10px; --gap: 16px; --transition: 180ms ease; font-size: 16px; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg, var(--bg), #eef2f6); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .container { max-width: 920px; margin: 40px auto; padding: 24px; background: var(--card); border-radius: 14px; box-shadow: 0 6px 24px rgba(9, 30, 66, 0.08); } h1 { margin: 0 0 18px 0; font-size: 1.5rem; } .picker { display: grid; grid-template-columns: 1fr 220px; gap: var(--gap); align-items: center; margin-bottom: 22px; } .controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .field { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; } input[type="color"] { width: 52px; height: 40px; padding: 0; border: none; background: transparent; cursor: pointer; } input[type="text"] { width: 110px; padding: 8px 10px; border-radius: 8px; border: 1px solid #e6e9ee; outline: none; transition: box-shadow var(--transition), border-color var(--transition); } input[type="text"]:focus { box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.08); border-color: var(--accent); } .btn { padding: 8px 12px; background: linear-gradient(180deg, #fff, #f3f6f8); border: 1px solid #e6e9ee; border-radius: 8px; cursor: pointer; font-size: 0.9rem; transition: transform var(--transition), box-shadow var(--transition); } .btn:active { transform: translateY(1px); } .preview { display: flex; gap: 12px; align-items: center; justify-content: flex-end; } .swatch { width: 96px; height: 72px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.06); box-shadow: inset 0 -8px 20px rgba(0,0,0,0.04); transition: background-color var(--transition), color var(--transition); flex-shrink: 0; } .info { text-align: right; } .hex { font-weight: 600; font-size: 1.1rem; } .contrast { color: var(--muted); font-size: 0.85rem; } .palette { margin-top: 8px; } .palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; margin: 12px 0; } .palette-item { height: 64px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; cursor: pointer; user-select: none; transition: transform var(--transition), box-shadow var(--transition); position: relative; } .palette-item:active { transform: translateY(2px); } .palette-actions { display: flex; gap: 8px; justify-content: flex-end; } .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } @media (max-width: 720px) { .picker { grid-template-columns: 1fr; } .preview { justify-content: space-between; } } const colorInput = document.getElementById('colorInput'); const hexInput = document.getElementById('hexInput'); const swatch = document.getElementById('swatch'); const hexDisplay = document.getElementById('hexDisplay'); const contrastInfo = document.getElementById('contrastInfo'); const copyBtn = document.getElementById('copyBtn'); const randomBtn = document.getElementById('randomBtn'); const saveBtn = document.getElementById('saveBtn'); const paletteGrid = document.getElementById('paletteGrid'); const clearPalette = document.getElementById('clearPalette'); const STORAGE_KEY = 'hex-color-picker-palette'; function normalizeHex(value) { if (!value) return ''; let v = value.trim(); if (v[0] !== '#') v = '#' + v; if (v.length === 4) { // Expand shorthand #abc -> #aabbcc v = '#' + v[1] + v[1] + v[2] + v[2] + v[3] + v[3]; } return v.toLowerCase(); } function isValidHex(hex) { return /^#([0-9a-f]{6})$/i.test(hex); } function hexToRgb(hex) { const m = hex.match(/^#?([0-9a-f]{6})$/i); if (!m) return null; const int = parseInt(m[1], 16); return { r: (int >> 16) & 255, g: (int >> 8) & 255, b: int & 255 }; } function relativeLuminance({ r, g, b }) { const srgb = [r, g, b].map(v => v / 255).map(v => (v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4))); return 0.2126 * srgb[0] + 0.7152 * srgb[1] + 0.0722 * srgb[2]; } function contrastRatio(hexA, hexB) { const rgbA = hexToRgb(hexA); const rgbB = hexToRgb(hexB); if (!rgbA || !rgbB) return 1; const lumA = relativeLuminance(rgbA); const lumB = relativeLuminance(rgbB); const light = Math.max(lumA, lumB); const dark = Math.min(lumA, lumB); return +( (light + 0.05) / (dark + 0.05) ).toFixed(2); } function ensureHexFormat(value) { const n = normalizeHex(value); if (isValidHex(n)) return n; return null; } function updateUI(hex) { if (!isValidHex(hex)) return; colorInput.value = hex; hexInput.value = hex; hexDisplay.textContent = hex.toUpperCase(); swatch.style.backgroundColor = hex; // choose readable text color on swatch const whiteContrast = contrastRatio(hex, '#ffffff'); const blackContrast = contrastRatio(hex, '#000000'); const chosen = whiteContrast >= blackContrast ? '#ffffff' : '#000000'; swatch.style.color = chosen; swatch.textContent = ''; contrastInfo.textContent = 'Contrast vs white: ' + whiteContrast.toFixed(2) + ' · vs black: ' + blackContrast.toFixed(2); } function applyHexInput() { const candidate = normalizeHex(hexInput.value); if (isValidHex(candidate)) { updateUI(candidate); } else { // keep visible but do not apply invalid hexInput.value = hexInput.value.trim(); } } colorInput.addEventListener('input', () => { const hex = normalizeHex(colorInput.value); updateUI(hex); }); hexInput.addEventListener('input', () => { // allow typing without # let v = hexInput.value.trim(); if (v[0] !== '#') v = '#' + v; hexInput.value = v; }); hexInput.addEventListener('blur', applyHexInput); hexInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') { applyHexInput(); hexInput.blur(); } }); copyBtn.addEventListener('click', async () => { const hex = ensureHexFormat(hexInput.value); if (!hex) { copyBtn.textContent = 'Invalid'; setTimeout(() => copyBtn.textContent = 'Copy Hex', 1200); return; } try { await navigator.clipboard.writeText(hex.toUpperCase()); copyBtn.textContent = 'Copied!'; setTimeout(() => copyBtn.textContent = 'Copy Hex', 1200); } catch { copyBtn.textContent = 'Failed'; setTimeout(() => copyBtn.textContent = 'Copy Hex', 1200); } }); function randomHex() { const r = Math.floor(Math.random() * 0xffffff); return '#' + r.toString(16).padStart(6, '0'); } randomBtn.addEventListener('click', () => { const hex = randomHex(); updateUI(hex); }); function loadPalette() { try { const raw = localStorage.getItem(STORAGE_KEY); return raw ? JSON.parse(raw) : []; } catch { return []; } } function savePalette(arr) { localStorage.setItem(STORAGE_KEY, JSON.stringify(arr)); } function renderPalette() { const list = loadPalette(); paletteGrid.innerHTML = ''; if (list.length === 0) { const hint = document.createElement('div'); hint.textContent = 'No saved colors yet. Save a color to build a palette.'; hint.style.color = '#6b7280'; hint.style.padding = '8px'; paletteGrid.appendChild(hint); return; } list.forEach(hex => { const item = document.createElement('button'); item.className = 'palette-item'; item.style.backgroundColor = hex; item.title = hex.toUpperCase(); item.type = 'button'; const whiteContrast = contrastRatio(hex, '#ffffff'); const blackContrast = contrastRatio(hex, '#000000'); item.style.color = whiteContrast >= blackContrast ? '#fff' : '#000'; item.textContent = hex.toUpperCase(); item.addEventListener('click', () => updateUI(hex)); item.addEventListener('contextmenu', (e) => { e.preventDefault(); // remove color on right click const newList = loadPalette().filter(h => h.toLowerCase() !== hex.toLowerCase()); savePalette(newList); renderPalette(); }); paletteGrid.appendChild(item); }); } saveBtn.addEventListener('click', () => { const hex = ensureHexFormat(hexInput.value); if (!hex) { saveBtn.textContent = 'Invalid'; setTimeout(() => saveBtn.textContent = 'Save to Palette', 1200); return; } const list = loadPalette(); if (!list.map(h => h.toLowerCase()).includes(hex.toLowerCase())) { list.unshift(hex); if (list.length > 24) list.pop(); savePalette(list); renderPalette(); saveBtn.textContent = 'Saved'; setTimeout(() => saveBtn.textContent = 'Save to Palette', 900); } else { saveBtn.textContent = 'Exists'; setTimeout(() => saveBtn.textContent = 'Save to Palette', 900); } }); clearPalette.addEventListener('click', () => { localStorage.removeItem(STORAGE_KEY); renderPalette(); }); // Initialize (function init() { const initial = normalizeHex('#3498db'); updateUI(initial); renderPalette(); })();