Konwerter HEX na RGB

Czym jest konwerter HEX na RGB?

// Parse any hex shape (3/4/6/8-digit) into an RGB tuple [r, g, b, a]
// All channels in 0-255 range; alpha in 0-1.
function parseHex(input) {
  let h = input.trim().replace(/^#/, '');
  // Expand 3-digit and 4-digit shorthand by duplicating each digit
  if (h.length === 3 || h.length === 4) {
    h = h.split('').map(c => c + c).join('');
  }
  if (!/^[0-9a-fA-F]+$/.test(h) || (h.length !== 6 && h.length !== 8)) {
    throw new Error(`Invalid hex: ${input}`);
  }
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
  return [r, g, b, a];
}

console.log(parseHex('#FF5733'));   // [255, 87, 51, 1]
console.log(parseHex('#F73'));       // [255, 119, 51, 1]
console.log(parseHex('#FF573380'));  // [255, 87, 51, 0.5019607843137255]

Kluczowe funkcje

Alternatywy dla konwertera HEX na RGB

Przykłady konwersji HEX na RGB

#FF5733

#3b82f6

#FF573380

#F73

Najczęstsze konwersje HEX → RGB

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

Jak korzystać z konwertera HEX na RGB

1. 1

   Wklej kod HEX w pole HEX

   Wrzuć dowolną wartość HEX do pola HEX — z `#` na początku albo bez, w 3-cyfrowym skrócie (`#F73`), 6-cyfrowej formie pełnej (`#FF5733`), 4-cyfrowym skrócie z kanałem alfa (`#F738`) albo 8-cyfrowej formie pełnej z kanałem alfa (`#FF5733CC`). Narzędzie normalizuje wszystkie pięć kształtów wejściowych do tego samego kanonicznego koloru wewnętrznie. Wielkość liter nie ma znaczenia (`#ff5733` i `#FF5733` parsują się identycznie). Nieprawidłowe znaki lub zła liczba cyfr powodują cichy błąd inline; prawidłowy HEX aktualizuje każde inne pole formatu w czasie rzeczywistym.

2. 2

   Odczytaj krotkę RGB z pola RGB

   Pole RGB poniżej pola HEX pokazuje odpowiadającą wartość `rgb()` w nowoczesnej składni z rozdziałem spacjami z CSS Color 4: `rgb(255 87 51)` dla koloru nieprzezroczystego, `rgb(255 87 51 / 0.5)` dla koloru z kanałem alfa. Każdy kanał to liczba całkowita 0–255; alfa jest znormalizowana do 0–1. Wartości są dokładne bitowo — `parseInt('FF', 16)` zwraca 255 bez arytmetyki zmiennoprzecinkowej, więc konwersja w obie strony do HEX daje oryginalne wejście dosłownie.

3. 3

   Kliknij Kopiuj, aby pobrać ciąg RGB

   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 to kanoniczna składnia CSS Color 4 (`rgb(255 87 51)`); jeśli twój cel wymaga starszej formy z przecinkami, konwersja jest mechaniczna (zamień spacje na `, `). Dla wyjścia pod konkretną platformę (SwiftUI, Compose, Flutter, Tailwind v4) użyj sekcji Skopiuj jako kod pod selektorem.

4. 4

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

   Ten sam HEX, 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 w przepływie tylko HEX → RGB; jeśli potrzebujesz także trójki OKLCH do wklejenia w blok `@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 HEX-em i RGB, 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ć HEX z interfejsu innej aplikacji bez wcześniejszego robienia zrzutu ekranu.

Częste błędy HEX / RGB

Assume #F73 left-pads to #000F73:
expected: dark blue rgb(0, 15, 115)
actual:   bright orange rgb(255, 119, 51)

3-digit shorthand duplicates each digit:
#F73 → #FF7733 → rgb(255, 119, 51)
Verified by the tool's live expansion as you type.

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.

Paste CSS 8-digit hex into legacy Android Color.parseColor():
#FF573380 interpreted as #AARRGGBB
→ wrong color and wrong alpha entirely.

Use the target platform's documented format:
for Android Compose: Color(0xFFFF5733) with alpha as first byte
for CSS: #FF573380 with alpha as last 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 HEX na RGB

Frontendowcy konwertujący HEX z Figmy na wywołania RGB na canvasie

Figma eksportuje HEX, ale `CanvasRenderingContext2D.fillStyle` akceptuje zarówno HEX, jak i `rgb()` — a gdy wykonujesz arytmetykę na kanałach (gradienty, mieszanie, manipulacja obrazem), posiadanie liczb całkowitych kanałów bezpośrednio jest szybsze niż ponowne parsowanie HEX-a za każdym razem. Wklej HEX raz, skopiuj krotkę `rgb(255 87 51)`, wrzuć w wywołanie canvasu. Zero kodu parsującego HEX po twojej stronie.

Projektanci tłumaczący webowy HEX na RGB w Photoshopie / Illustratorze

Selektor Color w Adobe przyjmuje liczby całkowite 0–255 w trzech polach kanałów jako natywne wejście. Wklej webowy HEX do tego narzędzia, odczytaj liczby R / G / B, wpisz je w Photoshopie. Dopasowuje oryginalny kolor webowy dokładnie, bez objazdu przez zrzut ekranu i kroplomierz. Przydatne, gdy projektant musi zrobić makietę koloru webowego w aplikacji Adobe do układu pod druk.

Devowie gier ładujący HEX marki do API RGB w Unity / Unreal

`Color` w Unity i `FLinearColor` w Unreal oba przyjmują znormalizowane liczby zmiennoprzecinkowe 0–1. Wklej HEX marki, odczytaj liczby całkowite 0–255, podziel przez 255 (albo użyj wyjścia znormalizowanych floatów narzędzia przez Skopiuj jako kod). Konwersja jest mechaniczna, ale podatna na pomyłki, gdy robi się ją ręcznie — wpisanie `(255, 87, 51)` w konstruktor, który oczekiwał `(1.0, 0.341, 0.2)`, daje przyciętą do bieli barwę i zdezorientowanego tweeta. Narzędzie pokazuje obie formy.

Devowie sprzętu programujący adresowalne paski LED

WS2812, APA102 i inne adresowalne paski LED RGB przyjmują liczby całkowite kanałów 0–255 na każdą diodę. Wklej HEX marki dla wiszącego na ścianie wyświetlacza produktu, odczytaj trójkę RGB, wrzuć w tablicę kolorów kontrolera. Przydatne, gdy zespół marketingu podaje HEX, a inżynier firmware'u potrzebuje wartości kanałów do wywołania `pixels.setPixelColor(i, r, g, b)`.

Inżynierowie dostępności audytujący czytelność kolorów marki

Sprawdzanie kontrastu WCAG 2.1 wewnętrznie przyjmuje wejście RGB. Wklej HEX marki, otrzymaj odpowiadające RGB plus współczynnik WCAG względem bieli i czerni plus wynik APCA Lc na jednym ekranie. Jeśli kolor marki nie zalicza progu 4,5:1 dla tekstu treści, percepcyjnie jednorodne pole OKLCH obok ułatwia podbicie L, aż kontrast się oczyści, bez utraty tożsamości marki.

Projektanci osadzający szablony e-maili z RGB inline

Niektóre klienty pocztowe (Outlook na Windowsie, starszy Gmail mobile) niespójnie parsują HEX w atrybutach HTML — `` może renderować się jako czarny na niektórych platformach. Niezawodny fallback to równoważna forma RGB `rgb(255, 87, 51)` inline. Wklej HEX marki, skopiuj ciąg RGB w starszej składni z przecinkami (ręczna zamiana z nowoczesnej formy ze spacjami), wrzuć w atrybut `style` szablonu e-mail.

Programiści dokumentujący tokeny marki w obu formatach

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

Inżynierowie QA weryfikujący snapshoty kolorów pikseli

Testy regresji wizualnej często sprawdzają konkretne wartości RGB względem wyrenderowanych pikseli (`expect(pixel.r).toBe(255)`). Gdy specyfikacja podana jest jako HEX („przyciski muszą renderować się jako `#FF5733`”), inżynier QA potrzebuje odpowiadających liczb całkowitych RGB, aby napisać asercję. Wklej HEX, odczytaj R / G / B, wrzuć w test. Dokładność bitowa konwersji oznacza, że test nie będzie się sypał z powodu różnic w dryfie zmiennoprzecinkowym.