تبدیل رنگ HEX‏، RGB و HSL و بررسی کنتراست WCAG

ابزار بالای صفحه دو راه ورود دارد. می‌توانید روی مربع رنگی کنار کادر کلیک کنید و با پنجرهٔ بومی سیستم‌عامل رنگ را برگزینید، یا کد رنگ را مستقیم در کادر بنویسید یا بچسبانید. کادر هر شکل رایجی را می‌پذیرد: HEX سه، چهار، شش یا هشت‌رقمی با یا بدون #، تابع‌های rgb و hsl با کاما یا با نحو جدید CSS که مقادیر را با فاصله جدا می‌کند، و نام رنگ‌های CSS مثل navy یا rebeccapurple. ارقام فارسی هم خودکار به لاتین تبدیل می‌شوند. اگر ورودی قابل‌فهم نباشد، دلیلش زیر کادر نوشته می‌شود؛ مثلاً اینکه کد HEX پنج رقم دارد و احتمالاً رقمی جا افتاده است.

کنار کادرها رنگ روی دو زمینهٔ سفید و تیره نمایش داده می‌شود و زیر آن ردیف‌های HEX‏، RGB‏، HSL‏، HSB و متغیر CSS با دکمهٔ کپی قرار دارند. نسبت کنتراست رنگ با سفید و سیاه هم همان‌جا نوشته شده تا بدانید متن روشن یا تیره روی آن خواناتر است. با لغزندهٔ شفافیت، آلفا را تغییر دهید تا خروجی‌ها به RGBA‏، HSLA و HEX هشت‌رقمی تبدیل شوند. دو دکمهٔ پایین، رنگ را به بخش بررسی کنتراست می‌فرستند.

تبدیل HEX به RGB ساده است: کد را دوبه‌دو جدا کنید و هر جفت را از مبنای شانزده به ده ببرید. در #FA7700، جفت FA برابر ۱۵ ضرب در ۱۶ به‌اضافهٔ ۱۰، یعنی ۲۵۰ است؛ جفت 77 برابر ۱۱۹ و جفت 00 برابر صفر. برعکسش هم همین‌قدر ساده است و به همین دلیل HEX و RGB بدون هیچ خطایی به هم تبدیل می‌شوند.

تبدیل به HSL چند مرحله دارد. ابتدا هر سه عدد بر ۲۵۵ تقسیم می‌شوند. روشنایی میانگین بزرگ‌ترین و کوچک‌ترین مقدار است؛ برای مثال ما (۰٫۹۸ + ۰) تقسیم بر دو، یعنی حدود ۴۹ درصد. اشباع از اختلاف بیشینه و کمینه به دست می‌آید که اینجا ۱۰۰ درصد است، و فام بر اساس اینکه کدام کانال بیشینه است حساب می‌شود؛ اینجا حدود ۲۹ درجه. ابزار زاویهٔ فام را به عدد صحیح و اشباع و روشنایی را به یک رقم اعشار گرد می‌کند، پس اگر HSL را دوباره به HEX برگردانید، ممکن است یکی دو واحد اختلاف ببینید؛ مثلاً hsl(29, 100%, 49%) به #FA7900 برمی‌گردد، نه #FA7700.

بهترین روش در پروژه‌های امروزی تعریف رنگ‌های برند به شکل متغیر CSS است؛ مثلاً در :root یک متغیر --brand با مقدار رنگ اصلی بسازید و در همهٔ قالب از همان استفاده کنید. اگر رنگ را با HSL تعریف کنید، ساختن حالت‌های hover، پس‌زمینه‌های کم‌رنگ و تم تاریک فقط با تغییر درصد روشنایی ممکن می‌شود. مرورگرهای جدید نحو کوتاه‌تری هم می‌پذیرند که در آن مقادیر با فاصله جدا می‌شوند و شفافیت بعد از یک اسلش می‌آید.

