Konwerter RGB na HEX

Czym jest konwerter RGB na HEX?

// Serialize {r, g, b, alpha} → canonical hex string
// Emits 6-digit #RRGGBB when alpha === 1, 8-digit #RRGGBBAA otherwise.
function formatHex({ r, g, b, alpha = 1 }) {
  const pair = (v) => Math.round(v).toString(16).padStart(2, '0').toUpperCase();
  const rgb = pair(r) + pair(g) + pair(b);
  if (alpha >= 1) return `#${rgb}`;
  const a = pair(alpha * 255);
  return `#${rgb}${a}`;
}

console.log(formatHex({ r: 255, g: 87, b: 51 }));              // '#FF5733'
console.log(formatHex({ r: 59, g: 130, b: 246 }));             // '#3B82F6'
console.log(formatHex({ r: 255, g: 87, b: 51, alpha: 0.5 })); // '#FF573380'
console.log(formatHex({ r: 5, g: 0, b: 0 }));                  // '#050000' — padStart matters

Kluczowe funkcje

Alternatywy dla konwertera RGB na HEX

Przykłady konwersji RGB na HEX

rgb(255 87 51)

rgb(59 130 246)

rgb(255 87 51 / 0.5)

rgb(100% 50% 0%)

Najczęstsze konwersje RGB → HEX

Tabela referencyjna 10 najczęściej konwertowanych krotek RGB i ich odpowiedników HEX — czyste podstawowe, czyste wtórne oraz dwa rzeczywiste kolory marki z palety Tailwind.

Jak korzystać z konwertera RGB na HEX

1. 1

   Wpisz lub wklej krotkę RGB w pole RGB

   Wrzuć dowolną wartość `rgb()` w pole RGB — nowoczesną z rozdziałem spacjami `rgb(255 87 51)`, starszą z przecinkami `rgb(255, 87, 51)`, z kanałem alfa przez ukośnik `rgb(255 87 51 / 0.5)` albo przez formę `rgba(255, 87, 51, 0.5)`, lub kanały procentowe `rgb(100% 34% 20%)`. Narzędzie normalizuje wszystkie kształty wejściowe do tej samej wewnętrznej krotki RGB przed obliczeniem HEX-a. Nieprawidłowe znaki, liczby spoza zakresu lub źle uformowana składnia powodują cichy błąd inline; prawidłowe RGB aktualizuje każde inne pole formatu w czasie rzeczywistym.

2. 2

   Odczytaj kod HEX z pola HEX

   Pole HEX nad polem RGB pokazuje odpowiadającą wartość HEX: `#FF5733` dla koloru nieprzezroczystego, `#FF573380` dla koloru z kanałem alfa (forma 8-cyfrowa). Wyjście używa domyślnie wielkich liter HEX dla spójności z większością guidelines marki; małe litery (`#ff5733`) są oddalone o jedną mechaniczną zamianę i są równie prawidłowym CSS. Konwersja jest dokładna bitowo — konwersja w obie strony RGB → HEX → RGB odzyskuje oryginalną krotkę dosłownie, bez dryfu zmiennoprzecinkowego.

3. 3

   Kliknij Kopiuj, aby pobrać ciąg HEX

   Każda karta formatu ma po prawej stronie przycisk Kopiuj. Jedno kliknięcie i wartość ląduje w schowku — etykieta przycisku miga na chwilę „Skopiowano!”, więc wiesz, że się udało. Skopiowany ciąg zawiera wiodący `#`, więc wkleja się bezpośrednio w regułę CSS, pole koloru w Figmie, rozszerzenie SwiftUI HEX albo `colors.xml` Androida. Dla składni specyficznej dla platformy (SwiftUI `Color(red:green:blue:)`, Compose `Color(0xFF...)`, tokeny `@theme` Tailwind v4) użyj sekcji Skopiuj jako kod pod selektorem.

4. 4

   Również widoczne: HSL, OKLCH, OKLAB, CMYK, nazwany kolor

   Ten sam RGB, który wklejasz, rozświetla też pozostałe pola formatów — HSL dla starszego CSS, OKLCH i OKLAB dla percepcyjnie jednorodnych systemów designu, HSV i HWB dla projektantów korzystających z selektorów kolorów, CMYK do oszacowań druku oraz najbliższy nazwany kolor CSS do dokumentacji i tekstów. Nigdy nie jesteś zamknięty tylko w przepływie RGB → HEX; jeśli potrzebujesz także trójki OKLCH do bloku `@theme` Tailwind v4, jest ona od razu w polu OKLCH z własnym przyciskiem Kopiuj.

