Jaka jest różnica między RGB a CMYK?

RGB jest przeznaczony do ekranów, CMYK do druku. Ekrany tworzą kolory poprzez emisję czerwonego, zielonego i niebieskiego światła (mieszanie addytywne), podczas gdy drukarki tworzą kolory przez nakładanie warstw cyjanowych, magentowych, żółtych i czarnych atramentów na papierze (mieszanie subtraktywne). RGB może tworzyć jaśniejsze, bardziej żywe kolory niż CMYK, ponieważ światło ma szerszy zakres kolorów niż atrament. Dlatego kolory na ekranie często wyglądają bardziej matowo po wydrukowaniu.

Dlaczego moje kolory wyglądają inaczej po wydrukowaniu?

Ekrany emitują światło, papier je odbija — to fundamentalnie różne procesy. Ponadto RGB obsługuje miliony kolorów, których atramenty CMYK po prostu nie mogą odtworzyć. Kalibracja ekranu, jakość papieru i zmiany atramentów dodają jeszcze więcej zmienności. Zawsze sprawdzaj wartości CMYK przed drukowaniem i proś o fizyczne próby w przypadku krytycznej pracy z dopasowywaniem kolorów.

Jak zdobyć kody hex z kolorów widzianych online?

Użyj narzędzi programistycznych przeglądarki. W Chrome lub Firefox kliknij prawym przyciskiem myszy dowolny element, wybierz „Zbadaj", a następnie kliknij małą kolorową kratkę w panelu stylów. Spowoduje to otwarcie selektora kolorów, który pokazuje kod hex. Rozszerzenia przeglądarki, takie jak ColorZilla, sprawiają, że to jeszcze szybsze — pozwalają kliknąć w dowolnym miejscu strony, aby pobrać wartość koloru.

Co oznacza symbol # w kodach hex?

To po prostu prefiks mówiący przeglądarce „to jest szesnastkowy kod koloru". Standard pochodzi z wczesnych specyfikacji HTML i CSS. Sześć znaków po # reprezentuje wartości RGB w systemie szesnastkowym: dwie cyfry dla czerwonego, dwie dla zielonego, dwie dla niebieskiego. Bez # przeglądarki nie rozpoznają tego jako koloru.

Dlaczego kody hex trzycyfrowe działają?

Są skrótem, gdy każdy kanał koloru się powtarza. #F00 rozszerza się do #FF0000 (czerwony), #C9C staje się #CC99CC (jasny fiolet). Ten skrót został stworzony w latach 90., aby zmniejszyć rozmiary plików, gdy przepustowość była droga. Nadal jest wygodny dla prostych kolorów.

Czy konwersje kolorów są dokładne?

Konwersje RGB na hex są matematycznie dokładne — to te same wartości w różnych systemach liczbowych. Konwersje RGB na CMYK są przybliżeniami, ponieważ konwertujesz między fundamentalnie różnymi przestrzeniami kolorów (światło vs. atrament). Narzędzie używa standardów profili kolorów ICC do tych konwersji, co jest tym samym podejściem, które stosuje profesjonalne oprogramowanie projektowe.

Jak tworzyć dostępne kombinacje kolorów?

Użyj sprawdzacza kontrastu, takiego jak narzędzie WebAIM, po wybraniu kolorów. Potrzebujesz współczynnika 4,5:1 dla normalnego tekstu, 3:1 dla dużego tekstu. Unikaj kombinacji czerwono-zielonych (najtrudniejszych dla osób z daltonizmem). W razie wątpliwości — ciemniejszy tekst na jaśniejszych tłach lub odwrotnie — najważniejsza jest wystarczająca różnica luminancji.

Czy mogę wybierać kolory z obrazów?

Nie bezpośrednio w tym narzędziu. Użyj rozszerzenia przeglądarki, takiego jak ColorZilla, lub zrób zrzut ekranu i skorzystaj z selektora kolorów systemu operacyjnego (Digital Color Meter na macOS, PowerToys Color Picker w Windows). Gdy już masz wartość koloru, wprowadź ją tutaj, aby przekonwertować między formatami.

Dlaczego niektóre kolory RGB nie konwertują się dobrze do CMYK?

CMYK ma węższy „gamut" (zakres reprodukowalnych kolorów) niż RGB. Jasne błękity, żywe zielenie i elektryczne pomarańcze często wykraczają poza to, co fizycznie mogą stworzyć atrnamenty CMYK. Gdy tak się dzieje, drukarka podstawia najbliższy możliwy odpowiednik, który zwykle wygląda mniej nasycono. Profesjonalni projektanci druków często zaczynają od kolorów bezpiecznych dla CMYK, aby uniknąć tego problemu.

