تبدیل کد رنگ و ساخت پالت

راهنمای استفاده از تبدیل کد رنگ

1. با انتخابگر رنگ، رنگ را انتخاب یا کد HEX/RGB را وارد کنید.
2. کدهای معادل را با یک کلیک کپی کنید.
3. کنتراست متن سفید و سیاه روی این رنگ را بررسی کنید.

رنگ در رایانه چطور نوشته می‌شود؟

صفحه‌نمایش هر رنگی را با ترکیب سه نور ریز قرمز، سبز و آبی در هر پیکسل می‌سازد. شدت هر نور عددی بین صفر تا ۲۵۵ است؛ صفر یعنی خاموش و ۲۵۵ یعنی بیشترین شدت. سه عدد صفر سیاه است، سه عدد ۲۵۵ سفید و ترکیب‌های دیگر، بیش از شانزده میلیون رنگ می‌سازند. این مدل RGB نام دارد، از حرف اول نام انگلیسی سه رنگ. رنگ پیش‌فرض ابزار در این مدل، ۹۱ قرمز، ۹۱ سبز و ۲۴۷ آبی است؛ آبی پررنگ با کمی قرمز که آن را به بنفش متمایل می‌کند.

HEX همان سه عدد است، در مبنای شانزده. هر عدد بین صفر تا ۲۵۵ با دو رقم هگزادسیمال، از ۰۰ تا FF، نوشته می‌شود و سه جفت پشت‌سرهم، با یک شارپ در ابتدا، کد شش‌رقمی رنگ را می‌سازند. ۹۱ در هگزادسیمال 5B است و ۲۴۷، F7؛ پس کد رنگ 5B5BF7. HEX رایج‌ترین شکل نوشتن رنگ در وب و نرم‌افزارهای طراحی است، چون کوتاه است و به راحتی کپی می‌شود. شکل سه‌رقمی هم هست که هر رقمش دو بار تکرار می‌شود؛ برای رنگ‌هایی مثل سفید و قرمز خالص.

تبدیل کد رنگ؛ چهار مدل

HSL رنگ را به زبانی نزدیک‌تر به درک انسان توصیف می‌کند. عدد اول، فام، جای رنگ روی چرخهٔ رنگ به درجه است؛ صفر قرمز، ۱۲۰ سبز، ۲۴۰ آبی و ۳۶۰ دوباره قرمز. عدد دوم، اشباع، شدت رنگ به درصد است؛ صفر یعنی خاکستری و صد یعنی خالص‌ترین شکل رنگ. عدد سوم، روشنی، از صفر یعنی سیاه تا صد یعنی سفید است و پنجاه، رنگ در خالص‌ترین حالتش. رنگ پیش‌فرض ابزار، فام ۲۴۰، یعنی آبی، اشباع ۹۱ درصد و روشنی ۶۶ درصد دارد.

CMYK مدل رنگ چاپ است. چاپگرها به جای نور، با جوهر کار می‌کنند و رنگ را با کم کردن نور از کاغذ سفید می‌سازند؛ با چهار جوهر فیروزه‌ای، سرخابی، زرد و مشکی. هر عدد، درصد پوشش یک جوهر است. ابزار CMYK را با فرمول ریاضی استاندارد از RGB حساب می‌کند. رنگ پیش‌فرض در این تبدیل، ۶۳ درصد فیروزه‌ای، ۶۳ درصد سرخابی، بدون زرد و ۳ درصد مشکی است. اما این عدد را با احتیاط به کار ببرید؛ در ادامه توضیح می‌دهیم چرا.

کنتراست؛ آیا متن روی این رنگ خوانا است؟

انتخاب رنگ فقط موضوع زیبایی نیست؛ متنی که روی رنگ زمینه خوانا نباشد، برای بخش بزرگی از کاربران، به‌ویژه افراد مسن، کم‌بینا یا کسانی که گوشی را زیر نور آفتاب نگاه می‌کنند، عملا وجود ندارد. استاندارد بین‌المللی دسترسی‌پذیری وب، نسبتی به نام کنتراست را تعریف کرده که از درخشندگی نسبی دو رنگ حساب می‌شود و بین یک تا بیست‌ویک است. یک یعنی دو رنگ یکسان‌اند و بیست‌ویک، کنتراست سیاه روی سفید.

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