5. 5

   Użyj selektora do wizualnych poprawek

   Pod siatką formatów znajduje się kwadrat SL + suwak barwy + suwak kanału alfa do eksploracji wizualnej. Przeciągnij dowolny element sterujący, a wszystkie pola tekstowe zaktualizują się w czasie rzeczywistym, włącznie z RGB i HEX-em, od których zacząłeś. W przeglądarkach opartych na Chromium (Chrome, Edge, Brave) przycisk EyeDropper aktywuje natywne API `EyeDropper` do próbkowania dowolnego piksela na ekranie, także poza oknem przeglądarki — przydatne, gdy chcesz pobrać krotkę RGB z interfejsu innej aplikacji bez wcześniejszego robienia zrzutu ekranu, a następnie od razu odczytać HEX.

Częste błędy RGB / HEX

Skip padStart:
[5, 87, 51].map(v => v.toString(16)).join('') → '55733'
Produces invalid 5-character hex.

Use padStart(2, '0'):
[5, 87, 51].map(v => v.toString(16).padStart(2, '0')).join('') → '055733'
Valid 6-character hex; works correctly for all channel values 0-255.

Skip rounding:
(0.5 * 255).toString(16) → '7f.8'
Produces invalid hex with a decimal point.

Round to integer first:
Math.round(0.5 * 255).toString(16).padStart(2, '0') → '80'
Valid 2-digit hex pair; matches CSS Color 4 normalization.

Emit Android leading-alpha hex into CSS:
rgb(255 87 51 / 0.5) → #80FF5733 (Android format)
CSS parses as alpha=128, R=255, G=87, B=51 — wrong color entirely.

Use the target platform's documented format:
for CSS: #FF573380 (alpha as last byte)
for Android Compose: Color(0x80FF5733) (alpha as first byte)
Don't cross-paste between the two without re-ordering.

Average gamma-encoded RGB directly:
(rgb(255,0,0) + rgb(0,255,0)) / 2 = rgb(128, 128, 0)
Looks like dark olive, not bright yellow.

Average in linear-RGB:
decode → linear-RGB → average → re-encode → rgb(188, 188, 0)
Visibly bright yellow, matching what physical light mixing produces.

Kto korzysta z RGB na HEX

Frontendowcy konwertujący RGB z canvasu na HEX w CSS

Funkcje rysowania Canvas API zgłaszają i akceptują kolory jako krotki RGB (`ctx.fillStyle = 'rgb(255 87 51)'`), ale otaczający arkusz stylów CSS chce zmiennych HEX (`--color-fill: #FF5733`). Wklejenie RGB raz daje odpowiadający HEX, gotowy do wrzucenia w niestandardową właściwość CSS. Przydatne przy wyciąganiu kolorów marki z wykresu lub wizualizacji danych renderowanej na canvasie do ponownego użycia w statycznym UI.

Projektanci konwertujący RGB z Photoshopa na HEX w Figmie

Selektor Color w Adobe (w Photoshopie, Illustratorze i InDesignie) pokazuje RGB jako trzy liczby całkowite 0–255 w trzech polach kanałów. Figma natomiast wyświetla wartości kolorów domyślnie jako HEX w swoich panelach designu. Wklej trzy liczby całkowite z Photoshopa jako `rgb(...)` tutaj, skopiuj wyjście HEX, wrzuć w pole koloru w Figmie. Pasuje do oryginalnego koloru z Photoshopa dokładnie, bez objazdu przez zrzut ekranu i kroplomierz.

Devowie sprzętu konwertujący RGB z czujników LED na webowy HEX

Adresowalne paski LED, czujniki kolorów i sprzętowe kamery RGB wszystkie zgłaszają wartości kanałów jako liczby całkowite 0–255. Gdy odczyty muszą napędzać dashboard webowy („lampa świeci się teraz tym kolorem”), odpowiadający kod HEX to to, czego oczekuje atrybut CSS `style="background: ..."`. Wklej trójkę RGB z czujnika, skopiuj HEX, wepnij w znaczniki dashboardu.

