Spalvų paletės generatorius

Kaip naudotis spalvų paletės generatoriumi

1. Pasirink Pagrindinė spalva spalvos pavyzdžiu arba įrašyk bet kurį kodą į Pagrindinės spalvos kodas (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), CSS pavadinimą…).
2. Pasirink Harmonija: Komplementinė, Analoginė, Triada, Skaldyta komplementinė, Tetrada (stačiakampis), Kvadratas arba Monochrominė.
3. Pasirink Spalvų ratas: HSL (klasikinis) arba OKLCH (suvokimo). Paletė atsinaujina, kai tik pakeiti bet kurią parinktį; Generuoti paletę ją taip pat atnaujina.
4. Nukopijuok vieną spalvą mygtuku Kopijuoti po jos pavyzdžiu arba pasirink formatą per Eksportuoti kaip (HEX sąrašas, CSS kintamieji, SCSS kintamieji, JSON masyvas arba „Tailwind“ spalvos) ir naudok Kopijuoti ar Atsisiųsti visai paletei.

Kiekvienas pavyzdys rodo savo HEX kodą juoda arba balta spalva, kuri turi geresnį kontrastą, ir savo padėtį pagrindinės spalvos atžvilgiu (pavyzdžiui, +120°).

Veikia tavo naršyklėje. Nieko, ką įvedi, nesiunčiame į serverį.

Spalvų harmonijos

Spalvų harmonijos yra fiksuoti kampai spalvų rate. Pradedant nuo tavo pagrindinio atspalvio, įrankis pasuka atspalvį ir išlaiko pagrindinės spalvos sodrumą bei šviesumą.

• Komplementinė (0°, 180°): priešinga spalva. Didžiausias kontrastas, puikiai tinka raginimo veikti mygtukui ant pagrindinės prekės ženklo spalvos.
• Analoginė (−60°, −30°, 0°, +30°, +60°): kaimynai rate. Ramūs, natūralūs deriniai, gerai tinkantys fonams ir iliustracijoms.
• Triada (0°, 120°, 240°): trys tolygiai išdėstyti atspalviai. Gyva ir subalansuota; paprastai viena spalva dominuoja, o kitos dvi yra akcentai.
• Skaldyta komplementinė (0°, 150°, 210°): dvi komplemento kaimynės. Stiprus kontrastas su mažesne įtampa nei grynos komplementinės poros.
• Tetrada (stačiakampis) (0°, 60°, 180°, 240°): dvi komplementinės poros. Sodrios paletės, kurioms reikia vienos dominuojančios spalvos, kad liktų darnios.
• Kvadratas (0°, 90°, 180°, 270°): keturi tolygiai išdėstyti atspalviai.
• Monochrominė: vienas atspalvis penkiais šviesumo žingsniais nuo tamsaus iki šviesaus. Idealu sąsajos būsenoms, diagramoms ir subtiliems dizainams.

HSL ar OKLCH ratas?

HSL (klasikinis) ratas yra tradicinis, naudojamas daugumos dizaino įrankių ir pamokų. Jo trūkumas tas, kad vienodi kampai neatrodo vienodai ryškūs: geltona ties 60° atrodo daug šviesesnė nei mėlyna ties 240° su tuo pačiu HSL šviesumu.

OKLCH (suvokimo) ratas pasuka atspalvį „Oklab“ spalvų modelyje, sukurtame taip, kad šviesumas atrodytų vienodas. Ant jo sukurtose paletėse spalvos turi panašų vizualinį svorį, o tai padeda užtikrinti prieinamą kontrastą. Kai kurios pasuktos spalvos gali nepatekti į ekrano rodomą gamą; tada įrankis šiek tiek sumažina jų sodrumą (chromą), kad jas būtų galima parodyti.

Eksportuotos paletės naudojimas

CSS kintamieji sukuria :root bloką su --color-1, --color-2…, kurį gali įklijuoti į stilių lentelę. SCSS kintamieji duoda eilutes $color-1: …;, JSON masyvas – HEX eilučių sąrašą skriptams, o „Tailwind“ spalvos – colors objektą su raktais 100, 200, 300…, kurį gali įklijuoti į savo „Tailwind“ konfigūraciją.

Prieš skelbiant patikrink teksto kontrastą: harmonija garantuoja malonius atspalvius, bet ne įskaitomą tekstą. Pagrindiniam tekstui naudok tamsias ar šviesias neutralias spalvas, o sodrias paletės spalvas pasilik akcentams, mygtukams ir grafikai.