У чому різниця між RGB та CMYK?

RGB використовується для екранів, CMYK — для друку. Екрани створюють кольори, випромінюючи червоне, зелене та синє світло (адитивне змішування), а принтери створюють кольори, накладаючи шари блакитних, пурпурових, жовтих та чорних чорнил на папір (субтрактивне змішування). RGB може відтворювати яскравіші, більш насичені кольори, ніж CMYK, оскільки світло має ширший колірний діапазон, ніж чорнило. Саме тому кольори на екрані часто здаються тьмянішими при друці.

Чому мої кольори виглядають інакше при друці?

Екрани випромінюють світло, папір відбиває його — це принципово різні процеси. Крім того, RGB оперує мільйонами кольорів, які чорнила CMYK просто не можуть відтворити. Калібрування екрана, якість паперу та варіації чорнил додають ще більше відмінностей. Завжди перевіряйте значення CMYK перед друком і замовляйте фізичні проби для критично важливої роботи з кольором.

Як отримати hex-коди кольорів, які я бачу в інтернеті?

Використовуйте інструменти розробника у браузері. У Chrome або Firefox клацніть правою кнопкою миші будь-який елемент, виберіть "Inspect", потім клацніть на маленький квадратик кольору в панелі стилів. Це відкриє вибірник кольорів, який показує hex-код. Розширення браузера, як-от ColorZilla, роблять це ще швидше — вони дозволяють клацнути будь-де на сторінці, щоб отримати значення кольору.

Що означає символ # у hex-кодах?

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

Чому працюють 3-значні hex-коди?

Це скорочення для випадків, коли кожен канал кольору повторюється. #F00 розширюється до #FF0000 (червоний), #C9C стає #CC99CC (світло-фіолетовий). Цей скорочений запис було створено в 1990-х роках, щоб зменшити розмір файлів, коли пропускна здатність була дорогою. Сьогодні він все ще зручний для простих кольорів.

Наскільки точні перетворення кольорів?

Перетворення RGB-to-hex математично точні — це ті самі значення в різних системах числення. Перетворення RGB-to-CMYK є наближеннями, оскільки ви перетворюєте між принципово різними колірними просторами (світло проти чорнила). Інструмент використовує стандарти ICC колірних профілів для цих перетворень, що є тим самим підходом, який використовують професійні програми для дизайну.

Як створити доступні колірні комбінації?

Використовуйте перевірник контрастності, як-от інструмент WebAIM, після вибору кольорів. Потрібне співвідношення 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() безпосередньо. Згідно зі специфікацією модуля кольорів CSS W3C, RGB є основною колірною моделлю для веб-стандартів.

Шістнадцятковий (Hex)

Hex-коди — це просто RGB-значення, записані в 16-річній системі замість 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

Посилання та додаткові матеріали

Модуль кольорів CSS рівня 4 від W3C - Офіційна специфікація веб-кольорів
Настанови WCAG 2.1 щодо контрастності - Стандарти доступності для контрастності кольорів
Перевірник контрастності WebAIM - Перевірка співвідношення контрастності кольорів
Стандарти колірного профілю ICC - Технічна специфікація для перетворення кольорів
Веб-документація MDN: Значення кольорів 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 та інше