برای شفافیت دو راه دارید: rgba با عدد چهارم بین صفر و یک، یا HEX هشت‌رقمی که دو رقم آخرش شفافیت است. در این ابزار با لغزندهٔ شفافیت یا با واردکردن rgba و HEX هشت‌رقمی، آلفا را تعیین کنید تا هر سه شکل یکجا ساخته شوند؛ مثلاً ۵۰ درصد شفافیت در HEX با دو رقم 80 در انتها نوشته می‌شود. اگر سایتتان را با وردپرس مدیریت‌شده یا سایت‌های آماده ساخته‌اید، معمولاً بخش تنظیمات ظاهری قالب، کد HEX می‌خواهد و همین ابزار کافی است.

بخش دوم ابزار، نسبت کنتراست دو رنگ را دقیقاً با فرمول رهنمود WCAG می‌سنجد. ابتدا هر کانال از فضای sRGB به مقدار خطی برگردانده می‌شود (تصحیح گاما)، سپس درخشندگی نسبی با ضرایب ۰٫۲۱۲۶ برای قرمز، ۰٫۷۱۵۲ برای سبز و ۰٫۰۷۲۲ برای آبی به دست می‌آید. نسبت کنتراست برابر است با درخشندگی رنگ روشن‌تر به‌اضافهٔ ۰٫۰۵ تقسیم بر درخشندگی رنگ تیره‌تر به‌اضافهٔ ۰٫۰۵؛ عددی از ۱ تا ۲۱. ابزار این عدد را پیش از مقایسه گرد نمی‌کند، چون طبق رهنمود ۴٫۴۹ هنوز برای سطح AA کافی نیست.

برای سطح AA، متن معمولی دست‌کم ۴٫۵ به ۱ و متن درشت، یعنی دست‌کم ۲۴ پیکسل یا ۱۸٫۶۶ پیکسل پررنگ، دست‌کم ۳ به ۱ لازم دارد. سطح AAA سخت‌گیرانه‌تر است: ۷ به ۱ برای متن معمولی و ۴٫۵ به ۱ برای متن درشت. آیکون‌ها، حاشیهٔ کادرهای فرم و نمودارها هم طبق معیار کنتراست اجزای غیرمتنی دست‌کم ۳ به ۱ می‌خواهند. ابزار هر پنج مورد را با «قبول» یا «رد» نشان می‌دهد و اگر متن معمولی رد شود، نزدیک‌ترین رنگ با همان فام را پیشنهاد می‌کند که به ۴٫۵ برسد؛ با یک کلیک جایگزین می‌شود.

اگر یکی از رنگ‌ها شفاف باشد، ابزار رنگ متن را روی پس‌زمینه و پس‌زمینه را روی سفید ترکیب می‌کند و بعد می‌سنجد؛ روی زمینهٔ دیگر نتیجه فرق می‌کند. رنگ‌های زعفرانی و نارنجی روشن معمولاً با متن سفید کنتراست کافی ندارند؛ برای مثال #FA7700 روی سفید حدود ۲٫۷ به ۱ است و برای دکمه‌ها باید متن تیره روی آن‌ها گذاشت.

یک پالت کاربردی معمولاً از یک رنگ اصلی و هفت تا ده پلهٔ روشن و تیره از همان رنگ ساخته می‌شود. روش عملی این است که رنگ اصلی را در ابزار وارد کنید، مقدار HSL آن را بردارید و فام و اشباع را ثابت نگه دارید؛ سپس روشنایی را مثلاً روی ۹۵، ۸۵، ۷۰، ۵۰، ۴۰، ۳۰ و ۲۰ درصد بگذارید. پله‌های روشن برای پس‌زمینهٔ کارت‌ها و هشدارها، و پله‌های تیره برای متن و حالت hover مناسب‌اند.

برای تم تاریک کافی نیست رنگ‌ها را برعکس کنید. پس‌زمینه را روی خاکستری بسیار تیره به‌جای سیاه مطلق بگذارید و اشباع رنگ برند را کمی پایین بیاورید تا روی زمینهٔ تیره چشم را آزار ندهد. با پرس‌وجوی رسانه‌ای prefers-color-scheme در CSS، مرورگر خودش تم مناسب را انتخاب می‌کند. بعد از بازنویسی پالت، نسخهٔ قدیم و جدید فایل CSS را با ابزار مقایسهٔ متن کنار هم بگذارید تا مطمئن شوید رنگی جا نمانده است، و اگر سایت را روی سرور خودتان با Nginx سرو می‌کنید، برای فایل‌های CSS هدر کش مناسب تنظیم کنید.