به جدول بالا دوباره نگاه کنید. خاکستری میانه با کنتراست ۴٫۴۸ با سفید، درست زیر مرز ۴٫۵ است؛ رنگی که بسیاری از طراحان برای متن‌های فرعی استفاده می‌کنند و فکر می‌کنند خواناست. زرد با سفید فقط ۱٫۵۱ است؛ متن سفید روی دکمهٔ زرد، تقریبا ناخواناست. برای دکمه‌های زرد، متن سیاه را به کار ببرید که کنتراستش با زرد نزدیک به چهارده است.

ساختن طیف رنگ

طراحی رابط کاربری معمولا به جای یک رنگ برند، طیفی از آن را لازم دارد؛ نسخهٔ خیلی روشن برای پس‌زمینه‌ها، نسخهٔ روشن برای حالت انتخاب، رنگ اصلی برای دکمه‌ها، نسخهٔ تیره برای حالت فشرده شدن دکمه و نسخهٔ خیلی تیره برای متن. ابزار این طیف را خودکار می‌سازد. فام و اشباع رنگ ثابت می‌ماند و روشنی از ۹۵ درصد تا ۵ درصد، در یازده پله، تغییر می‌کند. با کلیک روی هر پله، کد HEX آن کپی می‌شود.

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

رنگ برای چاپ؛ هشدار دربارهٔ CMYK

صفحه‌نمایش با نور رنگ می‌سازد و چاپگر با جوهر و این دو، مجموعهٔ رنگ‌های قابل ساخت متفاوتی دارند. بسیاری از رنگ‌های درخشان صفحه، به‌ویژه آبی‌ها، سبزهای روشن و بنفش‌های اشباع، با جوهر چاپی قابل ساختن نیستند و در چاپ کدرتر و تیره‌تر درمی‌آیند. تبدیل ریاضی RGB به CMYK، که این ابزار و بیشتر ابزارهای آنلاین انجام می‌دهند، این محدودیت را در نظر نمی‌گیرد؛ نوع کاغذ، دستگاه چاپ و جوهر را هم نمی‌شناسد.

پس عدد CMYK ابزار را تقریبی بدانید، برای وقتی که فقط حدودی لازم دارید. برای چاپ حرفه‌ای کارت ویزیت، بسته‌بندی یا بروشور، با نرم‌افزارهای طراحی که پروفایل رنگ چاپخانه را می‌شناسند کار کنید، یا از خود چاپخانه بخواهید کد رنگ مورد نظر را تبدیل کند. برای رنگ برند که باید در همهٔ چاپ‌ها دقیقا یکی باشد، سیستم‌های رنگ استاندارد چاپی که با کتاب نمونه‌رنگ همراه‌اند، مطمئن‌ترین روش‌اند.

کاربرد برای رنگ برند

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

اگر QR کد با رنگ برند می‌سازید، کنتراست را جدی بگیرید؛ QR کد هم مثل متن به کنتراست نیاز دارد و رنگ‌های روشن برند ممکن است کد را ناخوانا کنند. ساخت QR کد خودش کنتراست را بررسی و هشدار می‌دهد.

نمونه؛ پالت یک فروشگاه اینترنتی

فرض کنید رنگ برند فروشگاهی سبز کله‌غازی با کد 0F766E است. کد را در ابزار بنویسید. کنتراست با سفید ۵٫۴۷ است؛ پس دکمه‌هایی با زمینهٔ این رنگ و متن سفید، برای متن معمولی سطح AA را دارند. این رنگ اصلی دکمه‌ها می‌شود. از طیف پایین، پلهٔ خیلی روشن را برای پس‌زمینهٔ بخش‌های برجسته، مثل کادر تخفیف، بردارید؛ متن تیره روی آن به راحتی خوانده می‌شود. پلهٔ تیره‌تر را برای حالتی که کاربر نشانگر را روی دکمه می‌برد و یکی از پله‌های خیلی تیره را برای عنوان‌ها.

