Простой и удобный инструмент выбора цвета

Введение

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

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

Перед тем как углубиться в использование инструмента выбора цвета, полезно понять различные цветовые модели, которые он поддерживает:

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

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

Каждый компонент (R, G, B) варьируется от 0 до 255
RGB(255, 0, 0) представляет чистый красный
RGB(0, 255, 0) представляет чистый зеленый
RGB(0, 0, 255) представляет чистый синий
RGB(255, 255, 255) представляет белый
RGB(0, 0, 0) представляет черный

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

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

Шестнадцатеричные цветовые коды — это способ представления RGB цветов с использованием системы счисления с основанием 16:

Шестнадцатеричный цвет начинается с символа решетки (#), за которым следуют шесть символов
Первая пара представляет красный, вторая — зеленый, третья — синий
Каждая пара варьируется от 00 до FF (0-255 в десятичной системе)
#FF0000 представляет чистый красный
#00FF00 представляет чистый зеленый
#0000FF представляет чистый синий
Доступна сокращенная нотация для определенных цветов (например, #F00 для красного)

Шестнадцатеричные коды широко используются в веб-разработке (CSS, HTML) и приложениях цифрового дизайна.

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

CMYK — это субтрактивная цветовая модель, используемая в цветной печати:

Каждый компонент варьируется от 0% до 100%
CMYK(0, 100, 100, 0) представляет чистый красный
CMYK(100, 0, 100, 0) представляет чистый зеленый
CMYK(100, 100, 0, 0) представляет чистый синий
CMYK(0, 0, 0, 100) представляет черный
CMYK(0, 0, 0, 0) представляет белый (цвет бумаги)

Хотя в основном используется для печати, понимание значений CMYK может быть полезным при проектировании контента, который в конечном итоге будет напечатан.

HSV (Оттенок, Насыщенность, Яркость)

HSV представляет цвета в терминах:

Оттенок: Тип цвета (красный, желтый, зеленый и т.д.), измеряемый в градусах (0-360°)
Насыщенность: Интенсивность или чистота цвета (0-100%)
Яркость: Яркость цвета (0-100%)

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

Ссылки

Agoston, M. K. (2013). Компьютерная графика и геометрическое моделирование: Реализация и алгоритмы. Springer Science & Business Media.
Adobe Systems. (2000). Adobe RGB (1998) Кодирование цветного изображения. Adobe Systems Incorporated.
Fairchild, M. D. (2013). Модели цветового восприятия. John Wiley & Sons.
Hunt, R. W. G., & Pointer, M. R. (2011). Измерение цвета. John Wiley & Sons.
Poynton, C. (2012). Цифровое видео и HD: Алгоритмы и интерфейсы. Elsevier.
W3C. (2018). CSS Модуль цвета Уровень 4. W3C Рабочий черновик. Получено с https://www.w3.org/TR/css-color-4/
Руководство по доступности веб-контента (WCAG) 2.1. (2018). Получено с https://www.w3.org/TR/WCAG21/
Международный цветовой консорциум. (2004). Спецификация ICC.1:2004-10 (Версия профиля 4.2.0.0). Получено с http://www.color.org/specification/ICC1v42_2006-05.pdf

Попробуйте наш инструмент выбора цвета сегодня!

Готовы найти идеальный цвет для вашего проекта? Наш удобный инструмент выбора цвета облегчает выбор, настройку и преобразование цветов между различными форматами. Будь вы дизайнером веб-сайтов, создающим цифровое искусство или планирующим печатные материалы, наш инструмент предоставляет точность и гибкость, которые вам нужны.

Начните экспериментировать с цветами прямо сейчас и поднимите свои дизайны на новый уровень!

Whiz Tools

Простой выбор цвета: выбирайте и копируйте значения цвета RGB, Hex, CMYK

Выбор цвета

RGB (0-255)

CMYK (0-100)