Narzędzie Wyboru Koloru - Konwersja kodów kolorów RGB, Hex, CMYK i HSV

Co możesz zrobić za pomocą tego selektora kolorów

Potrzebujesz idealnego odcienia do swojego projektu? Ten selektor kolorów pozwala na wybór, podgląd i konwersję kolorów między formatami RGB, Hex, CMYK i HSV w mgnieniu oka. Bez względu na to, czy projektujesz stronę internetową, logo, czy przygotowujesz pliki do druku, znajdziesz dokładnie takie wartości kolorów, jakich potrzebujesz — bez zgadywania i przełączania się między narzędziami.

Kliknij w dowolnym miejscu spektrum kolorów, aby wybrać odcień, dostosuj jasność za pomocą suwaka lub wprowadź precyzyjne wartości bezpośrednio. Każdy format aktualizuje się w czasie rzeczywistym, a kod koloru można skopiować jednym kliknięciem.

Zrozumienie Modeli Kolorów

Różne projekty wymagają różnych formatów kolorów. Oto co robi każdy z nich i kiedy go używać:

RGB (Czerwony, Zielony, Niebieski)

RGB działa poprzez mieszanie czerwonego, zielonego i niebieskiego światła — w taki sam sposób, w jaki twój ekran wyświetla kolory już teraz. Każdy składnik waha się od 0 do 255:

RGB(255, 0, 0) = czysta czerwień
RGB(0, 255, 0) = czysta zieleń
RGB(0, 0, 255) = czysty błękit
RGB(255, 255, 255) = biel
RGB(0, 0, 0) = czerń

Kiedy używać RGB: Wszelkie prace cyfrowe — strony internetowe, aplikacje mobilne, edycja wideo lub grafika ekranowa. Jest to język macierzysty wyświetlaczy, dlatego narzędzia takie jak CSS bezpośrednio obsługują funkcje rgb() i rgba(). Zgodnie ze specyfikacją modułu kolorów CSS W3C, RGB jest podstawowym modelem kolorów dla standardów sieciowych.

Szesnastkowy (Hex)

Kody hex to po prostu wartości RGB zapisane w systemie szesnastkowym zamiast dziesiętnym. Kolor hex wygląda jak #FF5733, gdzie:

Symbol # oznacza, że jest to kod hex
Pierwsze dwa znaki = czerwień (00-FF)
Środkowe dwa = zieleń (00-FF)
Ostatnie dwa = błękit (00-FF)
#FF0000 = czerwień, #00FF00 = zieleń, #0000FF = błękit

Czasami zobaczysz skróconą formę trzycyfrową jak #F00 zamiast #FF0000 — działa to, gdy każdy kanał koloru powtarza tę samą cyfrę.

Kiedy używać Hex: Głównym zastosowaniem jest tworzenie stron internetowych. CSS zawsze obsługiwał notację hex, a większość programistów uważa ją za szybszą w pisaniu niż rgb(). Częsta wpadka: zapomnienie symbolu # spowoduje ciche zerwanie stylów, ponieważ przeglądarki nie rozpoznają go jako poprawnego koloru.

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

CMYK to model kolorów używany przez drukarki. W przeciwieństwie do RGB (które dodaje światło), CMYK je odejmuje — mieszając farby na białym papierze, aby tworzyć kolory:

Każdy składnik waha się od 0% do 100%
CMYK(0, 100, 100, 0) = czerwień
CMYK(100, 0, 100, 0) = zieleń
CMYK(0, 0, 0, 100) = czysta czerń
CMYK(0, 0, 0, 0) = brak farby (widać białość papieru)

Kiedy używać CMYK: Projektowanie do druku — wizytówki, broszury, magazyny, opakowania. Oto rzeczywistość: wiele żywych kolorów RGB po prostu nie może być reprodukowanych za pomocą farb CMYK. Ten jaskrawy elektryczny błękit, który widzisz na ekranie? Będzie wyglądał bardziej matowo po wydrukowaniu. Profesjonalni projektanci zawsze sprawdzają konwersje CMYK przed wysłaniem plików do drukarni, aby uniknąć niespodzianek.

HSV (Odcień, Nasycenie, Wartość)

HSV rozbija kolor na trzy intuicyjne składniki:

Odcień: Która rodzina kolorów (0-360°) — 0° to czerwień, 120° to zieleń, 240° to błękit
Nasycenie: Jak żywy lub szary (0-100%) — 0% to skala szarości, 100% to pełne nasycenie
Wartość: Jak jasny lub ciemny (0-100%) — 0% to czerń, 100% to pełna jasność

