randomColor : تولید کننده ی رنگ برای Javascript

- visibility ۳ mode_comment

در این مطلب میخوام کدی رو بهتون توضیح بدم که به وسیله ی اون میتونین رنگ های تصادفی رو تولید کنید و روی اونا مدیریت داشته باشید.

برای شروع به صفحه مورد نظر در سایت Github برین و فایلهای مربوطه رو دانلود کنید.

ما در این مطلب با فایل randomColor.js کار داریم. حجم این فایل تقریبا 8 کیلو بایت هست. البته اگر اونو فشرده کنید ، کمتر هم میشه. من این فایل رو در آخر همین مطلب قرار دادم و شما میتونین اونو دانلود کنید و ازش استفاده کنید.

برای شروع یک فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

همونطور که میبینید ، فایل JS رو به سندمون اضافه کردیم و در انتها هم یک تگ باز و بسته ی Script قرار دادیم ، که در اون میتونیم کدهای مورد نظرمونو بنویسیم.

برای ساختن یک کد رنگ تصادفی ( random ) میتونین به روش زیر عمل کنید :

خروجی دستور بالا یک کد هگز ( Hex ) رنگ هست ، که با هر بار Refresh کد رنگ تغییر میکنه.

اگر بخواید که فرمت کد خروجی بصورت کد هگز نباشه ، میتونین با استفاده از خصوصیت format اونو تغییر بدین. این خصوصیت 4 مقدار hex و rgb و rgbArray و hsvArray رو دریافت میکنه.

مقدار پیش فرض این خصوصیت در ابتدا hex هست که میتونین اون رو تغییر بدین. بصورت زیر :

با این کار کد رنگی که در خروجی تولید میشه ، بصورت rgb هست.

همچنین شما میتونین کاری کنید که رنگ های مشابه در خروجی داشته باشین. مثلا اگر شما رنگ زرد رو انتخاب کنید ، خروجی میتونه زرد کم رنگ تا پر رنگ باشه. برای این کار از خصوصیت hue استفاده میکنیم و مقدار آن را هم ، آن رنگی قرار میدیم که میخوایم رنگ های مشابه اون رو درست کنیم. مثلا کد زیر رو در نظر بگیرید :

حالا اگر خروجی رو ببینید ، رنگ سبز رنگ پایه هست و کم رنگ و پر رنگ میشه. مثل تصویر زیر :

green

بجای green ، هر رنگ دیگه ای نیز میتونین قرار بدین و رنگ های مشابه و نزدیک به اون رو در خروجی دریافت کنید.

اگر میخواید که به یکباره مثلا 20 کد رنگ در خروجی دریافت کنید ، میتونین از خصوصیت count استفاده کنید و مقدار اون رو برابر با 20 بزارین. بصورت زیر :

با این کار خروجی یک آرایه خواهد بود ، که هر عضو اون یک کد رنگ هست. این آرایه 20 عضو داره و میتونین از اون استفاده کنید.

همچنین شما میتونین مشخص کنید که رنگ تیره میخواید یا رنگ روشن. برای اینکار میتونین از خصوصیت luminosity استفاده کنید. این خصوصیت دو مقدار light و dark رو دریافت میکنه و به ترتیب رنگهای روشن و تیره رو در اختیارمون قرار میده.

مثلا کد زیر رو در نظر بگیرین :

با این کار در خروجی 27 کد رنگ در اختیارتون قرار میگیره و همشون هم رنگ های روشن هستند. خروجی به صورت زیر هست :

light

حالا اگه بخواید رنگهای تیره درست کنید ، میتونین بصورت زیر عمل کنید :

خروجی اون هم بصورت زیر هست :

dark

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

خب دوستان خسته نباشید. یا علی

comment دیدگاه کاربران
toranj71

ممنون خیلی کاربردی بود

مهسا

سلام وقتتون بخیر
واقعا ممنونم بابت مطلب مفیدتون.
جناب چطوری میشه از rgba استفاده کرد من میخوام تصویر بک گراندمو ببینم؟

محمد اسفندیاری

خواهش میکنم
میشه بیشتر توضیح بدین؟

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.