Devowie gier eksportujący kolory z Unity na makietę webową

Konstruktory `Color` w Unity i `FLinearColor` w Unreal przyjmują znormalizowane liczby zmiennoprzecinkowe 0–1; pomnożenie każdej przez 255 daje odpowiadające liczby całkowite RGB. Wklej wynikowe `rgb(...)` tutaj, skopiuj HEX, wrzuć w makietę webową albo stronę marketingową, która musi dokładnie dopasować się do akcentowego koloru w grze. Jednoczesny widok OKLCH pokazuje też percepcyjną jasność, więc paleta makiety może być ręcznie dostrojona do poziomów jasności gry.

Inżynierowie dostępności audytujący kolory marki z Photoshopa

Gdy guidelines stylu marki podaje kolory jako trójki liczb całkowitych RGB („pomarańcz marki to RGB 255 / 87 / 51”), ale narzędzie do audytu WCAG chce kodów HEX, ten konwerter jest mostem. Wklej trójkę RGB, skopiuj HEX, przepuść przez audyt. Plakietki kontrastu WCAG i APCA w tym narzędziu też pokazują werdykt w jednym kroku, więc nie musisz skakać między trzema osobnymi narzędziami.

Devowie e-maili migrujący rgba() na 8-cyfrowy HEX

Nowoczesny HTML klientów pocztowych obsługuje 8-cyfrowy HEX (`#FF573380`) dla kolorów z kanałem alfa, ale starsze szablony często przechowują tę samą wartość jako `rgba(255, 87, 51, 0.5)`. Wklejenie rgba() tutaj i odczytanie wyjścia 8-cyfrowego HEX czyni migrację mechaniczną. Pole HEX pokazuje `#FF573380` dla przypadku 50% alfa; starsza forma `rgba()` pozostaje w polu RGB dla kontekstów fallback, które jej nadal potrzebują.

Programiści dokumentujący tokeny marki w obu formatach

Dokumentacja tokenów designu często pokazuje ten sam kolor w obu formach RGB i HEX: HEX dla bloku kodu CSS, RGB do adnotacji w prozie („pomarańcz marki to `#FF5733`, równoważnie RGB 255 / 87 / 51”). Posiadanie obu obok siebie pozwala autorowi dokumentacji skopiować każdy w jednym przebiegu zamiast uruchamiać dwa osobne narzędzia. Hash adresu URL do udostępniania pozwala też czytelnikom kliknąć w dokładny omawiany kolor.

Inżynierowie QA porównujący kolory pikseli ze specyfikacjami HEX

Testy regresji wizualnej czasem przechwytują kolory pikseli jako liczby całkowite RGB (`expect(pixel).toMatchRgb([255, 87, 51])`), podczas gdy bazowa specyfikacja jest podana w HEX („przyciski muszą renderować się jako `#FF5733`”). Wklejenie przechwyconego RGB tutaj daje odpowiadający HEX, który inżynier QA może porównać bezpośrednio ze specyfikacją. Dokładność bitowa konwersji oznacza, że porównanie nie będzie się sypać z powodu różnic w dryfie zmiennoprzecinkowym.

Matematyka i serializacja RGB na HEX

toString(16).padStart(2, '0') to jednolinijkowa implementacja

Cała konwersja RGB na HEX mieści się w jednym wyrażeniu na kanał: `value.toString(16).padStart(2, '0')`. `toString(16)` w JavaScript konwertuje liczbę całkowitą dziesiętną na jej reprezentację w systemie szesnastkowym. `padStart(2, '0')` to łatwy do zapomnienia szczegół — bez niego wartość kanału 5 serializowałaby się jako `'5'` zamiast `'05'`, dając nieprawidłowy 5-znakowy HEX typu `#55733` po połączeniu z innymi kanałami. Standardowy idiom to `[r, g, b].map(v => v.toString(16).padStart(2, '0')).join('')`, a następnie prefiks `'#'`.

Normalizacja procentowa: × 255 / 100, potem zaokrąglenie

