پالتهای برند مبتنی بر OKLCH. یک پایه انتخاب کنید و تمام هارمونیهای کلاسیک بهعلاوه مقیاس تونال ۵۰ تا ۹۵۰ را دریافت کنید. قفل، باز-تولید و خروجی بهصورت CSS / Tailwind v4 / SCSS / JSON.
پالتهای برند مبتنی بر OKLCH. یک پایه انتخاب کنید و تمام هارمونیهای کلاسیک بهعلاوه مقیاس تونال ۵۰ تا ۹۵۰ را دریافت کنید. قفل، باز-تولید و خروجی بهصورت CSS / Tailwind v4 / SCSS / JSON.
Color Picker & Converter ما برای یک رنگ در هر زمان است — انتخاب / تبدیل / کپی. این ابزار برای پالتها است: یک رنگ پایه وارد کنید و یک سیستم کامل آماده برای برند (هارمونیها + مقیاس تونال) را یکجا بگیرید. تفاوت بین خرید یک پیراهن و گرفتن کل کمد لباس است.
HSL طیف رنگی را بهطور ناهموار توزیع میکند (زرد در ۶۰ درجه بسیار روشنتر از آبی در ۲۴۰ درجه به نظر میرسد، حتی با مقدار روشنایی یکسان). یک پالت سهگانه در HSL یک نمونه دارد که بهطور قابل توجهی روشنتر یا کدرتر از بقیه است. OKLCH از نظر ادراکی یکنواخت است — سه نمونه در روشنایی OKLCH یکسان به نظر روشنایی یکسانی دارند. به همین دلیل است که هر سیستم طراحی مدرن (Apple HI، Tailwind v4، IBM Carbon) برای هارمونیها و مقیاسها به سمت OKLCH میرود.
رنگهای برند شما هرگز از دستگاه شما خارج نمیشوند. DevTools → Network را باز کنید و در طول هر عملیاتی هیچ درخواست خروجی نخواهید دید.
نکته: کلید Space را برای باز-تولید نمونههای قفلنشده فشار دهید.
هارمونیهای OKLCH، مقیاسهای تونال، قفل و باز-تولید، خروجی توکن طراحی — بهعلاوه چند نکته کوچک که استفاده از آن را واقعاً سرگرمکننده میکند.
مکمل، مشابه، سهگانه، چهارگانه، مکمل-تقسیمشده، تکفام — همه در OKLCH محاسبه میشوند تا یک پالت سهگانه از سه رنگ روشن اشباعشده بهطور یکنواخت روشن باقی بماند. بدون گلآلودگی HSL.
رنگ برند خود را وارد کنید و یک مقیاس تونال به شکل Tailwind 50, 100, 200, … 900, 950 دریافت کنید که با حرکت روشنایی در یک منحنی OKLCH تولید میشود. کرومای رنگ در حد بیرونی فشرده میشود تا رنگها در گاموت sRGB باقی بمانند.
هر نمونهای را پین کنید (آیکون قفل) و باز-تولید را بزنید (یا فقط Space را فشار دهید) تا بقیه در داخل هارمونی انتخابشده تغییر کنند. سریع تکرار کنید، آنچه را دوست دارید نگه دارید.
CSS custom properties (--brand-500)، بلوک Tailwind v4 @theme، SCSS map، و توکنهای طراحی JSON آماده برای Style Dictionary / Figma Tokens. بهعلاوه یک نوار نمونه PNG با ابعاد ۱۲۰۰×۲۰۰.
هر نمونه نسبت کنتراست WCAG خود را در برابر بهترین گزینه میان سیاه یا سفید نشان میدهد، با نشان AA / AAA / fail. مشکلات دسترسیپذیری را پیش از انتشار شناسایی کنید.
هر بایت روی دستگاه شما باقی میماند. ریاضیات OKLCH، تولید هارمونی، استخراج مقیاس و خروجی PNG همه بهصورت محلی بهعنوان JavaScript اجرا میشوند. DevTools → Network را باز کنید و عدم وجود هر درخواست خروجی را تأیید کنید.
چهار گام از یک رنگ پایه تا یک پالت کامل آماده برای توکن طراحی.
روی جعبه رنگ کلیک کنید، یک HEX را paste کنید، یا برای الهام پایه تصادفی را بزنید. این ابزار کل پالت را روی این رنگ متمرکز میکند — هم نمونههای هارمونی و هم مقیاس تونال ۱۱ گامی.
پیشفرض مشابه است — سه رنگ در فاصله ۳۰ درجه از پایه، عالی برای پالتهای آرام برند. مکمل برای تأکیدهای پر کنتراست. سهگانه / چهارگانه برای برندهای تحریریهای / بازیگوش. تکفام برای سیستمهای تکرنگ تونال. همه در OKLCH محاسبه میشوند تا بهطور یکنواخت روشن باقی بمانند.
روی آیکون قفل هر نمونهای که میخواهید نگه دارید کلیک کنید، سپس Space را فشار دهید (یا باز-تولید را بزنید) تا بقیه در داخل هارمونی تغییر کنند. سریع تکرار کنید. اگر میخواهید مقدار دقیقی را ثبت کنید، با کلیک روی فیلد HEX هر نمونه آن را مستقیماً ویرایش کنید.
خروجی CSS (custom properties)، Tailwind v4 (بلوک @theme)، SCSS map، یا توکنهای طراحی JSON را کپی کنید. یا دانلود PNG را بزنید تا یک نوار نمونه ۱۲۰۰×۲۰۰ آماده برای قرار دادن در یک design brief داشته باشید.
چهار سناریوی متداول که در آن یک ابزار پالت OKLCH با اولویت حریم خصوصی، از تنظیم دستی کدهای hex در Figma بهتر عمل میکند.
یک رنگ برند دارید و به یک سیستم پیرامون آن نیاز دارید. HEX را وارد کنید، Analogous را انتخاب کنید، باز-تولید کنید تا دو رنگ پشتیبان جور در بیاید، هر سه را قفل کنید. به نمای Tonal Scale سوئیچ کنید، بلوک Tailwind @theme را کپی کنید، در app.css پروژه جدید paste کنید. زمان کل: ۵ دقیقه.
indigo پیشفرض Tailwind برند شما نیست. برند شما #5B3FCD است. آن را وارد کنید و یک مقیاس تونال ۱۱ گامی دریافت کنید که کاملاً با spacing های Tailwind هماهنگ است. بلوک @theme را کپی کنید — هر bg-brand-500 / text-brand-700 همانطور کار میکند.
هر نمونه نسبت کنتراست WCAG + نشان AA/AAA خود را نشان میدهد. بررسی کنید که brand-500 در برابر سفید AA را میگیرد و brand-100 بهعنوان یک پسزمینه روشن همراه با متن brand-900 خوانا باقی میماند. نمونههای مشکلدار را با باز-تولید جداگانه آنها برطرف کنید.
آژانسها / شرکتهای چندبرندی N سیستم طراحی موازی را نگهداری میکنند، هرکدام با شکلی یکسان اما رنگ برند متفاوت. از همان جریان کاری هارمونی + مقیاس تونال برای هر برند استفاده کنید، هرکدام را بهصورت توکن JSON خروجی بگیرید و در Style Dictionary بگذارید. شکل ثابت، هویت متمایز.
رنگهای برند شما هرگز از دستگاه شما خارج نمیشوند. DevTools → Network را باز کنید و در طول هر عملیاتی هیچ درخواست خروجی نخواهید دید.
canvas محلی استفاده میکند؛ تصویر نمونه بهطور کامل در حافظه مرورگر تولید و بهصورت یک Blob دانلود میشود — هیچ چیز از شبکه عبور نمیکند.
مطالعات منتخب درباره پالتهای OKLCH، سیستمهای رنگ برند و توکنهای طراحی.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Color Picker & Converter ما برای یک رنگ در هر زمان است — انتخاب / تبدیل / کپی. این ابزار برای پالتها است: یک رنگ پایه وارد کنید و یک سیستم کامل آماده برای برند (هارمونیها + مقیاس تونال) را یکجا بگیرید. تفاوت بین خرید یک پیراهن و گرفتن کل کمد لباس است.
HSL طیف رنگی را بهطور ناهموار توزیع میکند (زرد در ۶۰ درجه بسیار روشنتر از آبی در ۲۴۰ درجه به نظر میرسد، حتی با مقدار روشنایی یکسان). یک پالت سهگانه در HSL یک نمونه دارد که بهطور قابل توجهی روشنتر یا کدرتر از بقیه است. OKLCH از نظر ادراکی یکنواخت است — سه نمونه در روشنایی OKLCH یکسان به نظر روشنایی یکسانی دارند. به همین دلیل است که هر سیستم طراحی مدرن (Apple HI، Tailwind v4، IBM Carbon) برای هارمونیها و مقیاسها به سمت OKLCH میرود.
مقیاس رنگ برند به سبک Tailwind است: indigo-50 (روشنترین)، indigo-100، indigo-200، … indigo-900، indigo-950 (تیرهترین). رنگ برند خود را وارد کنید و ابزار بهطور خودکار با حرکت روشنایی OKLCH روی یک منحنی ثابت، تمام ۱۱ گام را تولید میکند. نتیجه یک جایگزین مستقیم برای هر توکن پالت Tailwind در رنگ برند شما است.
آیکون قفل در گوشه بالا-چپ هر نمونه را کلیک کنید — همانجا میماند. سپس باز-تولید را بزنید یا Space را فشار دهید تا هر نمونه قفلنشده در داخل هارمونی انتخابشده تغییر کند. این روشی است برای پیدا کردن یک پالت عالی: رنگ برندی را که قبلاً به آن متعهد شدهاید پین کنید و حول آن گزینهها را کاوش کنید.
خیر. ریاضیات OKLCH، تولید هارمونی، استخراج مقیاس تونال، محاسبه نسبت کنتراست، خروجی PNG و هر کپی روی کلیپبورد — همه بهصورت JavaScript روی دستگاه شما اجرا میشوند. DevTools → Network را باز کنید و عدم وجود هر درخواست خروجی را خواهید دید. رنگهای برند، توکنهای طراحی داخلی و پالتهای قفلشده با NDA را paste کنید — هیچ چیز از لپتاپ شما خارج نمیشود.