ابزار انتخاب رنگ - تبدیل کدهای رنگ RGB، هگز، CMYK و HSV

انتخاب‌گر رنگ چیست؟

انتخاب‌گر رنگ ابزاری برای انتخاب رنگ و خواندن مقدار آن در قالب‌های مختلف رنگی است. این ابزار مقدار رنگ را هم‌زمان به صورت RGB (قرمز، سبز، آبی)، هگزادسیمال، CMYK (فیروزه‌ای، سرخابی، زرد، مشکی) و HSV (فام، اشباع، مقدار) نشان می‌دهد. تغییر هر قالب، قالب‌های دیگر را فوراً به‌روزرسانی می‌کند.

روش استفاده از انتخاب‌گر رنگ

سه روش برای انتخاب رنگ وجود دارد.

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

وارد کردن مقدارهای دقیق نیز ممکن است. فیلد هگز کدهایی مانند #2ECC71 را با یا بدون # می‌پذیرد. هر فیلد RGB یک عدد صحیح از ۰ تا ۲۵۵ را می‌پذیرد. هر فیلد CMYK یک عدد صحیح از ۰ تا ۱۰۰ را می‌پذیرد. مقداری که بالاتر از محدوده مجاز وارد شود، روی بیشینه محدود می‌شود.

کنار هر قالب رنگی یک دکمه کپی وجود دارد. با کلیک روی آن، مقدار در کلیپ‌بورد کپی می‌شود و پیام کوتاه «کپی شد!» نمایش داده می‌شود.

مدل‌های رنگی توضیح داده‌شده

RGB

RGB رنگ را به‌صورت ترکیبی از نور قرمز، سبز و آبی توصیف می‌کند؛ همان سه رنگی که نمایشگر برای ساخت هر پیکسل به کار می‌برد. مقدار هر کانال از ۰ تا ۲۵۵ است. RGB(۲۵۵، ۰، ۰) قرمز خالص و RGB(۰، ۰، ۰) مشکی است. مرورگرها، برنامه‌ها و نرم‌افزارهای ویدئویی همگی از RGB استفاده می‌کنند، چون با نحوه کار نمایشگرها مطابقت دارد.

هگز

کد هگز یک رنگ RGB را در مبنای ۱۶، به‌جای مبنای ۱۰، می‌نویسد. #2ECC71 سه جفت نویسه دارد: 2E برای قرمز، CC برای سبز و 71 برای آبی. هر جفت از 00 تا FF است. کدهای هگز در طراحی وب رایج‌اند، چون CSS آن‌ها را مستقیماً می‌پذیرد و نوشتنشان از rgb() کوتاه‌تر است. شکل کوتاه سه‌نویسه‌ای نیز وجود دارد: #0F0 همان معنای #00FF00 را دارد.

CMYK

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

HSV

HSV فام، اشباع و مقدار را جداگانه توصیف می‌کند. فام خانواده رنگ است و برحسب درجه، از ۰° تا ۳۶۰°، بیان می‌شود؛ ۰° قرمز، ۱۲۰° سبز و ۲۴۰° آبی است. اشباع میزان زنده بودن رنگ است و از ۰٪ (خاکستری) تا ۱۰۰٪ (کاملاً رنگی) تغییر می‌کند. مقدار میزان روشنایی است و از ۰٪ (مشکی) تا ۱۰۰٪ (روشنایی کامل) تغییر می‌کند. HSV به نحوه توصیف طبیعی رنگ توسط انسان نزدیک است؛ به همین دلیل طیف و نوار لغزنده روشنایی این ابزار بر اساس آن ساخته شده‌اند.

فرمول تبدیل RGB به هگز

هر کانال RGB، که عددی از ۰ تا ۲۵۵ است، به یک عدد هگزادسیمال دودقمی تبدیل می‌شود؛ سپس سه جفت با قرار گرفتن # در ابتدا به هم پیوسته می‌شوند.

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

