ابزار انتخاب رنگ ساده و کاربرپسند

مقدمه

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

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

قبل از اینکه به نحوه استفاده از انتخابگر رنگ بپردازیم، مفید است که با مدل‌های رنگ مختلفی که پشتیبانی می‌کند آشنا شویم:

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

RGB یک مدل رنگ افزایشی است که در آن نور قرمز، سبز و آبی به طرق مختلف ترکیب می‌شود تا طیف وسیعی از رنگ‌ها را بازتولید کند. در برنامه‌های دیجیتال:

هر مؤلفه (R، G، B) از ۰ تا ۲۵۵ متغیر است
RGB(۲۵۵، ۰، ۰) نمایانگر قرمز خالص است
RGB(۰، ۲۵۵، ۰) نمایانگر سبز خالص است
RGB(۰، ۰، ۲۵۵) نمایانگر آبی خالص است
RGB(۲۵۵، ۲۵۵، ۲۵۵) نمایانگر سفید است
RGB(۰، ۰، ۰) نمایانگر سیاه است

مدل RGB به طور مستقیم با نحوه نمایش رنگ‌ها بر روی صفحه نمایش‌ها مرتبط است و به همین دلیل انتخاب اصلی برای طراحی دیجیتال است.

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

کدهای رنگ هگزادسیمال روشی برای نمایندگی رنگ‌های RGB با استفاده از سیستم عددی مبنای ۱۶ هستند:

یک رنگ هگزادسیمال با علامت پوند (#) شروع می‌شود و پس از آن شش کاراکتر قرار می‌گیرد
جفت اول نمایانگر قرمز، جفت دوم سبز و جفت سوم آبی است
هر جفت از ۰۰ تا FF (۰-۲۵۵ در مبنای ده) متغیر است
#FF0000 نمایانگر قرمز خالص است
#00FF00 نمایانگر سبز خالص است
#0000FF نمایانگر آبی خالص است
برای برخی رنگ‌ها، نوتیشن مختصر موجود است (به عنوان مثال، #F00 برای قرمز)

کدهای هگزادسیمال به طور گسترده‌ای در توسعه وب (CSS، HTML) و برنامه‌های طراحی دیجیتال استفاده می‌شوند.

CMYK (فیروزه‌ای، سرخابی، زرد، کلید/سیاه)

CMYK یک مدل رنگ کاهشی است که عمدتاً در چاپ رنگی استفاده می‌شود:

هر مؤلفه از ۰٪ تا ۱۰۰٪ متغیر است
CMYK(۰، ۱۰۰، ۱۰۰، ۰) نمایانگر قرمز خالص است
CMYK(۱۰۰، ۰، ۱۰۰، ۰) نمایانگر سبز خالص است
CMYK(۱۰۰، ۱۰۰، ۰، ۰) نمایانگر آبی خالص است
CMYK(۰، ۰، ۰، ۱۰۰) نمایانگر سیاه است
CMYK(۰، ۰، ۰، ۰) نمایانگر سفید (رنگ کاغذ) است

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

HSV (رنگ، اشباع، ارزش)

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}$

برای رنگ (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  // مدیریت هگز ۳ رقمی و ۶ رقمی
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    # مدیریت هگز ۳ رقمی و ۶ رقمی
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        // مدیریت هگز ۳ رقمی و ۶ رقمی
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

منابع

۱. آگستون، م. ک. (۲۰۱۳). گرافیک کامپیوتری و مدل‌سازی هندسی: پیاده‌سازی و الگوریتم‌ها. انتشارات اسپرینگر.

۲. سیستم‌های ادوبی. (۲۰۰۰). کدگذاری تصویر رنگی Adobe RGB (۱۹۹۸). شرکت ادوبی سیستمز.

۳. فیرچایلد، م. د. (۲۰۱۳). مدل‌های ظاهر رنگ. جان وایلی و پسران.

۴. هانت، ر. و. گ.، و پوینتر، م. ر. (۲۰۱۱). اندازه‌گیری رنگ. جان وایلی و پسران.

۵. پویتون، ک. (۲۰۱۲). ویدئو دیجیتال و HD: الگوریتم‌ها و رابط‌ها. الزویر.

۶. W3C. (۲۰۱۸). ماژول رنگ CSS سطح ۴. پیش‌نویس کار W3C. از https://www.w3.org/TR/css-color-4/ دریافت شده است.

۷. دستورالعمل‌های دسترسی به محتوای وب (WCAG) ۲.۱. (۲۰۱۸). از https://www.w3.org/TR/WCAG21/ دریافت شده است.

۸. کنسرسیوم رنگ بین‌المللی. (۲۰۰۴). مشخصات ICC.1:2004-10 (نسخه پروفایل ۴.۲.۰.۰). از http://www.color.org/specification/ICC1v42_2006-05.pdf دریافت شده است.

امروز ابزار انتخاب رنگ ما را امتحان کنید!

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

اکنون شروع به آزمایش با رنگ‌ها کنید و طراحی‌های خود را به سطح بعدی ببرید!

Whiz Tools

انتخابگر رنگ ساده: انتخاب و کپی مقادیر رنگ RGB، Hex و CMYK

انتخاب رنگ

RGB (۰-۲۵۵)

CMYK (۰-۱۰۰)