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

Въведение

Инструментът за избор на цветове е интуитивно, лесно за използване приложение, проектирано да помага на потребителите да избират, визуализират и конвертират цветове в множество цветови формати. Независимо дали сте уеб дизайнер, който създава цветова схема, цифров художник, който търси перфектния нюанс, или разработчик, който реализира потребителски интерфейс, този инструмент за избор на цветове предлага прост начин за работа с цветове в 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-цифрени шестнадесетични
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-цифрени шестнадесетични
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-цифрени шестнадесетични
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)