Spalvų paletės generatorius
Spalvų harmonija
Two colors opposite on the color wheel
Sugeneruota paletė
Paletės peržiūra
Eksportuoti paletę
:root {
--color-1: #3b82f6;
--color-2: #f6af3c;
}Techninė informacija
Kaip veikia spalvų paletės generatorius
Ką daro įrankis
Spalvų paletės generatorius sukuria harmoningas spalvų schemas iš bet kurios bazinės spalvos, remdamasis nusistovėjusiais spalvų teorijos principais. Pasirinkite bazinę spalvą ir vieną iš šešių harmonijos tipų — komplementarią, analogišką, triadinę, tetradinę, skeltinę komplementarią arba monochromatinę — ir akimirksniu sugeneruokite suderintą paletę. Kiekviena sugeneruota spalva pateikia HEX, RGB ir HSL reikšmes, paruoštas nukopijuoti į jūsų CSS, dizaino įrankį ar stiliaus gidą.
Dažniausi kūrėjų naudojimo atvejai
Dizaineriai ir programuotojai naudoja paletės generatorius pradėdami naujus projektus, kurdami dizaino sistemas ar atnaujindami prekės ženklo spalvas. Dažniausi scenarijai: komplementarių akcentinių spalvų generavimas pagrindinei prekės ženklo spalvai, analogiškų spalvų schemų kūrimas duomenų vizualizacijoms, triadinių palečių sudarymas ryškioms UI temoms ir monochromatinių variacijų tyrinėjimas minimalistiniams dizainams. Įrankis taip pat naudingas generuojant CSS pasirinktinių savybių rinkinius ir JSON spalvų žetonus dizaino sistemoms.
Spalvų harmonijos tipai
Spalvų harmonijos remiasi spalvų ratu. Komplementarios spalvos yra viena priešais kitą (180°) ir sukuria didelį kontrastą. Analogiškos spalvos yra greta (±30°) ir atrodo vientisos. Triadinės spalvos yra tolygiai išdėstytos kas 120° intervalais, suteikdamos subalansuotą ryškumą. Tetradinė (stačiakampė) schema naudoja keturias spalvas kas 90° intervalais. Skeltinė komplementari schema poruoja bazinę spalvą su dviem spalvomis, esančiomis greta jos komplemento. Monochromatinė schema keičia vieno atspalvio šviesumą ir sodrumą, kad gautų subtilias, vientisas paletes.
Dažniausios klaidos ir kraštiniai atvejai
Sugeneruotos paletės yra atspirties taškai, o ne galutiniai dizainai. Visada patikrinkite kontrasto santykius tarp sugeneruotų spalvų, kad užtikrintumėte prieinamumą. Labai sodrios arba labai tamsios bazinės spalvos gali sukurti paletes su prastu įskaitomumu. Atminkite, kad ekrano spalvos spaudoje atrodo kitaip. Testuokite paletes su realiu turiniu ir UI elementais, o ne pasikliaukite vien tik spalvų pavyzdžių peržiūromis.
Kada naudoti šį įrankį, o kada kodą
Naudokite šį naršyklės įrankį interaktyviam tyrinėjimui ir greitam palečių generavimui dizaino sprintų metu. Produkcinėms dizaino sistemoms paletės generavimą įgyvendinkite programiškai, naudodami tokias bibliotekas kaip chroma.js, culori ar polished, kurios gali generuoti harmonijas, užtikrinti kontrasto santykius ir integruotis su build procesais.