CSS Color 4 dopuszcza kanały procentowe w `rgb()`: `rgb(100% 34% 20%)` jest równoważne `rgb(255 87 51)`. Zasada normalizacji to `Math.round(procent × 255 / 100)`. `50% × 255 / 100 = 127,5` zaokrągla się do 128 (zaokrąglenie bankierskie od .5). Ta sama zasada obowiązuje dla alfy wyrażonej procentowo (`rgb(255 87 51 / 50%)` ↔ `rgb(255 87 51 / 0.5)`). Forma całkowita i procentowa dają identyczne wyjście HEX po normalizacji; narzędzie pokazuje kanoniczną formę całkowitą w polu RGB po ponownej normalizacji.

Alfa na HEX: pomnóż przez 255, zaokrąglij, zakoduj jako końcową parę

RGB z kanałem alfa (`rgb(255 87 51 / 0.5)`) emituje 8-cyfrowy HEX, mnożąc alfę przez 255, zaokrąglając do najbliższej liczby całkowitej i kodując jako 4. parę HEX dołączoną po RGB. `0,5 × 255 = 127,5`, zaokrąglone do 128 = `0x80`, wyjście `#FF573380`. Specyfikacja CSS Color 4 używa dla tej konwersji zaokrąglenia bankierskiego (zaokrąglenie połowy do parzystej), za którym narzędzie podąża. Forma 8-cyfrowa wraca do 6-cyfrowej, gdy alfa równa się dokładnie 1, aby uniknąć wycieku końcowych par `FF` do arkuszy stylów.

Wejście RGB: CSS Color 4 z rozdziałem spacjami i starsze z przecinkami — oba akceptowane

Parser akceptuje zarówno nowoczesną formę CSS Color 4 `rgb(255 87 51)`, jak i starszą formę CSS 1 `rgb(255, 87, 51)`. Forma nowoczesna pasuje do innych funkcyjnych notacji z CSS Color 4 (`hsl()`, `lab()`, `oklch()`, `color()`), które wszystkie używają rozdziału spacjami i ukośnika dla kanału alfa. Starsza forma z przecinkami jest nadal wspierana w każdej aktualnie aktualizowanej przeglądarce i pozostaje powszechna w starszych bazach kodu. Obie dają identyczne wyjście HEX; serializator HEX narzędzia nie interesuje się tym, który kształt wejściowy przyszedł.

OKLCH jako wewnętrzne źródło prawdy dla stabilności w obie strony

Mimo że to odgałęzienie celuje konkretnie w RGB → HEX, współdzielony bazowy konwerter trzyma kanoniczny kolor jako trójkę OKLCH wewnętrznie. Oznacza to, że konwersja w obie strony RGB → HEX → HSL → OKLAB → CMYK → RGB odbywa się bez dryfu zmiennoprzecinkowego między krokami; starsze konwertery, które trasują przez HSL lub sRGB jako pivot, akumulują błąd zaokrąglenia przy każdej konwersji. Wybór OKLCH (zamiast OKLAB) zachowuje barwę jako stabilną oś, więc przeciąganie suwaka barwy nie przechodzi przypadkiem przez szarość. Zgodnie z pracą Björna Ottossona o OKLAB z 2020.

Kodowanie kanału: 8-bitowe bez znaku, sRGB z gammą

Każdy kanał RGB to 8-bitowa liczba całkowita bez znaku (0–255), zakodowana w przestrzeni barw sRGB zdefiniowanej w IEC 61966-2-1 (1996). Wartości są *gamma-encoded* — co oznacza, że relacja między wartością kanału a postrzeganą jasnością jest nieliniowa, zgodna z fragmentaryczną funkcją transferu sRGB (z grubsza wykładnik 2.4 z małym odcinkiem liniowym blisko zera). To ma znaczenie, gdy robisz matematykę kolorów: uśrednianie dwóch wartości RGB w ich postaci zakodowanej gammą daje błędny percepcyjny punkt środkowy. Aby prawidłowo wymieszać kolory, najpierw zdekoduj do linear-RGB (CSS Color 4 §11.2), potem uśrednij, potem zakoduj ponownie. Wewnętrzny model OKLCH narzędzia czyni to przezroczystym.

Najlepsze praktyki dla przepływów RGB / HEX

Preferuj HEX wielkimi literami w guidelines marki, małymi w kodzie

