تفاوت RGB و CMYK چیست؟

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

چرا رنگهایم هنگام چاپ متفاوت به نظر میرسند؟

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

چگونه کدهای هگز رنگهایی که آنلاین میبینم را دریافت کنم؟

از ابزارهای توسعهدهنده مرورگر استفاده کنید. در Chrome یا Firefox، روی هر المان کلیک راست کنید، "Inspect" را انتخاب کنید، سپس روی مربع کوچک رنگ در پنل استایلها کلیک کنید. این یک انتخابگر رنگ باز میکند که کد هگز را نشان میدهد. افزونههای مرورگر مانند ColorZilla این کار را حتی سریعتر میکنند - آنها به شما اجازه میدهند در هر جای صفحه کلیک کنید تا مقدار رنگ آن را بگیرید.

علامت # در کدهای هگز چه معنایی دارد؟

این فقط یک پیشوند است که به مرورگر میگوید "این یک کد رنگ هگزادسیمال است". این استاندارد از مشخصات اولیه HTML و CSS میآید. شش حرف بعد از # نشاندهنده مقادیر RGB در پایه ۱۶ هستند: دو رقم برای قرمز، دو رقم برای سبز، دو رقم برای آبی. بدون #، مرورگرها آن را به عنوان رنگ شناسایی نمیکنند.

چرا کدهای هگز ۳ رقمی کار میکنند؟

آنها میانبری هستند برای زمانی که هر کانال رنگ تکرار میشود. #F00 به #FF0000 (قرمز) گسترش مییابد، #C9C به #CC99CC (بنفش روشن) تبدیل میشود. این میانبر در دهه ۱۹۹۰ برای کاهش حجم فایلها در زمانی که پهنای باند گران بود، ایجاد شد. امروزه هنوز برای رنگهای ساده مفید است.

آیا تبدیلهای رنگ دقیق هستند؟

تبدیلهای RGB به هگز از نظر ریاضی دقیق هستند - آنها همان مقادیر در پایههای عددی مختلف هستند. تبدیلهای RGB به CMYK تقریبی هستند زیرا شما بین فضاهای رنگی متفاوت (نور در مقابل جوهر) تبدیل میکنید. این ابزار از استانداردهای پروفایل رنگ ICC برای این تبدیلها استفاده میکند، که همان رویکرد نرمافزارهای طراحی حرفهای است.

چگونه ترکیبهای رنگی در دسترس ایجاد کنم؟

پس از انتخاب رنگها، از یک بررسیکننده کنتراست مانند ابزار WebAIM استفاده کنید. برای متن معمولی به نسبت ۴.۵:۱، برای متن بزرگ به نسبت ۳:۱ نیاز دارید. از ترکیبهای قرمز-سبز اجتناب کنید (سختترین برای کاربران دارای اختلال رنگی). در صورت تردید، متن تیرهتر روی پسزمینههای روشنتر یا برعکس - تفاوت کافی در روشنایی مهمترین چیز است.

آیا میتوانم رنگها را از تصاویر انتخاب کنم؟

مستقیماً در این ابزار، خیر. از افزونه مرورگر مانند ColorZilla استفاده کنید، یا از تصویر اسکرینشات بگیرید و از انتخابگر رنگ سیستم عامل خود استفاده کنید (Digital Color Meter در macOS، PowerToys Color Picker در Windows). پس از دریافت مقدار رنگ، آن را اینجا وارد کنید تا بین فرمتها تبدیل شود.

چرا برخی رنگهای RGB به خوبی به CMYK تبدیل نمیشوند؟

CMYK "گاموت" (محدوده رنگهای قابل بازتولید) محدودتری نسبت به RGB دارد. آبیهای روشن، سبزهای زنده و نارنجیهای الکتریکی اغلب خارج از آنچه جوهرهای CMYK میتوانند فیزیکاً ایجاد کنند، هستند. وقتی این اتفاق میافتد، چاپگر نزدیکترین تطبیق ممکن را جایگزین میکند که معمولاً کمرنگتر به نظر میرسد. طراحان چاپ حرفهای اغلب با رنگهای مطمئن CMYK شروع میکنند تا از این مشکل اجتناب کنند.

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

آنچه می‌توانید با این انتخاب‌کننده رنگ انجام دهید

