Kolory: HEX, CMYK i RGB

Kolory to kluczowy element każdego projektu graficznego i wizualnego. Bez względu na to, czy tworzysz stronę internetową, projektujesz logo czy przygotowujesz materiały do druku, zrozumienie różnych przestrzeni kolorów, takich jak HEX, CMYK i RGB, jest niezbędne. W tym artykule wyjaśniamy, czym są te modele kolorów, jak działają i kiedy warto je stosować.

1. Co to są kolory HEX?

Definicja HEX

HEX (skrót od Hexadecimal) to sześciocyfrowy kod, który reprezentuje kolor w formacie cyfrowym. Jest powszechnie stosowany w projektach internetowych i aplikacjach cyfrowych, ponieważ każdy kolor HEX jest kompatybilny z przeglądarkami internetowymi i CSS.

Struktura kodu HEX

Każdy kolor w formacie HEX jest zapisany jako:

#RRGGBB

RR – komponent czerwony (Red)

GG – komponent zielony (Green)

BB – komponent niebieski (Blue)

Każda para cyfr (od 00 do FF) określa intensywność danego koloru.

Przykłady kolorów HEX

  • Biały: #FFFFFF
  • Czarny: #000000
  • Czerwony: #FF0000
  • Niebieski: #0000FF
  • Zielony: #00FF00

Zastosowanie HEX

Prace związane z grafiką cyfrową.

Projektowanie stron internetowych (HTML, CSS).

Tworzenie interfejsów użytkownika (UI).

2. Co to są kolory RGB?

Definicja RGB

RGB (Red, Green, Blue) to model kolorów używany do wyświetlania kolorów na ekranach, takich jak monitory, telewizory czy smartfony. Opiera się na zasadzie addytywnego mieszania kolorów – łączenie czerwonego, zielonego i niebieskiego światła tworzy różne barwy.

Struktura RGB

W modelu RGB każdy kolor jest zdefiniowany przez trzy wartości w zakresie od 0 do 255:

rgb(R, G, B)
  • R – ilość czerwieni.
  • G – ilość zieleni.
  • B – ilość niebieskiego.

Przykłady kolorów RGB

  • Biały: rgb(255, 255, 255)
  • Czarny: rgb(0, 0, 0)
  • Czerwony: rgb(255, 0, 0)
  • Zielony: rgb(0, 255, 0)
  • Niebieski: rgb(0, 0, 255)

Zastosowanie RGB

  • Grafika cyfrowa i multimedia.
  • Projekty przeznaczone na ekrany.
  • Animacje, filmy i gry komputerowe.

3. Co to są kolory CMYK?

Definicja CMYK

CMYK (Cyan, Magenta, Yellow, Key/Black) to model kolorów używany w druku. W przeciwieństwie do RGB, który jest modelem addytywnym, CMYK działa na zasadzie subtraktywnej – kolory są tworzone przez odejmowanie światła od białego podłoża (np. papieru).

Struktura CMYK

Każdy kolor w modelu CMYK jest reprezentowany przez cztery wartości w procentach:

cmyk(C%, M%, Y%, K%)
  • C – cyjan (błękit).
  • M – magenta (purpura).
  • Y – żółty.
  • K – czarny.

Przykłady kolorów CMYK

  • Biały: cmyk(0%, 0%, 0%, 0%) (brak farby na papierze).
  • Czarny: cmyk(0%, 0%, 0%, 100%).
  • Czerwony: cmyk(0%, 100%, 100%, 0%).
  • Niebieski: cmyk(100%, 100%, 0%, 0%).
  • Zielony: cmyk(100%, 0%, 100%, 0%).

Zastosowanie CMYK

  • Materiały drukowane: ulotki, plakaty, wizytówki, katalogi.
  • Poligrafia i przygotowanie do druku.
  • Projektowanie opakowań.

Pobierz kolor z obrazka

HEX: #000000

RGB: 0% R, 0% G, 0% B

5. Jak konwertować między modelami kolorów?

HEX do RGB:

Kolor zapisany w formacie HEX (szesnastkowym) wygląda tak: #RRGGBB, gdzie:

  • RR: komponent czerwony (Red),
  • GG: komponent zielony (Green),
  • BB: komponent niebieski (Blue).

Każda para znaków (RR, GG, BB) reprezentuje liczbę szesnastkową, którą należy przekonwertować na liczbę dziesiętną (RGB działa w zakresie 0–255).

Przykład: Konwersja HEX #FF5733 na RGB

  1. Podziel kod HEX na składniki:
    • RR = FF: komponent czerwony.
    • GG = 57: komponent zielony.
    • BB = 33: komponent niebieski.
  2. Przekonwertuj wartości szesnastkowe na dziesiętne:
    FF → 255
57 → 87
33 → 51
    • FF: (15 × 16) + 15 = 255.
    • 57: (5 × 16) + 7 = 87.
    • 33: (3 × 16) + 3 = 51.
  3. Złóż wynik: Kolor HEX #FF5733 to rgb(255, 87, 51).

RGB do HEX:

Kolor w formacie RGB to zapis w postaci rgb(R, G, B), gdzie:

  • R: wartość czerwieni (0–255),
  • G: wartość zieleni (0–255),
  • B: wartość niebieskiego (0–255).

Konwersja RGB do HEX polega na zamianie każdej liczby dziesiętnej na liczbę szesnastkową.