Guidelines marki, PDF-y marketingowe i dokumentacja skierowana do projektantów zwykle używają HEX wielkimi literami (`#FF5733`) dla wizualnej spójności — wygląd „all caps” czyta się jako identyfikator marki. Kod (CSS, JSON, źródło JavaScript) zwykle używa małych liter (`#ff5733`) z konwencji, ponieważ małe litery są szybsze do wpisywania i częstsze w autogenerowanym wyjściu lintera. Oba są prawidłowym CSS i parsują się identycznie; wybierz jeden dla każdego kontekstu i trzymaj się go. Narzędzie emituje wielkie litery domyślnie; jedna mechaniczna zamiana odwraca do małych liter.

Emituj 8-cyfrowy HEX tylko gdy alfa < 1

Gdy alfa równa się 1 (pełne krycie), wracaj do formy 6-cyfrowej. Końcowa para `FF` (`#FF5733FF`) to legalny CSS, ale wizualnie zaśmieca arkusze stylów i myli niektóre starsze parsery, prowadząc do błędnego renderowania. Forma 8-cyfrowa powinna pojawiać się tylko wtedy, gdy alfa jest znacząco przezroczysta. To narzędzie podąża za tą zasadą automatycznie — kolory nieprzezroczyste emitują 6-cyfrowy HEX, kolory z kanałem alfa emitują 8-cyfrowy HEX, a granica jest dokładna (alfa = 1,0 emituje 6 cyfr; alfa = 0,9999 emituje 8 cyfr, aby zachować dane).

Nie uśredniaj kanałów RGB wprost do matematyki kolorów

Kanały RGB są zakodowane gammą — uśrednianie dwóch wartości RGB daje błędny percepcyjny punkt środkowy. `(255, 0, 0)` uśrednione z `(0, 255, 0)` daje `(127, 127, 0)`, mętną ciemną oliwkę, a nie wizualnie jasny żółty punkt środkowy, jakiego można by się spodziewać. Aby prawidłowo wymieszać kolory, najpierw zdekoduj do linear-RGB (CSS Color 4 §11.2), uśrednij, a potem zakoduj ponownie. Albo, lepiej, pracuj w OKLAB lub OKLCH, gdzie odległość percepcyjna jest jednorodna — dokładnie to robią generatory palet systemów designu.

Preferuj HEX dla zmiennych CSS, RGB dla sprzętu

Gdy piszesz niestandardową właściwość CSS albo token konfiguracji Tailwinda, preferuj HEX — jest zwięźlejszy i czysto mieści się w JSON albo YAML. Gdy konsumujący kod wykonuje arytmetykę na kanałach (wywołania canvasu, manipulacja obrazem, sterowniki sprzętowych LED, atrybuty kolorów OpenGL), forma liczb całkowitych RGB jest szybsza do konsumpcji. Oba formaty opisują ten sam kolor; wybór dotyczy wyłącznie tego, kto czyta i pisze, a nie poprawności. Widok jednoczesnych pól tego narzędzia czyni oba równie tanimi.

Zweryfikuj zakres alfy przed mnożeniem przez 255

Gdy implementujesz własny konwerter RGB → 8-cyfrowy HEX, zweryfikuj, że liczba zmiennoprzecinkowa alfa mieści się w `[0, 1]` przed krokiem `× 255`. Alfa spoza zakresu (ujemna lub > 1) po cichu daje nieprawidłowe pary HEX, które niektóre parsery akceptują, a inne odrzucają — kruchy tryb awarii. Najpierw przytnij (`Math.max(0, Math.min(1, alpha))`), potem pomnóż, potem zaokrąglij, potem zakoduj w HEX. Narzędzie pokazuje cichy błąd inline dla alfy spoza zakresu zamiast emitować uszkodzony ciąg HEX.

Używaj hasha URL do udostępniania decyzji o kolorze na żywo

Każda zmiana koloru aktualizuje hash adresu URL jako `#hex=ff5733` automatycznie. Skopiuj URL do wątku na Slacku albo do zgłoszenia na GitHubie, a każdy, kto otworzy, ląduje na tym samym kolorze z tym samym HEX-em. To bardziej niezawodne niż wklejanie krotki RGB w czacie — odbiorcy czasem robią literówki w przecinkach albo gubią kanał przy ręcznym wpisywaniu wartości — i pozwala wątkowi design review odnieść się do dokładnego koloru zamiast do „pomarańczowego, o którym rozmawialiśmy we wtorek”. Hash nigdy nie jest przesyłany na serwer.

Najczęściej zadawane pytania