Dlaczego HSV ma znaczenie: Odpowiada temu, jak ludzie naturalnie myślą o kolorze. Chcesz ciemniejszy błękit? Obniż wartość. Chcesz mniej intensywny błękit? Obniż nasycenie. Sprawia to, że HSV jest idealny dla interaktywnych selektorów kolorów, gdzie wybierasz odcień na spektrum i regulujesz jasność suwakiem.

Formuły konwersji kolorów

Selektor kolorów automatycznie konwertuje między różnymi modelami kolorów, używając tych matematycznych formuł:

Konwersja RGB do Hex

Aby przekonwertować RGB do szesnastkowego:

Przekonwertuj każdy składnik 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 do CMYK

Konwersja z RGB do CMYK obejmuje następujące kroki:

Znormalizuj wartości RGB do zakresu 0-1
Oblicz składnik czerni klucza (K)
Oblicz C, M i Y w oparciu o 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 do HSV

Konwertowanie RGB do 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 do 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 do RGB
12function hexToRgb(hex) {
13  // Usuń # jeśli jest obecny
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Obsługa hex 3-cyfrowego i 6-cyfrowego
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 do CMYK
29function rgbToCmyk(r, g, b) {
30  // Normalizacja wartości RGB
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Oblicz K (czerń)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Obsługa czerni czystej
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ładowe użycie
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 do Hex
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Konwersja Hex do RGB
6def hex_to_rgb(hex_color):
7    # Usuń # jeśli jest obecny
8    hex_color = hex_color.lstrip('#')
9    
10    # Obsługa hex 3-cyfrowego i 6-cyfrowego
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 do CMYK
21def rgb_to_cmyk(r, g, b):
22    # Normalizacja wartości RGB
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # Oblicz K (czerń)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Obsługa czerni czystej
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ładowe użycie
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Błękit
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 do 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 do 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ługa hex 3-cyfrowego i 6-cyfrowego
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 do CMYK
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normalizacja 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 (czerń)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Obsługa czerni czystej
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ładowe użycie
60        int r = 75, g = 0, b = 130;  // Fiolet
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

Referencje i Dalsza Lektura

Moduł Kolorów CSS W3C Poziom 4 - Oficjalna specyfikacja kolorów internetowych
Wytyczne WCAG 2.1 dotyczące Kontrastu - Standardy dostępności dla kontrastu kolorów
Sprawdzarka Kontrastu WebAIM - Testowanie współczynników kontrastu kolorów
Standardy Profili Kolorów ICC - Specyfikacja techniczna konwersji kolorów
Dokumentacja MDN: Wartości Kolorów CSS - Kompleksowy przewodnik po formatach kolorów internetowych

Narzędzie Wyboru Koloru - Konwersja kodów kolorów RGB, Hex, CMYK i HSV

Wybieracz Kolorów

RGB (0-255)

CMYK (0-100)

Wybieracz Kolorów

Dokumentacja

Co możesz zrobić za pomocą tego selektora kolorów

Zrozumienie Modeli Kolorów

RGB (Czerwony, Zielony, Niebieski)

Szesnastkowy (Hex)

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

HSV (Odcień, Nasycenie, Wartość)

Formuły konwersji kolorów

Konwersja RGB do Hex

Konwersja RGB do CMYK

Konwersja RGB do HSV

Referencje i Dalsza Lektura

Generator Palety Kolorów - Twórz Harmonijne Zestawy Kolorów

Generator Własności CSS - Gradienty, Cienie i Obramowania

Darmowy Generator Kodów QR - Twórz Skanowalne Kody QR Natychmiast

Konwerter Systemów Liczbowych: Binarny, Heksadecymalny, Dziesiętny i Ósemkowy

Przewidywanie Koloru Królika – Kalkulator Kolorów Futra Młodych Króliczków

Konwerter Binarny na Dziesiętny | Darmowe Narzędzie Online

Konwerter PX na REM i EM – Darmowy Kalkulator Jednostek CSS

Dekoder Base64 obrazów | Dekoduj i podglądaj obrazy online

Kalkulator Rozcieńczania Wybieracza: Dokładne Proporcje dla Bezpiecznego Czyszczenia

Konwerter pikseli na cale - Darmowy kalkulator DPI (2025)

Kalkulator długości bitów i bajtów - Darmowe narzędzie do rozmiaru danych

Darmowy Formatowacz Kodu: Upiększ JavaScript, Python, HTML i więcej