Przykład: Konwersja RGB rgb(255, 87, 51) na HEX

  1. Przekonwertuj każdy komponent na system szesnastkowy:
    • R = 255: (255 ÷ 16 = 15 reszta 15) → FF.
    • G = 87: (87 ÷ 16 = 5 reszta 7) → 57.
    • B = 51: (51 ÷ 16 = 3 reszta 3) → 33.
  2. Złóż wynik: Kolor RGB rgb(255, 87, 51) to #FF5733.

Podsumowanie:

– **HEX → RGB**: Odczytujemy składniki i zamieniamy je z systemu szesnastkowego na dziesiętny.
– **RGB → HEX**: Zamieniamy każdą wartość z systemu dziesiętnego na szesnastkowy i łączymy w ciąg #RRGGBB.

RGB do CMYK:

  1. Przelicz wartości RGB na skalę od 0 do 1:
    • Dziel każdą wartość RGB przez 255:
      • R_scaled = R / 255
G_scaled = G / 255
B_scaled = B / 255
  2. Oblicz wartość K (czarnego):
    • Znajdź maksymalną wartość spośród R_scaled, G_scaled i B_scaled:
      • K = 1 - max(R_scaled, G_scaled, B_scaled)
  3. Oblicz wartość C (cyjanowego):
    • Użyj wzoru:
      • C = (1 - R_scaled - K) / (1 - K), jeśli K ≠ 1
C = 0, jeśli K = 1
  4. Oblicz wartość M (magenty):
    • Podobnie jak dla C:
      • M = (1 - G_scaled - K) / (1 - K), jeśli K ≠ 1
M = 0, jeśli K = 1
  5. Oblicz wartość Y (żółtego):
    • Podobnie jak dla C i M:
      • Y = (1 - B_scaled - K) / (1 - K), jeśli K ≠ 1
Y = 0, jeśli K = 1

CMYK do RGB:

  1. Przelicz wartości CMYK na skalę RGB:
    • Użyj wzorów dla skali od 0 do 1:
      • R_scaled = (1 - C) * (1 - K)
G_scaled = (1 - M) * (1 - K)
B_scaled = (1 - Y) * (1 - K)
  2. Przelicz wartości z powrotem na skalę 0–255:
    • Pomnóż każdą skalowaną wartość przez 255:
      • R = R_scaled * 255
G = G_scaled * 255
B = B_scaled * 255

Aby przekonwertować kolor w formacie HEX na CMYK, wykonaj następujące kroki:

  1. Przekonwertuj HEX na RGB:

    Rozdziel HEX na komponenty RR, GG, BB, a następnie przekonwertuj każdą wartość szesnastkową na dziesiętną. (Szczegóły opisano w sekcji „HEX do RGB”).

  2. Przelicz wartości RGB na skalę od 0 do 1:
    • Dziel każdą wartość RGB przez 255:
      • R_scaled = R / 255
G_scaled = G / 255
B_scaled = B / 255
  3. Użyj formuł subtraktywnych do obliczenia wartości CMYK:
    • Oblicz K (czarny):
      • K = 1 - max(R_scaled, G_scaled, B_scaled)
    • Oblicz C (cyjanowy):
      • C = (1 - R_scaled - K) / (1 - K), jeśli K ≠ 1
C = 0, jeśli K = 1
    • Oblicz M (magenta):
      • M = (1 - G_scaled - K) / (1 - K), jeśli K ≠ 1
M = 0, jeśli K = 1
    • Oblicz Y (żółty):
      • Y = (1 - B_scaled - K) / (1 - K), jeśli K ≠ 1
Y = 0, jeśli K = 1
  4. Przelicz wartości CMYK na procenty:
    • Pomnóż każdą wartość CMYK (C, M, Y, K) przez 100, aby uzyskać wynik w procentach.

Przykład:

Weźmy kolor HEX: #FF5733

  1. Przekonwertuj HEX na RGB:

    #FF5733 → R = 255, G = 87, B = 51

    Kolor RGB: rgb(255, 87, 51)

  2. Przelicz RGB na skalę od 0 do 1:
    • R_scaled = 255 / 255 = 1
    • G_scaled = 87 / 255 ≈ 0.341
    • B_scaled = 51 / 255 ≈ 0.2
  3. Oblicz wartości CMYK:
    • K = 1 - max(1, 0.341, 0.2) = 1 - 1 = 0
    • C = (1 - 1 - 0) / (1 - 0) = 0
    • M = (1 - 0.341 - 0) / (1 - 0) ≈ 0.659
    • Y = (1 - 0.2 - 0) / (1 - 0) ≈ 0.8
  4. Przelicz wartości CMYK na procenty:
    • C = 0 × 100 = 0%
    • M = 0.659 × 100 ≈ 66%
    • Y = 0.8 × 100 = 80%
    • K = 0 × 100 = 0%

Wynik: CMYK: cmyk(0%, 66%, 80%, 0%)

Zamień Kolor

HEX ↔ RGB
RGB ↔ CMYK
HEX ↔ CMYK

Narzędzie RGB z Suwakami

RGB Suwaki

RGB: rgb(0, 0, 0)

HEX: #000000

CMYK: 0%, 0%, 0%, 100%

Narzędzie CMYK z Suwakami

CMYK Suwaki

CMYK: 0%, 0%, 0%, 0%

RGB: rgb(255, 255, 255)

HEX: #FFFFFF

Zamów wycenę
Polityka prywatności | Regulamin
Pro-link 2005-2020