نحوه استفاده
- یک رنگ پایه وارد کنید یا انتخاب کنید. «رنگ پایه تصادفی جدید» یکی برایتان انتخاب می‌کند.
- یک هارمونی انتخاب کنید. «سایه‌ها و تُن‌های روشن» مقیاسی ۱۱ مرحله‌ای از خیلی روشن تا خیلی تیره می‌سازد.
- هر رنگی را که می‌خواهید نگه دارید قفل کنید، سپس به جست‌وجوی رنگ‌های پایه دیگر ادامه دهید.
- HEX، ویژگی‌های سفارشی CSS یا JSON را انتخاب کنید، یک نام تعیین کنید و کد را کپی کنید.
نحوه کار
هارمونی‌ها با چرخش فام (hue) روی چرخه رنگ به دست می‌آیند: مکمل فام مقابل را اضافه می‌کند (۱۸۰ درجه)، مشابه، همسایه‌های ۳۰ و ۶۰ درجه‌ای هر طرف را اضافه می‌کند، سه‌گانه از سه فام با فاصله ۱۲۰ درجه، چهارگانه از چهار فام با فاصله ۹۰ درجه، و مکمل گسسته از دو فام کنار مکمل (۱۵۰ و ۲۱۰ درجه) استفاده می‌کند.
چرخش در OKLCH انجام می‌شود، نه در HSL. OKLCH روشنایی ادراکی را ثابت نگه می‌دارد؛ بنابراین زرد و آبی در یک پالت به‌طور مشابهی روشن دیده می‌شوند، نه اینکه زرد چشم بزند. وقتی رنگ چرخانده‌شده بیرون از محدوده قابل نمایش sRGB باشد، خلوص رنگ آن را کاهش می‌دهیم تا جا بگیرد و روشنایی و فام حفظ شود.
مقیاس سایه‌ها و تهرنگ‌ها از گام‌های روشنایی ثابت OKLCH با نام‌های ۵۰ تا ۹۵۰ استفاده می‌کند، شبیه به نام‌گذاری Tailwind CSS، با خلوص رنگ کاهش‌یافته نزدیک سفید و سیاه تا روشن‌ترین تهرنگ‌ها نئونی دیده نشوند. هارمونی‌ها نقطه شروع هستند: پیش از استفاده برای محتوا، جفت‌های متن و پس‌زمینه را با ابزار بررسی کنتراست بررسی کنید.
نمونه‌ها
یک رنگ برند با یک رنگ تأکیدی
پایه #3366cc با «مکمل» رنگ #8c6500 را اضافه می‌کند؛ یک اخرایی گرم با همان روشنایی OKLCH. جفت‌های آبی و نارنجی-زرد انتخاب رایجی برای رنگ تأکیدی در کنار برند آبی هستند.
توکن‌های طراحی برای یک کتابخانه کامپوننت
«سایه‌ها و تهرنگ‌ها» را انتخاب کنید، نام را روی «primary» بگذارید و متغیرهای CSS را خروجی بگیرید. --primary-50 تا --primary-950 را دریافت می‌کنید؛ آماده برای پس‌زمینه‌ها (۵۰–۱۰۰)، حاشیه‌ها (۲۰۰–۳۰۰) و متن (۷۰۰–۹۰۰).
نگه‌داشتن یک رنگ هنگام بررسی
رنگ دوم یک پالت سه‌گانه را قفل کنید، سپس رنگ‌های پایه متفاوت را امتحان کنید. نمونه قفل‌شده مقدار HEX خود را حفظ می‌کند در حالی که بقیه تغییر می‌کنند.
پرسش‌های متداول
چرا رنگ‌های من با ابزار چرخ رنگ HSL تفاوت دارند؟
این ابزار فام را در OKLCH، یک فضای رنگی ادراکی، می‌چرخاند. زوایای فام آن دقیقاً با HSL منطبق نیستند؛ بنابراین «مکمل» یک رنگ ممکن است کمی با نتیجه‌ای که ابزار HSL می‌دهد متفاوت باشد.
آیا می‌توانم از JSON در Tailwind CSS استفاده کنم؟
JSON نام‌ها را به مقادیر HEX نگاشت می‌کند؛ همان ساختاری که Tailwind برای یک رنگ در پیکربندی تم می‌پذیرد. در Tailwind 4 همچنین می‌توانید متغیرهای CSS را پس از تغییر نام به --color-… در یک بلوک @theme جای‌گذاری کنید.
آیا پالت‌های تولیدشده دسترس‌پذیر هستند؟
نه به‌صورت خودکار. یک هارمونی هیچ اطلاعاتی درباره کنتراست بین متن و پس‌زمینه نمی‌دهد. هر جفتی را که قصد استفاده دارید با Contrast Checker بررسی کنید.
حریم خصوصی
پالت‌ها در مرورگر شما تولید می‌شوند. رنگ‌های شما به جایی ارسال یا ذخیره نمی‌شوند.