Prosty i Przyjazny Użytkownikowi Narzędzie Wybierania Kolorów

Wprowadzenie

Narzędzie Wybierania Kolorów to intuicyjna, łatwa w użyciu aplikacja zaprojektowana, aby pomóc użytkownikom w wyborze, wizualizacji i konwersji kolorów w różnych formatach kolorów. Niezależnie od tego, czy jesteś projektantem stron internetowych tworzącym schemat kolorów, artystą cyfrowym poszukującym idealnego odcienia, czy deweloperem wdrażającym interfejs użytkownika, to narzędzie do wyboru kolorów zapewnia prosty sposób pracy z kolorami w formatach RGB, szesnastkowym, CMYK i HSV. Dzięki interaktywnej palecie kolorów, suwakowi jasności i precyzyjnym opcjom wprowadzania, możesz szybko znaleźć, dostosować i skopiować wartości kolorów do swoich projektów.

Zrozumienie Modeli Kolorów

Zanim zanurzymy się w to, jak używać narzędzia do wyboru kolorów, pomocne jest zrozumienie różnych modeli kolorów, które obsługuje:

RGB (Czerwony, Zielony, Niebieski)

RGB to model kolorów addytywnych, w którym czerwone, zielone i niebieskie światło są łączone w różnych kombinacjach, aby odtworzyć szeroki wachlarz kolorów. W aplikacjach cyfrowych:

Każdy komponent (R, G, B) ma zakres od 0 do 255
RGB(255, 0, 0) reprezentuje czystą czerwień
RGB(0, 255, 0) reprezentuje czystą zieleń
RGB(0, 0, 255) reprezentuje czysty niebieski
RGB(255, 255, 255) reprezentuje biel
RGB(0, 0, 0) reprezentuje czerń

Model RGB jest bezpośrednio związany z tym, jak kolory są wyświetlane na ekranach, co czyni go głównym wyborem w projektowaniu cyfrowym.

Szesnastkowy (Hex)

Kody kolorów szesnastkowych to sposób reprezentacji kolorów RGB za pomocą systemu liczbowego o podstawie 16:

Kolor hex zaczyna się od znaku hash (#), po którym następuje sześć znaków
Pierwsza para reprezentuje czerwień, druga zieleń, a trzecia niebieski
Każda para ma zakres od 00 do FF (0-255 w systemie dziesiętnym)
#FF0000 reprezentuje czystą czerwień
#00FF00 reprezentuje czystą zieleń
#0000FF reprezentuje czysty niebieski
Skrócona notacja jest dostępna dla niektórych kolorów (np. #F00 dla czerwonej)

Kody hex są szeroko stosowane w rozwoju stron internetowych (CSS, HTML) oraz w aplikacjach do projektowania cyfrowego.

CMYK (Cyjan, Magenta, Żółty, Klucz/Czarny)

CMYK to model kolorów subtraktywnych, głównie stosowany w druku kolorowym:

Każdy komponent ma zakres od 0% do 100%
CMYK(0, 100, 100, 0) reprezentuje czystą czerwień
CMYK(100, 0, 100, 0) reprezentuje czystą zieleń
CMYK(100, 100, 0, 0) reprezentuje czysty niebieski
CMYK(0, 0, 0, 100) reprezentuje czerń
CMYK(0, 0, 0, 0) reprezentuje biel (kolor papieru)

Chociaż głównie używany do druku, zrozumienie wartości CMYK może być pomocne przy projektowaniu treści, które ostatecznie będą drukowane.

HSV (Odcień, Nasycenie, Wartość)

HSV reprezentuje kolory w kategoriach:

Odcień: Typ koloru (czerwony, żółty, zielony itd.), mierzony w stopniach (0-360°)
Nasycenie: Intensywność lub czystość koloru (0-100%)
Wartość: Jasność koloru (0-100%)

HSV jest szczególnie przydatne do wyboru kolorów, ponieważ oddziela wybór koloru (odcień) od jego intensywności (nasycenie) i jasności (wartość), co ułatwia dostosowywanie kolorów.

Formuły Konwersji Kolorów

Narzędzie do wyboru kolorów automatycznie konwertuje między różnymi modelami kolorów za pomocą tych matematycznych formuł:

Konwersja RGB na Hex

Aby przekonwertować RGB na szesnastkowy:

Przekonwertuj każdy komponent RGB (0-255) na dwucyfrową liczbę szesnastkową
Połącz trzy wartości szesnastkowe z prefiksem #

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

Gdzie toHex() konwertuje liczbę dziesiętną na jej reprezentację szesnastkową.

Konwersja RGB na CMYK

Konwersja z RGB na CMYK obejmuje te kroki:

Normalizuj wartości RGB do zakresu 0-1
Oblicz komponent czarny (K)
Oblicz C, M i Y na podstawie 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\%$

Konwersja RGB na HSV

Konwertowanie RGB na 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}$

Dla Odcienia (H):

1// Konwersja RGB na 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// Konwersja Hex na RGB
12function hexToRgb(hex) {
13  // Usuń # jeśli jest obecny
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Obsłuż zarówno 3-cyfrowy, jak i 6-cyfrowy 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// Konwersja RGB na CMYK
29function rgbToCmyk(r, g, b) {
30  // Normalizuj wartości RGB
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Oblicz K (czarny)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Obsłuż czystą czerń
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Oblicz 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// Przykład użycia
57const rgb = { r: 255, g: 0, b: 0 }; // Czysta czerwień
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# Konwersja RGB na Hex
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Konwersja Hex na RGB
6def hex_to_rgb(hex_color):
7    # Usuń # jeśli jest obecny
8    hex_color = hex_color.lstrip('#')
9    
10    # Obsłuż zarówno 3-cyfrowy, jak i 6-cyfrowy 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# Konwersja RGB na CMYK
21def rgb_to_cmyk(r, g, b):
22    # Normalizuj wartości RGB
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # Oblicz K (czarny)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Obsłuż czystą czerń
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Oblicz 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# Przykład użycia
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Niebieski nieba
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    // Konwersja RGB na 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    // Konwersja Hex na RGB
8    public static int[] hexToRgb(String hexColor) {
9        // Usuń # jeśli jest obecny
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Obsłuż zarówno 3-cyfrowy, jak i 6-cyfrowy 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    // Konwersja RGB na CMYK
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normalizuj wartości RGB
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Oblicz K (czarny)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Obsłuż czystą czerń
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Oblicz 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        // Przykład użycia
60        int r = 75, g = 0, b = 130;  // Fioletowy
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

Źródła

Agoston, M. K. (2013). Computer Graphics and Geometric Modeling: Implementation and Algorithms. Springer Science & Business Media.
Adobe Systems. (2000). Adobe RGB (1998) Color Image Encoding. Adobe Systems Incorporated.
Fairchild, M. D. (2013). Color Appearance Models. John Wiley & Sons.
Hunt, R. W. G., & Pointer, M. R. (2011). Measuring Colour. John Wiley & Sons.
Poynton, C. (2012). Digital Video and HD: Algorithms and Interfaces. Elsevier.
W3C. (2018). CSS Color Module Level 4. W3C Working Draft. Retrieved from https://www.w3.org/TR/css-color-4/
Wytyczne dotyczące dostępności treści w sieci (WCAG) 2.1. (2018). Retrieved from https://www.w3.org/TR/WCAG21/
Międzynarodowa Komisja Kolorów. (2004). Specification ICC.1:2004-10 (Profile version 4.2.0.0). Retrieved from http://www.color.org/specification/ICC1v42_2006-05.pdf

Wypróbuj Nasze Narzędzie Wybierania Kolorów Już Dziś!

Gotowy, aby znaleźć idealny kolor do swojego projektu? Nasze przyjazne dla użytkownika narzędzie do wyboru kolorów ułatwia wybór, dostosowanie i konwersję kolorów między różnymi formatami. Niezależnie od tego, czy projektujesz stronę internetową, tworzysz sztukę cyfrową, czy planujesz materiały drukowane, nasze narzędzie zapewnia precyzję i elastyczność, której potrzebujesz.

Zacznij eksperymentować z kolorami już teraz i podnieś swoje projekty na wyższy poziom!

Whiz Tools

Prosty wybierak kolorów: Wybierz i skopiuj wartości kolorów RGB, Hex, CMYK

Wybór koloru

RGB (0-255)

CMYK (0-100)