Generatore di palette di colori
Genera palette di colori armoniose a partire da qualsiasi colore di base. Supporta schemi complementari, analoghi, triadici e monocromatici.
Complementary
#6366F1#F1EE63Analogous
#63ADF1#6366F1#A763F1Triadic
#6366F1#F16366#66F163Split Complement
#6366F1#F1A763#ADF163Tetradic
#6366F1#F163AD#F1EE63#63F1A7Monochromatic
#0F13AC#1D21EB#6366F1#A1A3F7#D0D1FBCome usare questo strumento
- 1
Click the color swatch to open your system color picker, or type a 6-digit hex code like #6366F1 into the text field next to it.
- 2
Watch the six scheme rows update instantly as you change the base color.
- 3
Read the uppercase hex code shown in the bottom-left corner of each swatch and copy the ones you want into your design tool or stylesheet.
Che cos'è il Generatore di palette di colori?
La teoria del colore definisce relazioni armoniche in base alle posizioni sul cerchio cromatico. I colori complementari si trovano in posizioni opposte (180°). Gli analoghi sono adiacenti (30°). Gli schemi triadici usano tre colori equidistanti (120°). Questo strumento calcola ciascuno di essi a partire dal colore di base che sceglie, offrendole una palette di partenza fondata su una teoria del colore collaudata.
Casi d'uso comuni
Picking a primary plus accent color for a website by reading the complementary pair off your brand color.
Building a calm, unified UI background-and-card scheme from the analogous row.
Generating a 5-step monochromatic tint and shade ramp for hover, active, and disabled button states.
Sketching a data-visualization palette where triadic or tetradic colors keep series visually distinct.
Exploring logo or illustration color combinations before committing in Figma or Illustrator.
Quickly grabbing hex codes for a CSS variable set without leaving the browser.
Domande frequenti
Quale schema è il migliore per i siti web?▼
Strumenti correlati
Convertitore di colori (HEX/RGB/HSL)
Converte i colori tra i formati HEX, RGB e HSL. Scelga un colore visivamente o inserisca i valori manualmente.
Generatore di box shadow CSS
Crea valori di box-shadow in CSS in modo visivo. Anteprima in tempo reale e copia del CSS generato.
Generatore di gradienti CSS
Crea gradienti CSS lineari e radiali. Scelga i colori in modo visivo e copi il CSS generato.
Generatore di curve di accelerazione cubic-bezier
Crea curve di accelerazione cubic-bezier per il CSS. Include preset standard.
Generatore di border radius CSS
Crea valori complessi di border-radius in CSS in modo visivo. Controllo indipendente di ciascun angolo.
Generatore di CSS clamp()
Genera valori CSS fluidi e responsivi con clamp(). Scala in modo uniforme tra dimensioni minime e massime lungo gli intervalli del viewport.