Színpaletta-generátor

A színpaletta-generátor használata

1. Válassz Alapszínt a színmintával, vagy írj be bármilyen kódot az Alapszín kódja mezőbe (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), CSS-színnév…).
2. Válassz Harmóniatípust: Komplementer, Analóg, Triád, Osztott komplementer, Tetrád (téglalap), Négyzet vagy Monokróm.
3. Válaszd ki a Színkört: HSL (klasszikus) vagy OKLCH (észlelési). A paletta bármelyik beállítás módosításakor frissül; a Paletta generálása gomb is frissíti.
4. Egyetlen színt a színminta alatti Másolás gombbal másolhatsz ki, vagy válassz formátumot az Exportálás mint listában (HEX-lista, CSS-változók, SCSS-változók, JSON-tömb vagy Tailwind-színek), és a Másolás vagy a Letöltés gombbal viheted az egész palettát.

Minden színminta a HEX-kódját mutatja feketével vagy fehérrel, amelyik jobb kontrasztot ad, valamint az alapszínhez viszonyított helyzetét (például +120°).

A színharmóniák

A színharmóniák a színkör rögzített szögei. Az alapszínárnyalatból kiindulva az eszköz elforgatja az árnyalatot, és megtartja az alapszín telítettségét és világosságát.

• Komplementer (0°, 180°): a szemközti szín. Maximális kontraszt, remek egy cselekvésre ösztönző gombhoz a fő márkaszínnel szemben.
• Analóg (−60°, −30°, 0°, +30°, +60°): a színkör szomszédai. Nyugodt, természetes összeállítások, amelyek jól működnek hátterekhez és illusztrációkhoz.
• Triád (0°, 120°, 240°): három egyenletesen elosztott árnyalat. Élénk és kiegyensúlyozott; általában az egyik szín dominál, a másik kettő kiegészítő.
• Osztott komplementer (0°, 150°, 210°): a komplementer két szomszédja. Erős kontraszt, a tiszta komplementer párnál kisebb feszültséggel.
• Tetrád (téglalap) (0°, 60°, 180°, 240°): két komplementer pár. Gazdag paletták, amelyeknek egy domináns szín kell az összhanghoz.
• Négyzet (0°, 90°, 180°, 270°): négy egyenletesen elosztott árnyalat.
• Monokróm: egy árnyalat öt világossági lépésben, sötéttől világosig. Ideális felületi állapotokhoz, diagramokhoz és visszafogott tervekhez.

HSL vagy OKLCH színkör?

A HSL (klasszikus) színkör a hagyományos, amelyet a legtöbb tervezőeszköz és oktatóanyag használ. Hátránya, hogy az egyenlő szögek nem látszanak egyformán világosnak: a 60°-os sárga sokkal világosabbnak tűnik, mint a 240°-os kék, azonos HSL-világosság mellett.

Az OKLCH (észlelési) színkör az Oklab színmodellben forgatja az árnyalatot, amelyet úgy terveztek, hogy a világosság egyenletesnek látsszon. Az erre épülő paletták színei hasonló vizuális súlyúak, ami segít a hozzáférhető kontrasztnál. Egyes elforgatott színek kívül eshetnek azon, amit egy képernyő meg tud jeleníteni; az eszköz ilyenkor kissé csökkenti a krómájukat, hogy megjeleníthetők maradjanak.

Az exportált paletta felhasználása

A CSS-változók egy :root blokkot adnak --color-1, --color-2… változókkal, amelyet beilleszthetsz egy stíluslapba. Az SCSS-változók $color-1: …; sorokat adnak, a JSON-tömb HEX-szövegek listáját szkriptekhez, a Tailwind-színek pedig egy colors objektumot 100, 200, 300… kulcsokkal, amelyet a Tailwind-konfigurációdba illeszthetsz.

Élesítés előtt ellenőrizd a szöveg kontrasztját: a harmónia kellemes árnyalatokat garantál, nem olvasható szöveget. Törzsszöveghez használj sötét vagy világos semleges színeket, a telített palettaszíneket pedig tartogasd kiemelésekhez, gombokhoz és grafikákhoz.