آیا به سایه دقیق برای پروژه خود نیاز دارید؟ این انتخاب‌کننده رنگ به شما اجازه می‌دهد رنگ‌ها را انتخاب، پیش‌نمایش و بین فرمت‌های RGB، هگزادسیمال، CMYK و HSV به سرعت تبدیل کنید. چه در حال کدنویسی وب‌سایت، طراحی لوگو یا آماده‌سازی فایل‌ها برای چاپ باشید، دقیقاً مقادیر رنگی که نیاز دارید را پیدا خواهید کرد - بدون حدس و گمان و بدون جابجایی بین ابزارها.

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

درک مدل‌های رنگ

پروژه‌های مختلف به فرمت‌های رنگی متفاوتی نیاز دارند. در اینجا توضیح می‌دهیم که هر کدام چه کاربردی دارند:

RGB (قرمز، سبز، آبی)

RGB با ترکیب نور قرمز، سبز و آبی کار می‌کند - همان روشی که نمایشگر شما هم اکنون رنگ‌ها را نمایش می‌دهد. هر مؤلفه از 0 تا 255 متغیر است:

RGB(255, 0, 0) = قرمز خالص
RGB(0, 255, 0) = سبز خالص
RGB(0, 0, 255) = آبی خالص
RGB(255, 255, 255) = سفید
RGB(0, 0, 0) = سیاه

زمان استفاده از RGB: هر کار دیجیتالی - وب‌سایت‌ها، اپلیکیشن‌های موبایل، ویرایش ویدیو یا گرافیک مبتنی بر صفحه نمایش. این زبان بومی نمایشگرها است، به همین دلیل ابزارهایی مانند CSS مستقیماً از توابع rgb() و rgba() پشتیبانی می‌کنند. طبق مشخصات ماژول رنگ W3C CSS، RGB مدل رنگی اساسی برای استانداردهای وب است.

هگزادسیمال (Hex)

کدهای هگز در واقع مقادیر RGB هستند که به جای پایه 10، در پایه 16 نوشته می‌شوند. یک رنگ هگز مانند #FF5733 است، که در آن:

نماد # نشان‌دهنده کد هگز است
دو کاراکتر اول = قرمز (00-FF)
دو کاراکتر میانی = سبز (00-FF)
دو کاراکتر آخر = آبی (00-FF)
#FF0000 = قرمز، #00FF00 = سبز، #0000FF = آبی

گاهی اوقات میانبر 3 کاراکتری مانند #F00 به جای #FF0000 را می‌بینید - این زمانی کار می‌کند که هر کانال رنگ رقم تکراری داشته باشد.

زمان استفاده از Hex: توسعه وب کاربرد اصلی آن است. CSS همیشه از نماد هگز پشتیبانی کرده و اکثر توسعه‌دهندگان آن را سریع‌تر از rgb() می‌یابند. یک نکته رایج: فراموش کردن نماد # بدون سر و صدا استایل‌های شما را خراب می‌کند، زیرا مرورگرها آن را به عنوان رنگ معتبر تشخیص نمی‌دهند.

CMYK (سایان، مجنتا، زرد، کلید/سیاه)

CMYK مدل رنگی مورد استفاده چاپگرها است. برخلاف RGB (که نور را اضافه می‌کند)، CMYK آن را کم می‌کند - با ترکیب جوهرها روی کاغذ سفید:

هر مؤلفه از 0% تا 100% متغیر است
CMYK(0, 100, 100, 0) = قرمز
CMYK(100, 0, 100, 0) = سبز
CMYK(0, 0, 0, 100) = جوهر سیاه خالص
CMYK(0, 0, 0, 0) = بدون جوهر (کاغذ سفید نمایان می‌شود)

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

HSV (رنگ، اشباع، مقدار)

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

رنگ: خانواده رنگ (0-360°) - 0° قرمز، 120° سبز، 240° آبی
اشباع: چقدر زنده یا خاکستری (0-100%) - 0% خاکستری، 100% کاملاً اشباع
مقدار: چقدر روشن یا تیره (0-100%) - 0% سیاه، 100% روشنایی کامل

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

تبدیل رنگ فرمول‌ها

انتخاب‌کننده رنگ به طور خودکار بین مدل‌های مختلف رنگ با استفاده از این فرمول‌های ریاضی تبدیل می‌شود:

تبدیل RGB به Hex

