Color Picker

رنگ ها را بردارید و مستقیم سرِ کار بروید — بی دردسر

Color Picker را در ۲۰۲۵ ساختیم چون از اپ های سنگین و ابزارهای رنگِ پیچیده خسته شده بودیم. به عنوان توسعه دهندهٔ فرانت اند و تصویرگر، چیزی می خواستیم تا رنگی را سریع بگیریم، کمی دست کاری کنیم و ادامه دهیم. از یک ابزار داخلی شروع شد، بین همکاران محبوب شد، و آن را پرداختیم و برای همه روی وب گذاشتیم. بدونِ حساب کاربری، بدونِ منحنیِ یادگیری — صفحه را باز کنید، تون را برگزینید و کدهای HEX، RGB، HSL یا HSV را کپی کنید.

چرا انتخاب گرِ رنگِ ما محبوب است؟

اگر پیشِ طراحی ای مانده اید و فکر کرده اید چطور تونِ دقیق را به دست آورید، سادگیِ Color Picker را می ستایید. عمداً رابط را مینیمال نگه داشته ایم:

• کلیک کنید و رنگ را بگیرید — هر جای پالت که بزنید، ابزار فوراً مقادیرِ لازم را نشان می دهد. نمونه از عکس یا اسکرین شات می خواهید؟ فایل را روی صفحه رها کنید و از قطره چکان استفاده کنید.
• گرادیان ها، ساده — با افزودن و جابه جا کردنِ استاپ ها روی نوار، گذارهایی ابریشمی بسازید. خطی/شعاعی را جابه جا کنید، زاویه و شفافیت را تنظیم کنید و CSS را کپی کنید.
• بی محدودیت و بی هزینه — Color Picker در هر مرورگرِ مدرن روی دسکتاپ، تبلت یا گوشی اجرا می شود. چیزی برای نصب نیست و هزینه ای ندارد.
• افزونه ها، هر وقت لازم شد — افزونه های اختیاری Chrome و Edge قطره چکان را مستقیم به مرورگر می آورند تا از هر صفحه نمونه گیری کنید و تاریخچه تان را همراه داشته باشید.

به چه درد می خورد

کاربران Color Picker را به شکل های گوناگون به کار می گیرند:

• طراحان و تیم های محصول هنگام اسکچ رابط ها یا پالت های برند از آن استفاده می کنند. بررسیِ ترکیب ها و کپیِ CSSِ لازم برای گرادیان ها سریع است.
• تصویرگران و هنرمندان با قطره چکان از عکس ها و نقاشی ها الهام می گیرند. ابزار گرادیان به برنامه ریزیِ سایه زنیِ نرم و گذارهای رنگ کمک می کند.
• توسعه دهندگان فرانت اند برای تولیدِ مقادیرِ رنگِ سازگار میان پروژه ها به آن تکیه می کنند. افزونه، نمونه گیری از سایت های موجود را بی دردسر می کند.
• هرکسی که دسترس پذیری را می سنجد می تواند رنگ ها را در مدل های مختلف ببیند و شفافیت را تا برآورده شدنِ راهنماهای کنتراست تنظیم کند.

شروع کار

به راهنما نیاز نیست — این هم یک مرورِ سریع:

• یک رنگ انتخاب کنید — هر کجا در پالت کلیک کنید. فوراً مقادیر HEX، RGB و HSV را می بینید. با لغزنده ها تون، اشباع، روشنایی و شفافیت را ریزتنظیم کنید.
• نمونه گیری از تصویر — یک فایلِ تصویر را روی صفحه بکشید یا انتخاب کنید. روی پیکسلِ موردنظر کلیک کنید تا کدهای رنگ نمایش داده شوند.
• ساختِ گرادیان — روی نوارِ گرادیان کلیک کنید تا استاپ اضافه کنید و آن ها را جابه جا کنید؛ بین سبک های خطی و شعاعی جابه جا شوید. زاویه و شفافیت را تا رسیدن به نتیجهٔ مطلوب تنظیم کنید.
• کپی و استفادهٔ دوباره — رنگ ها و گرادیان های شما به طور خودکار ذخیره می شوند. کدها یا CSS را کپی و در پروژه بچسبانید، یا با تیم به اشتراک بگذارید.