‏Color.js؛ کتابخانه‌ای برای کار جدی با رنگ

Color.js خودش رو کتابخانه‌ای معرفی می‌کنه که کارهای ساده رو آسون و کارهای پیچیده رو ممکن می‌کنه. کارنامه‌ش هم کم نیست: بیش از ۲۴۱ میلیون دانلود از npm، استفاده در ساخت دموی چند مشخصات W3C، و به‌کارگیری توسط مرورگرها برای تست پیاده‌سازی CSS Color 4/5. پروژه‌هایی مثل Sass، Open Props و موتور تست دسترسی‌پذیری axe بهش وابسته‌ان، و بخش‌هایی از APIش داره به‌عنوان زمین آزمایش طراحی یه شیء Color بومی برای پلتفرم وب استفاده می‌شه.

نصبش چند مسیر داره. برای آزمایش سریع می‌شه مستقیم از یه CDN مثل esm.sh با همهٔ ماژول‌ها ایمپورتش کرد، یا از راه npm نصبش کرد. نکتهٔ مفیدش اینه که چه از npm استفاده کنی چه از CDN، می‌تونی فقط ماژول‌های موردنیازت رو مستقیم از مسیر src بیاری — مثلاً فقط فضای رنگی p3 یا فقط تابع deltaE2000 — تا حجم اضافی برنداری.

برای خوندن رنگ، هر مقداری که CSS Color Level 4 قبول داره کار می‌کنه: از نام‌های ساده گرفته تا hwb()، lch() و color(display-p3 ...). می‌شه شیء Color رو دستی هم ساخت، با دادن نام فضا، آرایهٔ مختصات و مقدار آلفا.

دستکاری رنگ جاییه که کتابخانه واقعاً می‌درخشه. مختصات هر فضای رنگی به‌شکل پراپرتی در دسترسه، حتی اگه رنگ تو فضای دیگه‌ای تعریف شده باشه:

let color = new Color("slategray");
color.lch.l = 80;
color.lch.c *= 1.2;
color.hwb.w += 10;

کنارش متد set() هم هست که هم مقدار مطلق می‌گیره و هم تابع، یعنی می‌تونی تغییر نسبی بدی. اگه رنگ رو اول با to("lch") ببری، مختصات همون فضا بدون پیشوند در دسترسن. برای خروجی هم to() رنگ رو به هر فضایی می‌بره و toString() گزینه‌هایی مثل دقت اعشار و رفتار خارج از گاموت داره: به‌طور پیش‌فرض رنگ به گاموت مقصد کلیپ می‌شه، ولی با inGamut: false می‌تونی مقدار خام رو بگیری.

بخش درون‌یابی چند شکل داره. range() یه تابع برمی‌گردونه که درصد می‌گیره و رنگ متناظر رو می‌ده، با امکان تعیین جداگانهٔ فضای درون‌یابی و فضای خروجی:

let color = new Color("p3", [0, 1, 0]);
let redgreen = color.range("red", { space: "lch", outputSpace: "srgb" });
redgreen(.5);

اگه پله‌های گسسته بخوای steps() هست که با maxDeltaE حداکثر اختلاف ادراکی بین دو پلهٔ پیاپی رو کنترل می‌کنه، و برای نقطه‌های مشخص هم mix() میان‌بر خوبیه. هر متد نسخهٔ استاتیک هم داره.

جدا از خود کتابخانه، سه ابتکار دیگه هم زیر همین چتر هست که تیم می‌گه هنوز آزمایشی‌ان: Color Elements با حدود ۱۰ وب‌کامپوننت رنگی مثل کالر پیکر و نمودار رنگ، مجموعهٔ Color Apps، و پروژهٔ پژوهشی Color Palettes که پالت‌های ساختهٔ طراح‌ها رو در فضاهای مختلف تحلیل می‌کنه. پروژه رو یه تیم کوچک داوطلب نگه می‌داره — از جمله Lea Verou و Chris Lilley — و تازگی برای تأمین مالی توسعه‌ش یه Open Collective راه انداخته‌ن.

نکات کلیدی:

• خوندن هر رنگ معتبر CSS Color 4 و تبدیل بین فضاهای مدرن
• تغییر مستقیم مختصات هر فضا، حتی وقتی رنگ تو فضای دیگه تعریف شده
• درون‌یابی با range() و steps() و کنترل اختلاف ادراکی با maxDeltaE
• امکان ایمپورت فقط ماژول‌های لازم برای کم‌کردن حجم
• بیش از ۲۴۱ میلیون دانلود npm و استفاده در Sass، Open Props و axe