برای تبدیل RGB به هگزادسیمال: ۱. تبدیل هر مؤلفه RGB (۰-۲۵۵) به یک عدد هگزادسیمال دو رقمی ۲. ترکیب سه مقدار هگزادسیمال با پیشوند #

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

جایی که toHex() یک عدد دهدهی را به نمایش هگزادسیمال آن تبدیل می‌کند.

تبدیل RGB به CMYK

تبدیل از RGB به CMYK شامل این مراحل است:

۱. نرمال‌سازی مقادیر RGB به محدوده ۰-۱ ۲. محاسبه مؤلفه کلید سیاه (K) ۳. محاسبه C، M و Y بر اساس K

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

تبدیل RGB به HSV

تبدیل RGB به HSV:

$R' = R/255, G' = G/255, B' = B/255$ $C_{max} = \max(R', G', B')$ $C_{min} = \min(R', G', B')$ $\Delta = C_{max} - C_{min}$

برای Hue (H):

1// تبدیل RGB به Hex
2function rgbToHex(r, g, b) {
3  const toHex = (c) => {
4    const hex = Math.round(c).toString(16);
5    return hex.length === 1 ? '0' + hex : hex;
6  };
7  
8  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
9}
10
11// تبدیل Hex به RGB
12function hexToRgb(hex) {
13  // حذف # در صورت وجود
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // پشتیبانی از هگز 3 و 6 رقمی
17  const expandedHex = cleanHex.length === 3 
18    ? cleanHex.split('').map(char => char + char).join('')
19    : cleanHex;
20    
21  const r = parseInt(expandedHex.substring(0, 2), 16);
22  const g = parseInt(expandedHex.substring(2, 4), 16);
23  const b = parseInt(expandedHex.substring(4, 6), 16);
24  
25  return { r, g, b };
26}
27
28// تبدیل RGB به CMYK
29function rgbToCmyk(r, g, b) {
30  // نرمال‌سازی مقادیر RGB
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // محاسبه K (سیاه)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // برخورد با سیاه خالص
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // محاسبه C، M، Y
44  const c = ((1 - normalizedR - k) / (1 - k)) * 100;
45  const m = ((1 - normalizedG - k) / (1 - k)) * 100;
46  const y = ((1 - normalizedB - k) / (1 - k)) * 100;
47  
48  return {
49    c: Math.round(c),
50    m: Math.round(m),
51    y: Math.round(y),
52    k: Math.round(k * 100)
53  };
54}
55
56// مثال استفاده
57const rgb = { r: 255, g: 0, b: 0 }; // قرمز خالص
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# تبدیل RGB به Hex
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# تبدیل Hex به RGB
6def hex_to_rgb(hex_color):
7    # حذف # در صورت وجود
8    hex_color = hex_color.lstrip('#')
9    
10    # پشتیبانی از هگز 3 و 6 رقمی
11    if len(hex_color) == 3:
12        hex_color = ''.join([c*2 for c in hex_color])
13    
14    return {
15        'r': int(hex_color[0:2], 16),
16        'g': int(hex_color[2:4], 16),
17        'b': int(hex_color[4:6], 16)
18    }
19
20# تبدیل RGB به CMYK
21def rgb_to_cmyk(r, g, b):
22    # نرمال‌سازی مقادیر RGB
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # محاسبه K (سیاه)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # برخورد با سیاه خالص
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # محاسبه C، M، Y
35    c = ((1 - r_norm - k) / (1 - k)) * 100
36    m = ((1 - g_norm - k) / (1 - k)) * 100
37    y = ((1 - b_norm - k) / (1 - k)) * 100
38    
39    return {
40        'c': round(c),
41        'm': round(m),
42        'y': round(y),
43        'k': round(k * 100)
44    }
45
46# مثال استفاده
47rgb = {'r': 0, 'g': 128, 'b': 255}  # آبی آسمانی
48hex_color = rgb_to_hex(rgb['r'], rgb['g'], rgb['b'])
49cmyk = rgb_to_cmyk(rgb['r'], rgb['g'], rgb['b'])
50
51print(f"Hex: {hex_color}")
52print(f"CMYK: C={cmyk['c']}%, M={cmyk['m']}%, Y={cmyk['y']}%, K={cmyk['k']}%")
53

1public class ColorConverter {
2    // تبدیل RGB به Hex
3    public static String rgbToHex(int r, int g, int b) {
4        return String.format("#%02x%02x%02x", r, g, b);
5    }
6    
7    // تبدیل Hex به RGB
8    public static int[] hexToRgb(String hexColor) {
9        // حذف # در صورت وجود
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // پشتیبانی از هگز 3 و 6 رقمی
15        if (hexColor.length() == 3) {
16            String expandedHex = "";
17            for (char c : hexColor.toCharArray()) {
18                expandedHex += c + String.valueOf(c);
19            }
20            hexColor = expandedHex;
21        }
22        
23        int r = Integer.parseInt(hexColor.substring(0, 2), 16);
24        int g = Integer.parseInt(hexColor.substring(2, 4), 16);
25        int b = Integer.parseInt(hexColor.substring(4, 6), 16);
26        
27        return new int[]{r, g, b};
28    }
29    
30    // تبدیل RGB به CMYK
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // نرمال‌سازی مقادیر RGB
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // محاسبه K (سیاه)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // برخورد با سیاه خالص
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // محاسبه C، M، Y
46        double c = ((1 - normalizedR - k) / (1 - k)) * 100;
47        double m = ((1 - normalizedG - k) / (1 - k)) * 100;
48        double y = ((1 - normalizedB - k) / (1 - k)) * 100;
49        
50        return new double[]{
51            Math.round(c),
52            Math.round(m),
53            Math.round(y),
54            Math.round(k * 100)
55        };
56    }
57    
58    public static void main(String[] args) {
59        // مثال استفاده
60        int r = 75, g = 0, b = 130;  // بنفش
61        String hexColor = rgbToHex(r, g, b);
62        double[] cmyk = rgbToCmyk(r, g, b);
63        
64        System.out.println("Hex: " + hexColor);
65        System.out.printf("CMYK: C=%.0f%%, M=%.0f%%, Y=%.0f%%, K=%.0f%%\n", 
66                          cmyk[0], cmyk[1], cmyk[2], cmyk[3]);
67    }
68}
69

