وړیا د انځور رنگ پالیټ راویستونکی

دا څنګه کار کوي

رنګ ایستل بشپړ ستاسو براوزر کې د یوه لاسي-لیکل شوي k-means++ کلستر الگوریتم سره چلیږي چې د Canvas API نه لوستل شوي خام پکسل ډیټا باندې پلي کیږي — هیڅ سرور، هیڅ درېیمې-لورې کتابتون. همغه انځور او رنګ-شمېر تنظیمات تل همغه پلیټ تولیدوي ځکه الگوریتم یو ټاکل شوی pseudo-random عدد جوړوونکی (mulberry32) کاروي پرځای د Math.random.

1. 1
   Canvas پکسل ډیټا لولي

   انځور شالید-پرده HTML Canvas عنصر ته رسمیږي او خپل اوږدترین اړخ ته تر 200px پورې کوچنی کیږي. Canvas API میتود getImageData() هر پکسل خام RGBA بایټونو په توګه بیرته کوي، او بشپړ روڼ پکسلونه (alpha < 128) له کلسترول نه مخکې غورځول کیږي.
2. 2
   k-means++ پکسلونه کلستروي

   یو k-means++ پیل‌کوونکی مرکزونه ثابت ډول تخم کوي، بیا الگوریتم تر 20 ځله پورې تکراریږي: هر پکسل خپل نږدې مرکز ته RGB فضا کې ورکول کیږي، بیا مرکزونه د ټولو ورکړل شویو پکسلونو مینځنی په توګه بیا محاسبه کیږي. کلسترونه چې همغه هیکس ارزښت ته ولویږي یوځای کیږي، نو هر رنګ پایله کې ځانګړی دی.
3. 3
   هر-رنګ میتاډیټا محاسبه کیږي

   هر مرکز HEX، HSL، او ټول پکسلونو نه یې برخه (سلنه) ته بدلیږي. WCAG نسبتي روښنایي د معیاري فورمول له مخې محاسبه کیږي، او کنتراست تناسبونه دواړو تور او سپین پر وړاندې هر رنګ سره ښودل کیږي.
4. 4
   صادرول او eyedropper محصول

   پلیټ کیدای شي د CSS دلخواه خصوصیتونو، SCSS متغیرو، یوه Tailwind تنظیم ټوټه، یا JSON په توګه کاپي شي. یو کیکاږل-ته-نمونه eyedropper ستاسو کیکاږل مخکتنه پر بیرته دقیق سرچینه پکسل همغږیو ته یوه بشپړ-ریزولوشن کینوس باندې نقشه کوي، هغه پکسل رنګ یوه جلا ټاکل-شوي-رنګ لیست ته ورزیاتوي. یوه PNG پلیټ پټه کیدای شي د Canvas toBlob() سره ډاونلوډ شي.

اړوندې وسیلې