Hex Color Square

Hex Code Color Picker

#1a2b3c

:root { --bg: #f7f7fb; --card: #ffffff; --accent: #4f46e5; --muted: #6b7280; --radius: 12px; --gap: 16px; --max-width: 900px; } * { 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, var(--bg), #ffffff); color: #111827; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .app { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px; } .header { text-align: center; margin-bottom: 20px; } .header h1 { margin: 0; font-size: 28px; } .lead { margin: 8px 0 0; color: var(--muted); font-size: 14px; } .main { width: 100%; max-width: var(--max-width); display: grid; grid-template-columns: 320px 1fr; gap: var(--gap); align-items: start; } .controls { background: var(--card); padding: 20px; border-radius: var(--radius); box-shadow: 0 6px 18px rgba(14, 20, 30, 0.06); display: flex; flex-direction: column; gap: 12px; } .controls label { font-size: 13px; color: var(--muted); margin-bottom: 4px; } .controls input[type="text"] { padding: 10px 12px; border-radius: 8px; border: 1px solid #e6e9ef; outline: none; font-size: 14px; } .controls input[type="text"]:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(79,70,229,0.06); } .controls input[type="color"] { width: 100%; height: 44px; padding: 0; border: none; background: none; cursor: pointer; } .buttons { display: flex; gap: 8px; margin-top: 6px; } .buttons button { flex: 1; padding: 10px 12px; border-radius: 8px; border: 1px solid transparent; background: var(--accent); color: white; font-weight: 600; cursor: pointer; } .buttons button#randomBtn { background: #10b981; } .buttons button#copyBtn { background: #111827; } .preview { display: flex; align-items: center; justify-content: center; } .color-square { width: min(420px, 100%); height: min(420px, 60vh); border-radius: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); transition: background 220ms ease, color 220ms ease; position: relative; overflow: hidden; border: 1px solid rgba(0,0,0,0.06); } .hex-label { font-size: 28px; font-weight: 700; padding: 12px 16px; border-radius: 10px; background: rgba(255,255,255,0.12); backdrop-filter: blur(4px); text-transform: uppercase; letter-spacing: 1px; transition: background 220ms ease; } .footer { margin-top: 18px; text-align: center; color: var(--muted); font-size: 13px; } @media (max-width: 760px) { .main { grid-template-columns: 1fr; } .controls { order: 2; } .preview { order: 1; } } (function () { const hexInput = document.getElementById('hexInput'); const colorPicker = document.getElementById('colorPicker'); const applyBtn = document.getElementById('applyBtn'); const randomBtn = document.getElementById('randomBtn'); const copyBtn = document.getElementById('copyBtn'); const colorSquare = document.getElementById('colorSquare'); const hexLabel = document.getElementById('hexLabel'); function normalizeHex(input) { if (!input) return null; let hex = input.trim(); if (hex[0] === '#') hex = hex.slice(1); if (!/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(hex)) return null; if (hex.length === 3) { hex = hex.split('').map(c => c + c).join(''); } return '#' + hex.toLowerCase(); } function applyColor(hex) { const normalized = normalizeHex(hex); if (!normalized) return false; colorSquare.style.background = normalized; hexLabel.textContent = normalized; colorPicker.value = normalized; hexInput.value = normalized; setLabelContrast(normalized); return true; } function setLabelContrast(hex) { // Convert hex to RGB const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); // Calculate relative luminance const srgb = [r, g, b].map(v => { v /= 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); }); const luminance = 0.2126 * srgb[0] + 0.7152 * srgb[1] + 0.0722 * srgb[2]; // Use white text on dark backgrounds and black text on light backgrounds const textColor = luminance > 0.5 ? '#111827' : '#ffffff'; hexLabel.style.color = textColor; // Slightly tint the label background for readability if (textColor === '#111827') { hexLabel.style.background = 'rgba(255,255,255,0.7)'; } else { hexLabel.style.background = 'rgba(0,0,0,0.24)'; } } function randomHex() { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); return ( '#' + [r, g, b] .map(n => n.toString(16).padStart(2, '0')) .join('') .toLowerCase() ); } function copyToClipboard(text) { if (!navigator.clipboard) { const ta = document.createElement('textarea'); ta.value = text; ta.style.position = 'fixed'; ta.style.left = '-9999px'; document.body.appendChild(ta); ta.select(); try { document.execCommand('copy'); } finally { document.body.removeChild(ta); } return; } navigator.clipboard.writeText(text).catch(() => {}); } applyBtn.addEventListener('click', () => { const ok = applyColor(hexInput.value || colorPicker.value); if (!ok) { // simple inline hint for invalid input hexInput.animate([{ borderColor: '#ef4444' }, { borderColor: '#e6e9ef' }], { duration: 420 }); } }); randomBtn.addEventListener('click', () => { const hex = randomHex(); applyColor(hex); }); copyBtn.addEventListener('click', () => { const hex = hexLabel.textContent || colorPicker.value; copyToClipboard(hex); // small feedback const orig = copyBtn.textContent; copyBtn.textContent = 'Copied!'; setTimeout(() => (copyBtn.textContent = orig), 900); }); colorPicker.addEventListener('input', (e) => { applyColor(e.target.value); }); hexInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') { applyBtn.click(); } }); // Initialize with default document.addEventListener('DOMContentLoaded', () => { const initial = colorPicker.value || '#1a2b3c'; applyColor(initial); }); })();