Palette & armonie

Ruota colori

Armonie · HEX · RGB · HSB

Palette & armonie cromatiche

Costruisci la tua palette

Trascina i punti sulla ruota e scegli una regola di armonia. Copia i valori HEX, RGB o HSB, estrai colori da un'immagine e salva le palette che ti piacciono.

Luminosità 100%

Estrai palette da un'immagine

Carica una foto e ottieni i suoi colori dominanti.

Clicca per caricare o trascina qui un'immagine

Anteprima immagine caricata

Palette salvate

0

Non hai ancora salvato palette. Creane una con la ruota e premi "Salva palette".

function onScroll() { const y = window.scrollY; nav.classList.toggle('scrolled', y>40); cta.classList.toggle('show', y > window.innerHeight*0.9); } window.addEventListener('scroll', onScroll, { passive:true }); onScroll(); /* Mobile menu */ const navToggle = document.getElementById('navToggle'); const mobileMenu = document.getElementById('mobileMenu'); function setMenu(open) { navToggle.classList.toggle('open', open); mobileMenu.classList.toggle('open', open); navToggle.setAttribute('aria-expanded', open ? 'true' : 'false'); navToggle.setAttribute('aria-label', open ? 'Chiudi il menu' : 'Apri il menu'); mobileMenu.setAttribute('aria-hidden', open ? 'false' : 'true'); document.body.style.overflow = open ? 'hidden' : ''; } if (navToggle && mobileMenu) { navToggle.addEventListener('click', () => setMenu(!mobileMenu.classList.contains('open'))); mobileMenu.querySelectorAll('a').forEach((a) => a.addEventListener('click', () => setMenu(false))); } const io = new IntersectionObserver((entries)=>{ entries.forEach((e)=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold:0.12, rootMargin:'0px 0px -60px 0px' }); document.querySelectorAll('.reveal').forEach((el)=>io.observe(el)); /* Analog section: scatto fotografico — flash + inversione su scroll */ const analogSection = document.getElementById('analogSection'); if (analogSection) { let triggered = false; const analogObserver = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting && !triggered) { triggered = true; // Flash bianco analogSection.classList.add('flashing'); // Dopo 250ms (metà del flash) cambiamo lo stato sotto setTimeout(() => { analogSection.classList.add('flashed'); }, 250); // Dopo 500ms totali rimuoviamo l'overlay bianco setTimeout(() => { analogSection.classList.remove('flashing'); }, 500); analogObserver.disconnect(); } }); }, { threshold: 0.35 }); analogObserver.observe(analogSection); } const modal = document.getElementById('videoModal'); const modalContent = document.getElementById('modalContent'); const modalClose = document.getElementById('modalClose'); if (modal && modalContent && modalClose) { function openModal(url, title) { modalContent.innerHTML = url ? '

' : ''; modal.classList.add('show'); document.body.style.overflow='hidden'; } function closeModal() { modal.classList.remove('show'); document.body.style.overflow=''; setTimeout(()=>{ modalContent.innerHTML=''; },350); } document.querySelectorAll('.work').forEach((w)=>{ const open = () => openModal(w.getAttribute('data-video'), w.getAttribute('data-title')); w.addEventListener('click', open); w.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(); } }); }); modalClose.addEventListener('click', closeModal); modal.addEventListener('click',(e)=>{ if(e.target===modal) closeModal(); }); document.addEventListener('keydown',(e)=>{ if(e.key==='Escape'){ closeModal(); setMenu(false); } }); } const form = document.getElementById('contactForm'); const success = document.getElementById('formSuccess'); if (form && success) { form.addEventListener('submit',(e)=>{ e.preventDefault(); const btn=form.querySelector('.form-submit'); btn.disabled=true; btn.textContent='Invio…'; setTimeout(()=>{ success.classList.add('show'); form.reset(); btn.disabled=false; btn.textContent='Invia richiesta'; },700); }); } document.querySelectorAll('.video-block video').forEach((v)=>{ v.addEventListener('playing',()=>{ const p=v.parentElement.querySelector('.video-poster'); if(p) p.style.opacity='0'; }); });