В чем разница между RGB и CMYK?

RGB используется для экранов, CMYK — для печати. Экраны создают цвета, излучая красный, зеленый и синий свет (аддитивное смешивание), в то время как принтеры создают цвета, накладывая слои голубых, пурпурных, желтых и черных чернил на бумагу (субтрактивное смешивание). RGB может производить более яркие, насыщенные цвета, чем CMYK, потому что свет имеет более широкую цветовую гамму, чем чернила. Именно поэтому цвета на экране часто выглядят тусклее при печати.

Почему цвета выглядят по-другому при печати?

Экраны излучают свет, бумага отражает его — это принципиально разные процессы. Кроме того, RGB обрабатывает миллионы цветов, которые чернила CMYK просто не могут воспроизвести. Калибровка экрана, качество бумаги и различия в чернилах добавляют еще больше вариативности. Всегда проверяйте значения CMYK перед печатью и запрашивайте физические пробы для критически важной цветопередачи.

Как получить hex-коды цветов, которые я вижу в интернете?

Используйте инструменты разработчика в браузере. В Chrome или Firefox щелкните правой кнопкой мыши любой элемент, выберите "Инспектировать", затем нажмите на маленький цветной квадрат в панели стилей. Откроется выбор цвета, который покажет hex-код. Расширения браузера, такие как ColorZilla, делают это еще быстрее — они позволяют щелкнуть в любом месте страницы, чтобы получить значение цвета.

Что означает символ # в hex-кодах?

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

Почему работают 3-значные hex-коды?

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

Насколько точны преобразования цветов?

Преобразования RGB в hex математически точны — это одни и те же значения в разных системах счисления. Преобразования RGB в 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 Цветовых Кодов

Что вы можете делать с помощью этого выбора цвета

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

Инструмент Выбора Цвета - Преобразование RGB, Hex, CMYK и HSV Цветовых Кодов

Выбор цвета

RGB (0-255)

CMYK (0-100)

Выбор цвета

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

Что вы можете делать с помощью этого выбора цвета

Понимание цветовых моделей

RGB (Красный, Зеленый, Синий)

Шестнадцатеричный (Hex)

CMYK (Голубой, Пурпурный, Желтый, Ключевой/Черный)

HSV (Тон, Насыщенность, Значение)

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

Преобразование RGB в Hex

Преобразование RGB в CMYK

Преобразование RGB в HSV

Ссылки и дополнительные материалы

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

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

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

Конвертер систем счисления: Двоичная, Шестнадцатеричная, Десятичная и Восьмеричная

Предсказатель окраса кроликов – Калькулятор цвета шерсти крольчат

Конвертер из двоичной в десятичную систему | Бесплатный онлайн инструмент

Конвертер PX в REM и EM – Бесплатный CSS калькулятор единиц

Декодер изображений Base64 | Декодирование и предварительный просмотр изображений онлайн

Калькулятор разбавления отбеливателя: точные пропорции для безопасной уборки

Конвертер пикселей в дюймы - Бесплатный калькулятор DPI (2025)

Калькулятор длины битов и байтов - бесплатный инструмент для работы с размером данных

Бесплатный форматировщик кода: Улучшение JavaScript, Python, HTML и других языков