Kyauta Mai Ƙirƙirar Palette na Launi

Yadda Yake Aiki

An gina kayan aikin da sifili na ɗakunan karatu na waje — duk lissafin launi yana gudana JavaScript da aka rubuta da hannu kai tsaye a burauzarka. Yana canja zaɓaɓɓen launinka tsakanin hex da HSL, sannan yana amfani da ka'idojin daidaituwar ka'idar launi na gargajiya (complementary, triadic, analogous, da sauransu) ta hanyar lissafi a kan ƙafar hue don samar da kowace palette.

1. 1
   Canjawar hex-zuwa-HSL

   Lokacin da ka zaɓi launi, kayan aikin yana nazarin harafin hex zuwa sassan RGB kuma yana canja su zuwa HSL (hue, saturation, lightness). Hue matsayi ne na digiri 0–360 a kan ƙafar launi; duk lissafin palette yana faruwa a wannan sarari.
2. 2
   Lissafin hue don daidaituwa

   Kowace irin palette wata ka'idar juyawa tsayayye ce da ake amfani da ita ga hue na asali. Complementary yana ƙara 180°, triadic yana ƙara 120° da 240°, tetradic yana matakai da 90°, split-complementary yana amfani da 150° da 210°. Monochromatic da inuwoyi suna riƙe hue da saturation daidai yayin da suke matsawa haske sama da ƙasa.
3. 3
   Fitarwar HSL-zuwa-hex

   Ana mayar da kowace uku-uku na HSL da aka lissafta baya zuwa launin hex ta amfani da ka'idar chroma na al'ada. Ana nuna sakamakon a matsayin tsagi na launi tare da lakabi masu bambanci na atomatik (rubutu duhu a samfuran haske, rubutu haske a masu duhu) da aka tantance ta wani iyaka mai sauƙi na haske.
4. 4
   Fitar da shi a tsarin da kake so

   Za a iya kwafin palette a matsayin harafin hex ko fitar da shi a matsayin fayil na masu canji na CSS (:root { --color-1: … }), masu canji na SCSS, wani guntu na saitin Tailwind, wani abu na JSON, ko tsagi na launi na PNG. Fitar da PNG yana amfani da Canvas API na burauza (toDataURL) don zana kowane samfur tare da lakabin hex ɗinsa — ana samar da komai a wurin nan da dannawa.

Kayan Aiki Masu Alaƙa