Harmonies

Complementary

Analogous

Triadic

Tetradic

Show saturation rings Lock brightness (value)

Brightness

:root { --bg: #0f1724; --card: #0b1220; --muted: #94a3b8; --accent: #76e4f7; --glass: rgba(255,255,255,0.04); } * { 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, #071022 0%, #081426 100%); color: #e6eef8; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .site-header { padding: 20px; text-align: center; } .site-header h1 { margin: 0; font-size: 1.6rem; } .subtitle { margin: 6px 0 0; color: var(--muted); font-size: 0.95rem; } .container { display: grid; grid-template-columns: 460px 1fr; gap: 24px; max-width: 1100px; margin: 24px auto; padding: 16px; } .wheel-panel { background: var(--card); padding: 18px; border-radius: 12px; box-shadow: 0 6px 30px rgba(5,8,15,0.6); display: flex; flex-direction: column; align-items: center; justify-content: center; } canvas { width: 420px; height: 420px; border-radius: 8px; cursor: crosshair; touch-action: none; image-rendering: optimizeQuality; background: linear-gradient(180deg, #111827 0%, #0b1220 100%); } .instructions { margin-top: 12px; color: var(--muted); font-size: 0.9rem; text-align: center; } .info-panel { background: rgba(255,255,255,0.02); padding: 18px; border-radius: 12px; display: flex; flex-direction: column; gap: 16px; min-height: 420px; } .preview { display: flex; gap: 12px; align-items: center; } .swatch { width: 96px; height: 96px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 6px 18px rgba(2,6,23,0.5), inset 0 -8px 20px rgba(0,0,0,0.25); } .codes { display: flex; flex-direction: column; gap: 8px; } .code-row { display: flex; gap: 10px; align-items: center; } .code-row label { min-width: 48px; color: var(--muted); font-size: 0.85rem; } .code { background: var(--glass); padding: 8px 12px; border-radius: 8px; color: inherit; border: 1px solid rgba(255,255,255,0.03); cursor: default; font-family: monospace; font-size: 0.95rem; } .code button { border: none; background: transparent; } .harmonies h2 { margin: 0 0 8px 0; font-size: 1.05rem; } .harm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .harm-item { background: rgba(255,255,255,0.02); padding: 10px; border-radius: 8px; } .harm-title { color: var(--muted); font-size: 0.85rem; margin-bottom: 8px; } .swatches { display: flex; gap: 8px; flex-wrap: nowrap; } .swatches .s { width: 40px; height: 40px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.25); box-shadow: 0 6px 12px rgba(2,6,23,0.5); cursor: pointer; transition: transform 120ms ease; } .swatches .s:active { transform: scale(0.96); } .controls { display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 0.9rem; } .controls label { display: flex; gap: 8px; align-items: center; } .brightness { display: flex; gap: 8px; align-items: center; } input[type="range"] { width: 100%; } .site-footer { max-width: 1100px; margin: 16px auto; color: var(--muted); text-align: center; font-size: 0.85rem; } @media (max-width: 920px) { .container { grid-template-columns: 1fr; padding: 12px; } canvas { width: 320px; height: 320px; } .wheel-panel, .info-panel { width: 100%; } } const canvas = document.getElementById('colorWheel'); const ctx = canvas.getContext('2d'); const size = Math.min(canvas.width, canvas.height); const cx = canvas.width / 2; const cy = canvas.height / 2; const radius = (size / 2) - 2; const hexBtn = document.getElementById('hexCode'); const rgbEl = document.getElementById('rgbCode'); const hslEl = document.getElementById('hslCode'); const swatch = document.getElementById('swatch'); const complementary = document.getElementById('complementary'); const analogous = document.getElementById('analogous'); const triadic = document.getElementById('triadic'); const tetradic = document.getElementById('tetradic'); const showSaturation = document.getElementById('showSaturation'); const valueRange = document.getElementById('valueRange'); const lockValue = document.getElementById('lockValue'); let current = { h: 0, s: 0, v: 1 }; function drawWheel() { ctx.clearRect(0, 0, canvas.width, canvas.height); const step = 1; for (let angle = 0; angle < 360; angle += step) { for (let r = 0; r <= radius; r++) { const rad = (angle - 90) * Math.PI / 180; const x = cx + Math.cos(rad) * r; const y = cy + Math.sin(rad) * r; const s = r / radius; const v = Number(valueRange.value); const rgb = hsvToRgb(angle, s, v); ctx.fillStyle = `rgb(${rgb.r},${rgb.g},${rgb.b})`; ctx.fillRect(Math.round(x), Math.round(y), 1, 1); } } if (showSaturation.checked) { ctx.beginPath(); ctx.arc(cx, cy, radius, 0, Math.PI * 2); ctx.strokeStyle = 'rgba(255,255,255,0.03)'; ctx.lineWidth = 1; ctx.stroke(); } } function hsvToRgb(h, s, v) { const hh = ((h % 360) + 360) % 360; const c = v * s; const x = c * (1 - Math.abs(((hh / 60) % 2) - 1)); const m = v - c; let rp = 0, gp = 0, bp = 0; if (0 <= hh && hh < 60) { rp = c; gp = x; bp = 0; } else if (60 <= hh && hh < 120) { rp = x; gp = c; bp = 0; } else if (120 <= hh && hh < 180) { rp = 0; gp = c; bp = x; } else if (180 <= hh && hh < 240) { rp = 0; gp = x; bp = c; } else if (240 <= hh && hh < 300) { rp = x; gp = 0; bp = c; } else { rp = c; gp = 0; bp = x; } return { r: Math.round((rp + m) * 255), g: Math.round((gp + m) * 255), b: Math.round((bp + m) * 255) }; } function rgbToHex({ r, g, b }) { return '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('').toUpperCase(); } 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, s, l = (max + min) / 2; if (max === min) { h = s = 0; } else { 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 = h * 60; } return { h: Math.round(h || 0), s: Math.round((s || 0) * 100), l: Math.round(l * 100) }; } function updateUIFromHSV(h, s, v) { const rgb = hsvToRgb(h, s, v); const hex = rgbToHex(rgb); const hsl = rgbToHsl(rgb); hexBtn.textContent = hex; rgbEl.textContent = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`; hslEl.textContent = `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`; swatch.style.background = hex; current = { h: Math.round(h), s: Number(s.toFixed(2)), v: Number(v.toFixed(2)) }; renderHarmonies(); } function renderHarmonies() { clearChildren(complementary); clearChildren(analogous); clearChildren(triadic); clearChildren(tetradic); const base = current.h; const sats = current.s; const val = current.v; const compHue = (base + 180) % 360; makeSwatch(hexFromHSV(compHue, sats, val), complementary); const a1 = (base - 30 + 360) % 360; const a2 = (base + 30) % 360; makeSwatch(hexFromHSV(a1, Math.max(0.15, sats - 0.08), val), analogous); makeSwatch(hexFromHSV(base, sats, val), analogous); makeSwatch(hexFromHSV(a2, Math.max(0.15, sats - 0.08), val), analogous); const t1 = (base + 120) % 360; const t2 = (base + 240) % 360; makeSwatch(hexFromHSV(base, sats, val), triadic); makeSwatch(hexFromHSV(t1, sats, val), triadic); makeSwatch(hexFromHSV(t2, sats, val), triadic); const tet1 = (base + 90) % 360; const tet2 = (base + 180) % 360; const tet3 = (base + 270) % 360; makeSwatch(hexFromHSV(base, sats, val), tetradic); makeSwatch(hexFromHSV(tet1, sats, val), tetradic); makeSwatch(hexFromHSV(tet2, sats, val), tetradic); makeSwatch(hexFromHSV(tet3, sats, val), tetradic); } function clearChildren(el) { while (el.firstChild) el.removeChild(el.firstChild); } function makeSwatch(hex, container) { const d = document.createElement('div'); d.className = 's'; d.style.background = hex; d.title = hex; d.addEventListener('click', () => { copyText(hex); }); container.appendChild(d); } function hexFromHSV(h, s, v) { const rgb = hsvToRgb(h, s, v); return rgbToHex(rgb); } function copyText(text) { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text); } else { const ta = document.createElement('textarea'); ta.value = text; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); } flashCopied(); } function flashCopied() { const original = hexBtn.textContent; hexBtn.textContent = 'Copied!'; setTimeout(() => hexBtn.textContent = original, 900); } function getMouseHSV(clientX, clientY) { const rect = canvas.getBoundingClientRect(); const x = clientX - rect.left; const y = clientY - rect.top; const dx = x - cx; const dy = y - cy; const r = Math.sqrt(dx * dx + dy * dy); if (r > radius) return null; const angle = Math.atan2(dy, dx) * 180 / Math.PI + 90; const h = (angle + 360) % 360; const s = Math.min(1, r / radius); const v = lockValue.checked ? Number(current.v) : Number(valueRange.value); return { h, s, v }; } function handlePointerMove(e) { const p = e.touches ? e.touches[0] : e; const hsv = getMouseHSV(p.clientX, p.clientY); if (!hsv) return; updateUIFromHSV(hsv.h, hsv.s, hsv.v); } function handlePointerDown(e) { const p = e.touches ? e.touches[0] : e; const hsv = getMouseHSV(p.clientX, p.clientY); if (!hsv) return; updateUIFromHSV(hsv.h, hsv.s, hsv.v); const hex = hexFromHSV(hsv.h, hsv.s, hsv.v); copyText(hex); e.preventDefault(); } canvas.addEventListener('mousemove', handlePointerMove); canvas.addEventListener('touchmove', handlePointerMove, { passive: true }); canvas.addEventListener('click', handlePointerDown); canvas.addEventListener('touchstart', handlePointerDown); hexBtn.addEventListener('click', () => { copyText(hexBtn.textContent); }); showSaturation.addEventListener('change', drawWheel); valueRange.addEventListener('input', () => { drawWheel(); if (lockValue.checked) { updateUIFromHSV(current.h, current.s, Number(valueRange.value)); } }); lockValue.addEventListener('change', () => { if (lockValue.checked) { valueRange.disabled = false; } }); // Initialize drawWheel(); // default pick center top (h=0,s=1) updateUIFromHSV(0, 1, Number(valueRange.value));