Utilia
Kategorije ▾
Jezik: sr ▾

Generator paleta boja

Generiši palete boja iz jedne osnovne boje po pravilima harmonije boja: komplementarne, analogne, trijadne, tetradne, kvadratne i monohromatske.

Paleta

    Kako se koristi generator paleta boja

    1. Izaberi Osnovna boja uzorkom boje ili upiši bilo koji kod u polje Kod osnovne boje (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), CSS naziv…).
    2. Izaberi Harmonija: Komplementarna, Analogna, Trijadna, Podeljena komplementarna, Tetradna (pravougaonik), Kvadrat ili Monohromatska.
    3. Izaberi Krug boja: HSL (klasičan) ili OKLCH (perceptivan). Paleta se ažurira kad god promeniš neku opciju, a osvežava je i Generiši paletu.
    4. Kopiraj pojedinačnu boju dugmetom Kopiraj ispod njenog uzorka ili izaberi format u Izvezi kao (HEX lista, CSS promenljive, SCSS promenljive, JSON niz ili Tailwind boje) i upotrebi Kopiraj ili Preuzmi za celu paletu.

    Svaki uzorak prikazuje svoj HEX kod crnom ili belom bojom, zavisno od toga koja ima bolji kontrast, i svoj položaj u odnosu na osnovnu boju (na primer +120°).

    Alat radi u tvom pregledaču. Ništa što upišeš ne šalje se na server.

    Harmonije boja

    Harmonije boja su fiksni uglovi na krugu boja. Polazeći od tona tvoje osnovne boje, alat rotira ton, a zasićenost i svetlinu osnove zadržava.

    • Komplementarna (0°, 180°): suprotna boja. Maksimalan kontrast, odlična za dugme poziva na akciju naspram glavne boje brenda.
    • Analogna (−60°, −30°, 0°, +30°, +60°): susedi na krugu. Mirne, prirodne kombinacije koje dobro rade za pozadine i ilustracije.
    • Trijadna (0°, 120°, 240°): tri ravnomerno raspoređena tona. Živa i uravnotežena. Obično jedna boja dominira, a druge dve su akcenti.
    • Podeljena komplementarna (0°, 150°, 210°): dva suseda komplementa. Jak kontrast sa manje napetosti nego kod čistog komplementarnog para.
    • Tetradna (pravougaonik) (0°, 60°, 180°, 240°): dva komplementarna para. Bogate palete kojima je potrebna jedna dominantna boja da ostanu skladne.
    • Kvadrat (0°, 90°, 180°, 270°): četiri ravnomerno raspoređena tona.
    • Monohromatska: jedan ton u pet koraka svetline, od tamnog do svetlog. Idealna za stanja korisničkog interfejsa, grafikone i suptilne dizajne.

    HSL ili OKLCH krug?

    HSL (klasičan) krug je tradicionalni koji koristi većina dizajnerskih alata i vodiča. Mana mu je što jednaki uglovi ne izgledaju jednako svetlo: žuta na 60° izgleda mnogo svetlije od plave na 240° sa istom HSL svetlinom.

    OKLCH (perceptivan) krug rotira ton u modelu boja Oklab, koji je napravljen tako da svetlina izgleda ujednačeno. Palete izgrađene na njemu imaju boje slične vizuelne težine, što pomaže kod pristupačnog kontrasta. Neke rotirane boje mogu pasti van onoga što ekran može da prikaže. Alat tada blago snižava njihovu hromu da bi ostale prikazive.

    Korišćenje izvezene palete

    CSS promenljive daju blok :root sa --color-1, --color-2… koji možeš da nalepiš u stilski fajl. SCSS promenljive daju redove $color-1: …;, JSON niz daje listu HEX niski za skripte, a Tailwind boje daje objekat colors sa ključevima 100, 200, 300… koji se lepi u Tailwind konfiguraciju.

    Pre objavljivanja proveri kontrast teksta: harmonija garantuje prijatne tonove, a ne čitljiv tekst. Za osnovni tekst koristi tamne ili svetle neutralne boje, a zasićene boje palete čuvaj za akcente, dugmad i grafiku.

    Česta pitanja

    Šta je komplementarna boja?

    To je boja direktno nasuprot na krugu boja, na 180°. Na HSL krugu komplement crvene (#FF0000) je cijan (#00FFFF).

    Koliko boja treba da ima paleta?

    Većini interfejsa trebaju jedna glavna boja, jedan ili dva akcenta i nekoliko neutralnih boja. Tri do pet boja iz harmonije, plus sive, uobičajen je i praktičan izbor.

    Zašto OKLCH i HSL daju različite palete?

    Dva kruga postavljaju tonove na različite uglove i različito mere svetlinu. HSL prati klasičan krug zasnovan na RGB-u, a OKLCH prati to kako ljudi opažaju boju, pa njegove palete izgledaju ravnomernije uravnotežene.

    Mogu li ove boje da koristim komercijalno?

    Da. Boje i heks kodovi nisu zaštićeni, a generisanu paletu možeš da koristiš u bilo kom projektu.

    Kako da napravim paletu iz fotografije umesto ovako?

    Upotrebi alat za paletu iz slike: on izdvaja dominantne boje slike. Zatim jednu od njih možeš da nalepiš ovde kao osnovnu boju i oko nje napraviš harmonije.

    Srodni alati