ابزارهای رنگ ToolDeck به شما امکان میدهند بین فرمتهای رنگ تبدیل کنید، نسبتهای کنتراست دسترسیپذیری را بررسی کنید، پالت بسازید، گرادیانهای CSS ایجاد کنید، و نام رنگها یا کلاسهای Tailwind را مستقیماً در مرورگر خود جستجو کنید. تبدیلگر رنگ از HEX، RGB، HSL و HSV در هر دو جهت پشتیبانی میکند. بررسیکننده کنتراست، انطباق WCAG 2.1 AA و AAA را آزمایش میکند. پالتساز طرحهای مکمل، مشابه، سهگانه و چهارگانه را از هر رنگ پایهای میسازد. سازنده گرادیان CSS کد گرادیان خطی و شعاعی آماده برای کپی را خروجی میدهد. یاب نام رنگ هر مقداری را به نزدیکترین رنگ نامدار CSS تطبیق میدهد، و یاب رنگ Tailwind رنگهای دلخواه را به کلاسهای ابزار Tailwind نگاشت میکند. همه ابزارها در سمت کلاینت اجرا میشوند و هیچ دادهای به هیچ سروری ارسال نمیشود.
ابزارهای رنگ چیستند؟
ابزارهای رنگ، ابزار کمکی هستند که به توسعهدهندگان و طراحان کمک میکنند با مقادیر رنگ دیجیتال کار کنند. هر رنگی روی صفحه به صورت اعداد ذخیره میشود: سه کانال برای RGB (قرمز، سبز، آبی)، یک سهتایی هگزادسیمال برای CSS، یا زاویه رنگ به علاوه اشباع و روشنایی برای HSL. جابجایی بین این نمایشها به صورت دستی کند و مستعد خطاست، به خصوص وقتی باید شفافیت آلفا یا مدلهای جدیدتر مانند OKLCH را هم در نظر بگیرید.
فراتر از تبدیل فرمت، کار با رنگ شامل آزمایش دسترسیپذیری، ساخت پالت و طراحی گرادیان میشود. WCAG 2.1 حداقل نسبتهای کنتراست را تعریف میکند (4.5:1 برای متن معمولی در AA، 7:1 برای AAA) که تأیید بصری آنها دشوار است. ایجاد طرحهای رنگی هماهنگ نیاز به محاسبات زاویه دقیق روی چرخه رنگ HSL دارد. گرادیانهای CSS به سینتکس درست برای جهت، توقفگاههای رنگ و مقادیر پشتیبان نیاز دارند. انجام هر یک از این کارها به صورت دستی در یک سیستم طراحی با دهها توکن به سرعت خستهکننده میشود.
ابزارهای رنگ این وظایف را خودکار میکنند. آنها یک رنگ را در یک فرمت دریافت میکنند، محاسبات را انجام میدهند و نتیجه مورد نیاز را برمیگردانند؛ چه یک مقدار تبدیلشده باشد، چه نتیجه قبول/رد دسترسیپذیری، چه مجموعهای از نمونه رنگهای هماهنگ، یا یک قطعه کد CSS. وقتی ابزار در مرورگر اجرا میشود، از آپلود توکنهای طراحی حساس به سرویسهای شخص ثالث هم جلوگیری میکنید.
چرا از ابزارهای رنگ ToolDeck استفاده کنیم؟
ابزارهای رنگ ToolDeck کاملاً در مرورگر شما اجرا میشوند. هیچ مقدار رنگی دستگاه شما را ترک نمیکند، نیازی به حساب کاربری نیست و هر ابزار بدون نصب افزونه یا نرمافزار دسکتاپ فوری بارگذاری میشود.
🎨تبدیل فرمت در یک مرحله
یک کد HEX را بچسبانید و همزمان مقادیر RGB، HSL و HSV دریافت کنید. نیازی به زنجیر کردن چند تبدیلکننده یا به خاطر سپردن فرمولهای تبدیل نیست.
🔒حفظ محرمانگی توکنهای طراحی
تمام پردازش در سمت کلاینت انجام میشود. رنگهای برند شما، تصمیمات پالت منتشرنشده و مقادیر سیستم طراحی داخلی روی دستگاه شما باقی میمانند.
♿آزمایش فوری دسترسیپذیری
هر جفت پیشزمینه/پسزمینه را در برابر آستانههای WCAG 2.1 AA و AAA برای متن معمولی و بزرگ بررسی کنید. نسبت کنتراست دقیق را بگیرید، نه فقط یک برچسب قبول/رد.
⚡کپی خروجی آماده برای تولید
هر ابزار مقادیری را خروجی میدهد که میتوانید مستقیماً در CSS، تنظیمات Tailwind یا فیلدهای ورودی ابزار طراحی بچسبانید. نیازی به فرمتبندی مجدد نیست.
موارد استفاده ابزارهای رنگ
در ادامه شش سناریوی رایج آمده که ابزارهای رنگ ToolDeck در آنها وقت صرفهجویی میکنند.
نگهداری سیستم طراحی
هنگام بهروزرسانی یک سیستم طراحی، اغلب رنگها را از طراح به صورت HEX دریافت میکنید اما برای ویژگیهای CSS سفارشی به HSL نیاز دارید.
تبدیلگر رنگ بین فرمتها ترجمه میکند تا بتوانید فایلهای توکن را بدون محاسبه دستی پر کنید.
ممیزی دسترسیپذیری
در طول یک ممیزی انطباق WCAG، هر ترکیب متن/پسزمینه باید حداقل نسبتهای کنتراست را برآورده کند.
بررسیکننده کنتراست رنگ نسبت دقیق و وضعیت قبولی AA/AAA را برای اندازههای متن معمولی و بزرگ نشان میدهد.
کشف پالت برند
با شروع از یک رنگ برند واحد، به متغیرهای تأکیدی و خنثی نیاز دارید.
پالتساز رنگ هماهنگیهای مکمل، مشابه، سهگانه و چهارگانه را محاسبه میکند تا بتوانید گزینهها را قبل از انتخاب یک پالت ارزیابی کنید.
استایلدهی پسزمینه CSS
ساخت یک بخش هیرو یا پسزمینه کارت با گرادیان به سینتکس درست CSS برای زوایا، توقفگاههای رنگ و پیشوندهای فروشنده نیاز دارد.
سازنده گرادیان CSS به شما امکان میدهد گرادیان را به صورت بصری بسازید و کد را کپی کنید.
مهاجرت به Tailwind
هنگام مهاجرت یک پروژه به Tailwind CSS، باید مقادیر HEX یا RGB موجود را به نزدیکترین کلاس ابزار Tailwind نگاشت کنید.
یاب رنگ Tailwind نزدیکترین تطابق را پیدا میکند و اختلاف را نشان میدهد تا بتوانید تصمیم بگیرید آیا تقریب قابل قبول است.
بازبینی کد و مستندسازی
در طول بازبینی کد، یک مقدار HEX خام مثل #708090 در نگاه اول معنایی ندارد.
یاب نام رنگ آن را به عنوان SlateGray شناسایی میکند و بازبینیها و مستندات را خواناتر میکند.
مرجع مدل رنگ CSS
CSS از چندین مدل رنگ پشتیبانی میکند. جدول زیر شش فرمت رایج، سینتکس آنها و موارد استفاده معمول را خلاصه میکند. همه اینها توسط تبدیلگر رنگ ToolDeck پشتیبانی میشوند.
| مدل | سینتکس CSS | کانالها | بازه مقدار | کاربرد معمول |
|---|
| HEX | #rrggbb | قرمز، سبز، آبی | 00–ff به ازای هر کانال | رایجترین در CSS، تحویل طراحی، راهنماهای برند |
| RGB | rgb(r, g, b) | قرمز، سبز، آبی | 0–255 به ازای هر کانال | canvas API جاوااسکریپت، استایلهای محاسبهشده، پردازش تصویر |
| HSL | hsl(h, s%, l%) | فام، اشباع، روشنایی | 0–360 / 0–100% / 0–100% | توکنهای طراحی، تولید تم، متغیرهای سایه برنامهنویسی |
| HSV | N/A (not in CSS) | فام، اشباع، ارزش | 0–360 / 0–100% / 0–100% | انتخابکنندههای رنگ (Photoshop، Figma)، کالیبراسیون رنگ سختافزار |
| OKLCH | oklch(L C H) | روشنایی، کروما، فام | 0–1 / 0–0.4 / 0–360 | پالتهای یکنواخت ادراکی (مشخصات CSS Color Level 4) |
| Named | e.g. slategray | به صورت داخلی به RGB نگاشت میشود | 148 نام از پیش تعریفشده | نمونهسازی سریع، کد خوانا، نمایشهای سریع |
CSS Color Level 4 (W3C) همچنین توابع lab()، lch() و color() را تعریف میکند. HEX و RGB همچنان بیشترین پشتیبانی را در مرورگرها و ابزارهای طراحی دارند.
چگونه ابزار رنگ مناسب را انتخاب کنیم
هر ابزار رنگ مشکل متفاوتی را حل میکند. از راهنمای زیر برای یافتن ابزار مناسب برای کارتان استفاده کنید.
- 1
اگر نیاز دارید رنگ را بین فرمتهای HEX، RGB، HSL یا HSV تبدیل کنید → تبدیلگر رنگ - 2
اگر نیاز دارید تأیید کنید که یک جفت رنگ متن/پسزمینه استانداردهای دسترسیپذیری WCAG را برآورده میکند → بررسیکننده کنتراست رنگ - 3
اگر نیاز دارید مجموعهای از رنگهای هماهنگ از یک رنگ پایه واحد تولید کنید → پالتساز رنگ - 4
اگر نیاز دارید یک گرادیان CSS خطی یا شعاعی بسازید و کد را بگیرید → سازنده گرادیان CSS - 5
اگر نیاز دارید نام CSS خوانا توسط انسان نزدیک به یک مقدار رنگ دادهشده را پیدا کنید → یاب نام رنگ - 6
اگر نیاز دارید یک رنگ دلخواه را به نزدیکترین کلاس ابزار Tailwind CSS نگاشت کنید → یاب رنگ Tailwind
هر شش ابزار ورودی را در فرمتهای مختلف قبول میکنند. اگر مطمئن نیستید رنگتان در چه فرمتی است، با تبدیلگر رنگ شروع کنید که به صورت خودکار نمادگذاری HEX، RGB، HSL و HSV را تشخیص میدهد.
سوالات متداول
تفاوت بین فرمتهای رنگ HEX و RGB چیست؟
HEX و RGB فضای رنگ یکسانی را نشان میدهند. یک کد HEX مثل #ff6600 رمزگذاری هگزادسیمال سه کانال RGB است: ff = 255 (قرمز)، 66 = 102 (سبز)، 00 = 0 (آبی). تنها تفاوت نمادگذاری است. HEX در صفحات CSS فشردهتر است، در حالی که RGB دستکاری برنامهنویسانه آسانتری دارد چون هر کانال از پیش یک عدد صحیح اعشاری است.
چه زمانی باید از HSL به جای HEX یا RGB استفاده کنم؟
HSL فام (خود رنگ) را از اشباع و روشنایی جدا میکند. این ایجاد متغیرهای سایه را آسانتر میکند: فام را ثابت نگه دارید، روشنایی را برای سایه تیرهتر کاهش دهید، و برای رنگ روشنتر افزایش دهید. سیستمهای طراحی که تمهای روشن/تاریک را از یک رنگ پایه واحد تولید میکنند اغلب به همین دلیل توکنها را در HSL ذخیره میکنند. ویژگیهای سفارشی CSS هم با HSL خوب ترکیب میشوند چون میتوانید کانالهای جداگانه را لغو کنید.
WCAG 2.1 چه نسبت کنتراستی برای متن نیاز دارد؟
WCAG 2.1 سطح AA حداقل نسبت کنتراست 4.5:1 برای متن معمولی (زیر 18pt یا 14pt پررنگ) و 3:1 برای متن بزرگ (18pt+ یا 14pt+ پررنگ) نیاز دارد. سطح AAA این آستانهها را به ترتیب به 7:1 و 4.5:1 افزایش میدهد. این نسبتها از روشنایی نسبی رنگهای پیشزمینه و پسزمینه با استفاده از فرمول تعریفشده در معیار موفقیت 1.4.3 WCAG 2.1 محاسبه میشوند.
CSS از چند رنگ نامدار پشتیبانی میکند؟
CSS 148 رنگ نامدار تعریف میکند که از مشخصات رنگ SVG 1.1 و CSS3 به ارث رسیدهاند. اینها از نامهای رایج مثل red، blue و white تا نامهای خاص مثل MediumSlateBlue، PapayaWhip و LavenderBlush متفاوتند. رنگهای نامدار به مقادیر RGB ثابت نگاشت میشوند. مشخصات CSS Color Level 4 همان 148 نام را حفظ میکند و نام جدیدی اضافه نمیکند. مرورگرها همچنین کلیدواژه transparent را میشناسند (معادل rgba(0,0,0,0)).
آیا میتوانم امروز از رنگهای OKLCH در CSS استفاده کنم؟
بله. تابع oklch() در Chrome 111+، Firefox 113+ و Safari 15.4+ پشتیبانی میشود. OKLCH بخشی از مشخصات CSS Color Level 4 منتشرشده توسط W3C است. مزیت اصلی آن نسبت به HSL یکنواختی ادراکی است: دو رنگ با مقدار روشنایی یکسان در OKLCH واقعاً به یک اندازه روشن به چشم انسان میرسند، که برای HSL صادق نیست. این OKLCH را برای تولید پالتهای دسترسیپذیر با درخشندگی ادراکی یکسان انتخاب بهتری میکند.
تفاوت بین HSL و HSV چیست؟
HSL و HSV هر دو از نمایش استوانهای با فام به عنوان زاویه استفاده میکنند، اما درخشندگی را متفاوت تعریف میکنند. در HSL، روشنایی 50% رنگ خالص است؛ 0% سیاه و 100% سفید است. در HSV، ارزش 100% رنگ خالص است؛ 0% سیاه است. HSV راه داخلی برای رسیدن به سفید بدون کاهش اشباع ندارد. طراحان و انتخابکنندههای رنگ (Photoshop، Figma) معمولاً از HSV استفاده میکنند، در حالی که CSS به صورت بومی از HSL استفاده میکند.
چگونه کلاس Tailwind را برای یک رنگ HEX دلخواه پیدا کنم؟
Tailwind CSS با یک پالت ثابت از حدود 220 کلاس رنگ (22 فام ضربدر 10 سایه هر کدام، به علاوه سیاه، سفید و شفاف) عرضه میشود. برای یافتن نزدیکترین کلاس به یک مقدار HEX دادهشده، فاصله اقلیدسی در یک فضای رنگ ادراکی (مثل CIELAB یا OKLCH) بین رنگ شما و هر نمونه رنگ Tailwind را محاسبه میکنید. یاب رنگ Tailwind در ToolDeck این کار را به صورت خودکار انجام میدهد و نزدیکترین تطابق را همراه با اختلاف رنگ نشان میدهد تا بتوانید قضاوت کنید آیا تقریب کافی است.
آیا چسباندن رنگهای محرمانه برند در یک ابزار آنلاین ایمن است؟
بستگی به ابزار دارد. هر ابزاری که ورودی شما را به سروری ارسال کند آن مقادیر را در ترافیک شبکه و گزارشهای سرور افشا میکند. ابزارهای رنگ ToolDeck کاملاً در مرورگر شما با استفاده از جاوااسکریپت سمت کلاینت اجرا میشوند. هیچ درخواست HTTP داده رنگ شما را به هیچ سرور پشتیبانی منتقل نمیکند. میتوانید این را با باز کردن تب Network مرورگر خود در حین استفاده از ابزار تأیید کنید. برای احتیاط حداکثری، میتوانید پس از بارگذاری اولیه صفحه، ابزارها را به صورت آفلاین هم استفاده کنید.