CodeKitHubKas yra šis įrankis?
Atspalvių gradientas — tai vienos spalvos variacijų serija skirtinguose šviesumo lygiuose, naudojama vartotojo sąsajos dizaine tokiems dalykams kaip užvedimo (hover) būsenos, neaktyvios būsenos, rėmeliai ir fonai, kurie turi būti susiję su prekės ženklo spalva, bet nebūti identiški jai.
Šis įrankis konvertuoja jūsų pagrindinę spalvą į HSL formatą, palieka atspalvio toną ir sodrumą fiksuotus, o šviesumą keičia žingsniais nuo maždaug 95% (beveik baltas tonas) iki maždaug 10% (beveik juodas atspalvis), o jūsų originali spalva išlieka natūralioje savo vietoje gradiento viduryje.
Kodėl jį naudoti?
- Sugeneruoja dizaino sistemos stiliaus gradientą (kaip Tailwind 50/100/200.../900 skalė) iš bet kurios vienos spalvos, o ne tik iš fiksuotos iš anksto nustatytos paletės.
- Pasirinkite 7, 9 arba 11 žingsnių, priklausomai nuo to, kaip detalus gradientas jums reikalingas.
- Kiekvienas žingsnis rodo tikslų HEX kodą ir šviesumo procentą — spustelėkite, kad nukopijuotumėte.
- Išlaiko atspalvio toną ir sodrumą pastovius visame gradiente, todėl visi atspalviai aiškiai atrodo susiję su pagrindine spalva, o ne nukrypsta į pilką.
- Nemokamas, akimirksniu veikiantis ir visiškai vietinis.
Kaip naudoti
- Pasirinkite pagrindinę spalvą naudodami spalvų parinkiklį arba įvesdami HEX kodą.
- Pasirinkite, kiek žingsnių norite gradiente (7, 9 ar 11).
- Perskaitykite kiekvieno atspalvio HEX kodą ir šviesumo procentą tiesiai ant jo pavyzdžio.
- Spustelėkite bet kurį pavyzdį, kad nukopijuotumėte jo HEX kodą.
Pavyzdys
Įvestis
#3B82F6 (vidutinė mėlyna), 9 žingsniaiIšvestis
9 atspalviai nuo beveik balto tono (~95% šviesumo) iki beveik juodo atspalvio (~10% šviesumo), o pats #3B82F6 yra vidurinis žingsnisAtspalvio tonas ir sodrumas išlieka fiksuoti visuose 9 žingsniuose — keičiasi tik šviesumas — todėl kiekvienas atspalvis aiškiai atrodo priklausantis tai pačiai spalvų šeimai.
Dažniausiai užduodami klausimai
Ar tai ta pati sistema, kurią Tailwind CSS naudoja savo spalvų skalėms?
Tai ta pati esminė idėja (fiksuotas atspalvio tonas ir sodrumas, kintantis šviesumas), tačiau tai nėra tiksli Tailwind konkrečios paletės kopija — Tailwind 50-900 skalės buvo rankiniu būdu suderintos dizainerių, o ne sugeneruotos vienos formulės. Šis įrankis suteikia panašią struktūrą, sugeneruotą iš bet kurios jūsų pasirinktos spalvos, kas naudinga, kai jūsų pagrindinė spalva nėra viena iš Tailwind iš anksto nustatytų.
Kodėl mano spalva atrodo beveik vienoda dviejuose gretimuose žingsniuose?
Tai gali nutikti prie labai šviesių ar labai tamsių gradiento galų, kur suvokiamas šviesumas keičiasi lėčiau, nei rodo skaitinis procentas (tai žinoma žmogaus spalvų suvokimo savybė, nebūdinga specifiškai šiam įrankiui). Mažiau žingsnių pasirinkimas (7 vietoj 11) labiau išskiria šviesumo reikšmes ir sumažina beveik identiškus pavyzdžius.
Ar galiu naudoti šiuos atspalvius tiesiogiai kaip CSS pasirinktines savybes (custom properties)?
Taip — nukopijuokite kiekvieną HEX kodą ir įklijuokite jį į savo CSS kintamuosius (pvz., nuo --color-brand-100 iki --color-brand-900), suderindami gradiento poziciją su ta pavadinimų skale, kurią naudoja jūsų projektas.
Ar turėčiau naudoti šį įrankį, ar Spalvų maišytuvą?
Jei kuriate vienos spalvos šviesesnes ir tamsesnes versijas — užvedimo būsenas, subtilius fonus, rėmelius, susijusius su prekės ženklo spalva — naudokite šį atspalvių generatorių. Jei jums vietoj to reikia spalvos tarp dviejų skirtingų spalvų (tarkim, žingsnio tarp jūsų pirminės mėlynos ir antrinės oranžinės), naudokite Spalvų maišytuvą, kuris interpoliuoja dviejų spalvų RGB kanalus bet kokiu santykiu, o ne keičia vienos spalvos šviesumą.
Kas nutinka, jei mano pagrindinė spalva jau yra labai šviesi arba labai tamsi?
Pagrindinė spalva visada yra viduriniame rade, tonai kyla virš jos iki maždaug 95% šviesumo, o atspalviai leidžiasi žemiau iki maždaug 10%. Jei jūsų pagrindinė spalva jau beveik balta, gradiento tonų pusė susispaudžia į siaurą šviesumo intervalą (beveik identiškos eilutės), o atspalvių pusė plačiai išsiplečia — ir atvirkščiai labai tamsiai pagrindinei spalvai. Norėdami gauti tolygiausiai išdėstytą gradientą, pradėkite nuo vidutinio šviesumo savo spalvos versijos (maždaug 40-60% šviesumo).
Ar jis gali generuoti ir tonus (spalvą, sumaišytą su pilka)?
Ne — šis įrankis keičia tik šviesumą, palikdamas sodrumą fiksuotą, tai sukuria tonus ir atspalvius, bet ne pritemdytus tonus. Jei norite prislopintesnio gradiento, pirmiausia sumažinkite savo pagrindinės spalvos sodrumą (spalvų parinklyje pasirinkite pilkesnę jos versiją) ir generuokite gradientą iš jos — kiekvienas žingsnis paveldės žemesnį sodrumą.