فرمول تبدیل RGB به CMYK

ابتدا هر کانال RGB به کسری بین ۰ و ۱ مقیاس می‌شود. مشکی (K) بر اساس بزرگ‌ترین کانال تعیین می‌شود. سپس فیروزه‌ای، سرخابی و زرد از کانال‌های باقی‌مانده و K محاسبه می‌شوند.

$R' = R/255,\quad G' = G/255,\quad B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{1-R'-K}{1-K}\times 100\%,\quad M = \frac{1-G'-K}{1-K}\times 100\%,\quad Y = \frac{1-B'-K}{1-K}\times 100\%$

وقتی K برابر ۱ باشد (رنگ کاملاً مشکی است)، C، M و Y همگی برابر ۰ قرار داده می‌شوند تا از تقسیم بر صفر جلوگیری شود.

فرمول تبدیل RGB به HSV

ابتدا RGB به کسرهایی بین ۰ و ۱ مقیاس می‌شود. فرض کنید $C_{max}$ بزرگ‌ترینِ سه مقدار، $C_{min}$ کوچک‌ترینِ آن‌ها و $\Delta$ اختلاف بین آن‌ها باشد.

$V = C_{max}\times 100\%$ $S = 0 \text{ if } C_{max}=0,\text{ در غیر این صورت } \frac{\Delta}{C_{max}}\times 100\%$

فام به کانالی بستگی دارد که بیشترین مقدار را دارد:

0° & \Delta = 0 \\ 60°\times\left(\dfrac{G'-B'}{\Delta}\bmod 6\right) & C_{max}=R' \\ 60°\times\left(\dfrac{B'-R'}{\Delta}+2\right) & C_{max}=G' \\ 60°\times\left(\dfrac{R'-G'}{\Delta}+4\right) & C_{max}=B' \end{cases}$$ ## مثال حل‌شده با RGB(۴۶، ۲۰۴، ۱۱۳)، یعنی یک سایه سبز، شروع می‌کنیم. **هگز:** ۴۶ در مبنای هگز `2E`، ۲۰۴ برابر `CC` و ۱۱۳ برابر `71` است و در نتیجه `#2ECC71` به دست می‌آید. **CMYK:** پس از مقیاس‌گذاری، R′ = ۰٫۱۸۰، G′ = ۰٫۸۰۰ و B′ = ۰٫۴۴۳ هستند. بزرگ‌ترین مقدار G′ است، بنابراین K = ۱ − ۰٫۸۰۰ = ۰٫۲۰، یعنی ۲۰٪ مشکی. سپس C = (۱ − ۰٫۱۸۰ − ۰٫۲۰) / ۰٫۸۰۰ × ۱۰۰ ≈ ۷۷٪، M = (۱ − ۰٫۸۰۰ − ۰٫۲۰) / ۰٫۸۰۰ × ۱۰۰ = ۰٪ و Y = (۱ − ۰٫۴۴۳ − ۰٫۲۰) / ۰٫۸۰۰ × ۱۰۰ ≈ ۴۵٪ محاسبه می‌شوند. نتیجه CMYK(۷۷، ۰، ۴۵، ۲۰) است. **HSV:** $C_{max}$ = ۰٫۸۰۰ (سبز)، $C_{min}$ = ۰٫۱۸۰، بنابراین Δ = ۰٫۶۲۰ است. مقدار = ۸۰٪. اشباع = ۰٫۶۲۰ / ۰٫۸۰۰ × ۱۰۰ ≈ ۷۷٪. چون سبز بیشترین مقدار را دارد، H = ۶۰ × ((B′ − R′) / Δ + ۲) = ۶۰ × ((۰٫۴۴۳ − ۰٫۱۸۰) / ۰٫۶۲۰ + ۲) ≈ ۱۴۵° است. نتیجه HSV(۱۴۵°، ۷۷٪، ۸۰٪) است. ## دسترس‌پذیر کردن انتخاب رنگ تقریباً ۱ نفر از هر (۲٫۵ سانتی‌متر) ۱۲ مرد و حدود ۱ نفر از هر (۲٫۵ سانتی‌متر) ۲۰۰ زن، نوعی نقص دید رنگی دارند که رایج‌ترین شکل آن کاهش توانایی تشخیص قرمز از سبز است. طرحی که برای انتقال معنا فقط به رنگ متکی باشد، مانند پیام خطای قرمز بدون نماد یا برچسب، برای این کاربران کارایی ندارد. افزودن برچسب متنی، نماد یا الگو در کنار رنگ این مشکل را برطرف می‌کند. متن نیز باید در برابر پس‌زمینه خود کنتراست کافی داشته باشد. دستورالعمل‌های دسترس‌پذیری محتوای وب (WCAG) نسبت کنتراست حداقل ۴٫۵:۱ را برای متن معمولی و 3:1 را برای متن بزرگ توصیه می‌کنند. برای اندازه‌گیری این نسبت به ابزار اختصاصی بررسی کنتراست نیاز است، زیرا این ابزار خود نسبت کنتراست را محاسبه نمی‌کند. ## پرسش‌های متداول **تفاوت RGB و CMYK چیست؟** RGB برای نمایشگرهاست و با افزودن نور قرمز، سبز و آبی رنگ را ایجاد می‌کند. CMYK برای چاپ است و با لایه‌گذاری جوهر روی کاغذ رنگ را ایجاد می‌کند؛ در نتیجه به‌جای آن نور را می‌کاهد. RGB می‌تواند رنگ‌های روشن‌تری از CMYK تولید کند، زیرا جوهر نمی‌تواند با دامنه رنگ‌هایی که نمایشگر منتشر می‌کند مطابقت داشته باشد. **چرا رنگ‌های چاپ‌شده با رنگ‌های نمایشگر متفاوت به نظر می‌رسند؟** نمایشگر مستقیماً نور منتشر می‌کند؛ اما صفحه چاپ‌شده فقط نوری را که به آن می‌تابد بازتاب می‌دهد. جوهر CMYK نیز دامنه رنگی کوچک‌تری از نور RGB دارد، بنابراین برخی رنگ‌های روشن نمایشگر را نمی‌توان دقیقاً روی کاغذ بازتولید کرد. **نماد # در کد هگز چه معنایی دارد؟** این نماد مشخص می‌کند که نویسه‌های پس از آن یک کد رنگ هگزادسیمال هستند؛ قراردادی که از HTML و CSS اولیه به‌جا مانده است. بدون آن، مرورگر مقدار را به‌عنوان رنگ تشخیص نمی‌دهد. **چرا برخی کدهای هگز فقط سه نویسه دارند؟** کد سه‌نویسه‌ای شکل کوتاه کد شش‌نویسه‌ای است که در آن هر جفت، یک رقم تکراری دارد. `#0F0` به `#00FF00` بسط می‌یابد. **آیا تبدیل بین قالب‌ها دقیق است؟** تبدیل RGB به هگز دقیق است، زیرا همان اعداد در مبنایی متفاوت نوشته می‌شوند. تبدیل RGB به CMYK تقریبی است، چون بین نور و جوهر تبدیل انجام می‌دهد؛ این دو فرایند فیزیکی متفاوتی با دامنه‌های رنگی متفاوت دارند. **آیا این ابزار می‌تواند مستقیماً از تصویر یا صفحه وب رنگ انتخاب کند؟** خیر. افزونه مرورگر یا انتخاب‌گر رنگ داخلی سیستم‌عامل، مانند ابزار Digital Color Meter در macOS، می‌تواند رنگی را از صفحه بخواند؛ سپس می‌توان مقدار حاصل را برای تبدیل در این ابزار وارد کرد.