مراجع و مطالعات بیشتر

ماژول رنگ CSS سطح 4 W3C - مشخصات رسمی رنگ وب
دستورالعمل‌های کنتراست WCAG 2.1 - استانداردهای دسترسی‌پذیری برای کنتراست رنگ
بررسی کننده کنتراست WebAIM - آزمون نسبت‌های کنتراست رنگ
استانداردهای پروفایل رنگ ICC - مشخصات فنی برای تبدیلات رنگ
اسناد وب MDN: مقادیر رنگ CSS - راهنمای جامع فرمت‌های رنگ وب

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

انتخابگر رنگ

RGB (0-255)

CMYK (0-100)

انتخابگر رنگ

مستندات

آنچه می‌توانید با این انتخاب‌کننده رنگ انجام دهید

درک مدل‌های رنگ

RGB (قرمز، سبز، آبی)

هگزادسیمال (Hex)

CMYK (سایان، مجنتا، زرد، کلید/سیاه)

HSV (رنگ، اشباع، مقدار)

تبدیل رنگ فرمول‌ها

تبدیل RGB به Hex

تبدیل RGB به CMYK

تبدیل RGB به HSV

مراجع و مطالعات بیشتر

تولیدکننده پالت رنگ - ایجاد طرح‌های رنگی هماهنگ

تولیدکننده ویژگی‌های CSS - گرادیان‌ها، سایه‌ها و حاشیه‌ها

تولیدکننده رایگان کد QR - ایجاد کدهای QR اسکن‌شونده در لحظه

مبدل پایه اعداد: باینری، هگزادسیمال، دهدهی و هشتایی

پیش‌بینی رنگ خرگوش – محاسبه رنگ پوزه بچه خرگوش‌ها

مبدل باینری به دهدهی | ابزار آنلاین رایگان

مبدل پیکسل به REM و EM - ماشین حساب رایگان واحدهای CSS

رمزگشای تصاویر Base64 | رمزگشایی و پیش‌نمایش تصاویر آنلاین

محاسبه‌گر رقیق‌سازی وایتکس: نسبت‌های دقیق برای پاکسازی ایمن

تبدیل پیکسل به اینچ - ماشین حساب DPI رایگان (۲۰۲۵)

محاسبه‌گر طول بیت و بایت - ابزار رایگان اندازه داده

قالب‌بندی کننده رایگان کد: زیباسازی جاوااسکریپت، پایتون، HTML و بیشتر