بیشتر ناهماهنگی‌های رنگ بین فایل طراحی و سایت واقعی از چند اشتباه تکراری می‌آید. شایع‌ترینش اشتباه گرفتن HSL با HSB یا HSV است که در نرم‌افزارهای طراحی مثل فتوشاپ نمایش داده می‌شود؛ این دو مدل با وجود ظاهر مشابه، اعداد کاملاً متفاوتی دارند و نمی‌شود مقدار یکی را در دیگری گذاشت.

مورد بعدی پروفایل رنگ است. اگر طراح در فضای Display P3 کار کرده باشد، همان کد روی صفحهٔ معمولی کمی کدرتر دیده می‌شود. خروجی‌ها را برای وب همیشه در sRGB بگیرید. اشتباه آخر هم این است که رنگ‌ها در چند فایل CSS به‌صورت پراکنده تکرار شوند؛ وقتی برند تغییر می‌کند، پیدا کردن همهٔ آن‌ها سخت است و بهتر است از متغیرها استفاده کنید. برای پیدا کردن همهٔ کدهای HEX در یک فایل، ابزار Regex الگوی آماده دارد.

کدهای RGB فقط مخصوص وب نیستند. ترمینال‌های امروزی رنگ ۲۴ بیتی را پشتیبانی می‌کنند و می‌توانید با کدهای ANSI متن را دقیقاً با رنگ برند خودتان چاپ کنید؛ این برای اسکریپت‌های استقرار، پیام خوش‌آمد SSH یا prompt سرور تولید کاربرد دارد تا اشتباهاً دستوری را روی سرور اصلی اجرا نکنید. مقادیر R‏، G و B را از همین ابزار بردارید و در دنبالهٔ escape قرار دهید.

برای کار با تصویر هم ImageMagick روی هر توزیعی نصب می‌شود و می‌تواند از یک کد HEX، نمونهٔ رنگ بسازد یا رنگ غالب یک تصویر را استخراج کند. روی سرور ابری ایران‌کلاد این دستورها را مستقیم در SSH اجرا می‌کنید و برای ساخت خودکار نسخه‌های مختلف یک لوگو در خط لوله‌های CI هم کاربرد دارند.

تمام محاسبه‌های این صفحه با جاوااسکریپت در مرورگر خود شما انجام می‌شود. سرور ایران‌کلاد فقط صفحه را تحویل می‌دهد و رنگ‌هایی که انتخاب می‌کنید به هیچ سروری فرستاده نمی‌شوند و جایی ذخیره هم نمی‌شوند. رنگ‌های انتخابی فقط بعد از علامت # در آدرس صفحه نوشته می‌شوند تا با «کپی لینک این رنگ‌ها» همان نتیجه را برای همکارتان بفرستید؛ مرورگر این بخش از آدرس را هرگز به سرور نمی‌فرستد. دکمه‌های کپی از کلیپ‌بورد مرورگر استفاده می‌کنند و اگر مرورگرتان اجازهٔ دسترسی به کلیپ‌بورد را نداده باشد، کپی انجام نمی‌شود؛ در این صورت مقدار را دستی انتخاب کنید.

رنگ‌ها در CSS تقریباً هیچ وزنی ندارند، اما تصاویری که رنگ برند را حمل می‌کنند، مثل بنرها و پس‌زمینه‌ها، بخش بزرگی از حجم صفحه‌اند. جایی که می‌شود، پس‌زمینه‌های ساده را به‌جای تصویر با گرادیان CSS بسازید و آیکون‌ها را SVG نگه دارید تا رنگشان با متغیر CSS قابل‌تغییر باشد.

برای تصاویری که باقی می‌مانند، بهینه‌سازی تصویر حجم را کم می‌کند و CDN ایران‌کلاد فایل‌های ایستا مثل CSS، جاوااسکریپت و تصاویر را در لبهٔ داخل ایران کش می‌کند. چون فایل CSS کش می‌شود، بعد از تغییر رنگ‌های برند حتماً نسخهٔ فایل را عوض کنید یا کش را از پنل پاک کنید تا بازدیدکننده‌ها رنگ قدیمی را نبینند.