Простий та зручний інструмент для вибору кольору

Вступ

Інструмент вибору кольору — це інтуїтивно зрозумілий, легкий у використанні додаток, призначений для допомоги користувачам у виборі, візуалізації та конвертації кольорів у кількох колірних форматах. Незалежно від того, чи ви веб-дизайнер, який створює кольорову схему, цифровий художник, який шукає ідеальний відтінок, або розробник, який реалізує інтерфейс користувача, цей вибір кольору забезпечує простий спосіб роботи з кольорами в 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.0
24    g_norm = g / 255.0
25    b_norm = b / 255.0
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)