حالا رنگ‌های کمکی را مشخص کنید. برای پیام خطا، قرمزی مثل DC2626 که کنتراستش با سفید ۴٫۸۳ است. برای متن‌های فرعی، به جای خاکستری میانه که درست زیر مرز است، خاکستری کمی تیره‌تر انتخاب کنید و کنتراستش را بسنجید تا از ۴٫۵ بیشتر باشد. همهٔ این کدها را در یک فایل یادداشت کنید. حالا سیستم رنگی کوچک، یکدست و دسترسی‌پذیر دارید که هر طراح و برنامه‌نویسی می‌تواند از آن پیروی کند.

رنگ مکمل و هماهنگ

در مدل HSL، ساختن رنگ‌های هماهنگ ساده است. رنگ مکمل، که بیشترین تضاد را با رنگ اصلی دارد، فامی با ۱۸۰ درجه فاصله است؛ برای آبی ۲۴۰ درجه، فام ۶۰ درجه، یعنی زرد. رنگ‌های هم‌جوار، که در کنار هم آرام و هماهنگ‌اند، فام‌هایی با سی درجه فاصله‌اند. سه‌گانهٔ رنگی، سه فام با ۱۲۰ درجه فاصله است. کافی است فام رنگ اصلی را از خروجی HSL ابزار بخوانید، فام تازه را حساب کنید و کد HSL تازه، با همان اشباع و روشنی، را در ابزار بنویسید تا کد HEX آن را بگیرید.

حالت تاریک

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

رنگ در CSS

در CSS، هر سه شکل HEX، RGB و HSL پذیرفته می‌شوند و نتیجه یکی است. انتخاب بیشتر سلیقه‌ای است، اما HSL برای متغیرهای رنگ مزیت دارد؛ با تغییر فقط عدد روشنی، نسخهٔ روشن‌تر یا تیره‌تر می‌سازید و کد خواناتر است. اگر شفافیت لازم دارید، شکل‌های چهارمقداری RGB و HSL عدد چهارمی برای شفافیت می‌گیرند و کد HEX هم می‌تواند هشت‌رقمی باشد که دو رقم آخرش شفافیت است. ابزار شفافیت را محاسبه نمی‌کند و فقط رنگ کامل را تبدیل می‌کند.

خطاهای رایج

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

برداشتن رنگ از یک تصویر یا سایت

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

کوررنگی و انتخاب رنگ

بخشی از کاربران، به‌ویژه مردان، نوعی کوررنگی دارند که رایج‌ترینش تشخیص ندادن قرمز و سبز از هم است. اگر در طراحی، فقط با رنگ قرمز و سبز بین دو حالت فرق گذاشته‌اید، مثلا تأیید و رد یا سود و زیان، این کاربران تفاوت را نمی‌بینند. کنار رنگ، همیشه نماد، کلمه یا شکل متفاوت هم بگذارید. کنتراست روشنی هم کمک می‌کند؛ دو رنگی که روشنی متفاوتی دارند، برای کوررنگ‌ها هم قابل تشخیص‌اند. با ابزار، روشنی دو رنگ را در خروجی HSL مقایسه کنید؛ اگر عدد روشنی نزدیک به هم است، فقط با فام از هم جدا می‌شوند و برای همه قابل تشخیص نیستند. در این حالت یکی را روشن‌تر یا تیره‌تر کنید تا تفاوتشان بدون نیاز به دیدن رنگ هم پیدا باشد.

حریم خصوصی

همهٔ تبدیل‌ها و محاسبه‌های کنتراست در مرورگر شما انجام می‌شوند و هیچ داده‌ای فرستاده نمی‌شود.

ابزارهای مرتبط

برای تبدیل اعداد بین مبنای ده و شانزده، که پایهٔ کدهای HEX است، تبدیل مبنای اعداد را ببینید و برای نسبت‌های هماهنگ در طراحی، محاسبه نسبت طلایی. همهٔ ابزارهای برنامه‌نویسی در ابزارهای برنامه‌نویسی آمده‌اند.