Каква е разликата между RGB и CMYK?

RGB е за екрани, CMYK е за печат. Екраните създават цветове, като излъчват червена, зелена и синя светлина (адитивно смесване), докато принтерите създават цветове, като слагат един върху друг cyan, магента, жълти и черни мастила върху хартия (субтрактивно смесване). RGB може да произвежда по-ярки и наситени цветове от CMYK, защото светлината има по-широк цветови обхват от мастилото. Ето защо цветовете на екрана често изглеждат по-блещи, когато се отпечатат.

Защо цветовете ми изглеждат различно, когато се отпечатат?

Екраните излъчват светлина, хартията я отразява - това са fundamentally различни процеси. Освен това, RGB борави с милиони цветове, които CMYK мастилата просто не могат да възпроизведат. Калибрирането на екрана, качеството на хартията и вариациите в мастилата добавят допълнителна променливост. Винаги проверявайте CMYK стойностите преди печат и поискайте физически проби за критична работа с цветово съответствие.

Как да получа hex кодове от цветове, които виждам онлайн?

Използвайте инструментите за разработчици на браузъра. В Chrome или Firefox, щракнете с десен бутон върху който и да е елемент, изберете „Инспектирай", после щракнете върху малкия цветен квадрат в панела със стиловете. Това отваря цветови избирач, който показва hex кода. Разширения за браузъра като ColorZilla правят това още по-бързо - те ви позволяват да щракнете навсякъде на страницата, за да хванете нейната цветова стойност.

Какво означава символът # в hex кодовете?

Това е просто представка, която казва на браузъра „това е шестнадесетичен цветови код". Стандартът идва от ранните HTML и CSS спецификации. Шестте знака след # представляват RGB стойности в base-16: два знака за червено, два за зелено, два за синьо. Без #, браузърите няма да го разпознаят като цвят.

Защо 3-цифрените hex кодове работят?

Те са съкратен вариант, когато всеки цветови канал се повтаря. #F00 се разширява до #FF0000 (червено), #C9C става #CC99CC (светло лилаво). Този съкратен вариант е създаден през 90-те години, за да намали размера на файловете, когато широчината на честотната лента беше скъпа. И днес е удобен за прости цветове.

Точни ли са конверсиите на цветове?

RGB към hex конверсиите са математически точни - те са едни и същи стойности в различни числени бази. RGB към CMYK конверсиите са приближения, защото се преобразуват между фундаментално различни цветови пространства (светлина срещу мастило). Инструментът използва ICC стандарти за цветови профили за тези конверсии, което е същият подход, който използва професионалният дизайнерски софтуер.

Как да създам достъпни цветови комбинации?

Използвайте инструмент за проверка на контраста като WebAIM's tool след като изберете цветовете си тук. Нужен е съотношение 4.5:1 за нормален текст, 3:1 за голям текст. Избягвайте комбинации от червено и зелено (най-трудни за хора с цветна слепота). Когато се съмнявате, по-тъмен текст върху по-светли фонове или обратното - достатъчната разлика в луминесценция е от най-голямо значение.

Мога ли да избирам цветове от изображения?

Не директно в този инструмент. Използвайте разширение за браузъра като ColorZilla или направете скрийншот на изображението и използвайте цветови избирач на операционната система (Digital Color Meter на macOS, PowerToys Color Picker на Windows). Щом получите цветовата стойност, въведете я тук, за да конвертирате между формати.

Защо някои RGB цветове не се конвертират добре към CMYK?

CMYK има по-тесен „гамут" (обхват от възпроизводими цветове) от RGB. Ярките сини, вибриращите зелени и електрическите оранжеви често са извън това, което CMYK мастилата могат физически да създадат. Когато това се случи, принтерът замества най-близкото възможно съответствие, което обикновено изглежда по-малко наситено. Професионалните дизайнери за печат често започват с CMYK-безопасни цветове, за да избегнат този проблем.

Инструмент за избор на цвят - Конвертиране на RGB, Hex, CMYK и HSV цветови кодове

Какво можете да направите с този Color Picker

Нужен ви е перфектен нюанс за вашия проект? Този color picker ви позволява да избирате, преглеждате и конвертирате цветове между RGB, Hex, 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 Color Module, RGB е основният цветови модел за уеб стандарти.

Шестнадесетичен (Hex)

Hex кодовете са просто RGB стойности, записани в base-16 вместо base-10. Hex цветът изглежда като #FF5733, където:

Символът # го маркира като hex код
Първите два знака = червено (00-FF)
Средните два = зелено (00-FF)
Последните два = синьо (00-FF)
#FF0000 = червено, #00FF00 = зелено, #0000FF = синьо

Понякога ще видите 3-символен съкратен запис като #F00 вместо #FF0000 - това работи, когато всеки цветови канал повтаря същия цифров знак.

Кога да използваме Hex: Уеб разработването е основната употреба. CSS винаги е поддържал hex нотация, и повечето разработчици я намират за по-бърза за въвеждане от 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 компонент (0-255) към двуцифрено шестнадесетично число
Свържете трите шестнадесетични стойности с префикс #

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

Където toHex() преобразува десетично число към неговото шестнадесетично представяне.

Преобразуване от RGB към CMYK

Преобразуването от RGB към CMYK включва следните стъпки:

Нормализиране на RGB стойностите към обхват 0-1
Изчисляване на черния ключов компонент (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  // Обработка на 3-цифрени и 6-цифрени hex стойности
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-цифрени hex стойности
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-цифрени hex стойности
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

Препратки и допълнителна литература

W3C CSS Color Module Level 4 - Официална спецификация за уеб цветове
WCAG 2.1 Насоки за контраст - Стандарти за достъпност при цветен контраст
WebAIM Проверка на контраст - Тестване на цветови контраст
ICC Стандарти за цветови профили - Техническа спецификация за цветови преобразувания
MDN Web Docs: CSS Цветови стойности - Изчерпателно ръководство за уеб цветови формати

Инструмент за избор на цвят - Конвертиране на RGB, Hex, CMYK и HSV цветови кодове

Избор на цвят

RGB (0-255)

CMYK (0-100)

Избор на цвят

Документация

Какво можете да направите с този Color Picker

Разбиране на цветовите модели

RGB (Червено, Зелено, Синьо)

Шестнадесетичен (Hex)

CMYK (Циан, Магента, Жълто, Ключ/Черно)

HSV (Нюанс, Наситеност, Стойност)

Формули за преобразуване на цветове

Преобразуване от RGB към Hex

Преобразуване от RGB към CMYK

Преобразуване от RGB към HSV

Препратки и допълнителна литература

Генератор на цветови палитри - Създайте хармонични цветови схеми

CSS Генератор на Свойства - Градиенти, Сенки и Граници

Безплатен генератор на QR кодове - Създайте сканируеми QR кодове мигновено

Конвертор на числени бази: Двоична, Шестнадесетична, Десетична и Осмична

Предсказвач на цвета на зайче – Изчисляване на цветовете на бебета зайчета

Двоичен към десетичен конвертор | Безплатен онлайн инструмент

Конвертор от PX към REM към EM – Безплатен CSS калкулатор за единици

Base64 декодер на изображения | Декодиране и преглед на изображения онлайн

Калкулатор за разреждане на белина: Точни съотношения за безопасно почистване

Конвертор от пиксели към инчове - Безплатен DPI калкулатор (2025)

Калкулатор за дължина на битове и байтове - Безплатен инструмент за размер на данни

Безплатен форматиращ инструмент за код: Подобряване на JavaScript, Python, HTML и други