Konwerter kolorów HEX do RGB

Co to jest kod kolorów HEX?

Kod koloru HEX to sześciocyfrowy łańcuch alfanumeryczny używany w projektowaniu stron internetowych i grafice cyfrowej do reprezentowania określonego koloru.#RRGGBB, gdzie każda para dwóch znaków koduje intensywność jednego z trzech dodatnich kolorów podstawowych - czerwonego (RR), zielonego (GG) i niebieskiego (BB) - przy użyciu zapisu sześćdziesiątkowego (podstawa 16).00(intensywność zerowa) doFF(maksymalna intensywność, równoważna 255 w punkcie dziesiętnym).

Kody HEX powstały z potrzeby definiowania kolorów w HTML i CSS bez polegania na nazwanych słowach kluczowych kolorów.rgb(), hsl(), orazoklch(), HEX pozostaje najczęściej używaną notacją w opracowywaniu front-endu, przekazywaniu projektów i wytycznych dotyczących marki. Praktycznie każdy wybór kolorów w narzędziach takich jak Figma, Sketch, Adobe Photoshop i Canva wyświetla wartość HEX domyślnie.

Łączna liczba unikalnych kolorów reprezentowanych sześciocyfrowymi kodami HEX wynosi 16 777 216 (256 x 256 x 256).

Kody HEX są niewrażliwe na litery wielkie i małe, więc#ff8000oraz#FF8000Niektóre przewodniki stylistyczne preferują duże litery dla czytelności, podczas gdy minifikatory CSS często wyświetlają małe litery, aby zapisać bajty - chociaż w praktyce różnica jest nieistotna.

Jak przekształcić HEX do RGB krok po kroku

Konwersja kodu koloru HEX na jego odpowiednik RGB jest prosta. Proces polega na podzieleniu sześciocyfrowego łańcucha znaków na trzy pary i konwersji każdej pary z heksadecimalnej (podstawy 16) na dziesiętną (podstawy 10).

1. Usuń symbol haszu.Jeśli kod HEX zaczyna się od#Na przykład,#1A2B3Cstaje się1A2B3C.
2. Podzielcie się na trzy pary.Podziel pozostały ciąg na trzy grupy dwóch znaków:1A, 2B, 3C.
3. Przekształć każdą parę w liczbę dziesiętną.Użyj heksadecymalnego systemu wartości miejscowych, w którym pierwsza cyfra jest pomnożona przez 16 i dodawana druga cyfra:
   • Czerwony:1A-> (1 x 16) + 10 =26
   • Zielony:2B-> (2 x 16) + 11 =43
   • Niebieski:3C-> (3 x 16) + 12 =60
4. Zapisz wartość RGB.Połączyć trzy wartości po przecinku:rgb(26, 43, 60).

Cyfry sześćdziesiątkowe i ich odpowiedniki dziesiątkowe to: 0=0, 1=1, 2=2, 3=3, 4=4, 5=5, 6=6, 7=7, 8=8, 9=9, A=10, B=11, C=12, D=13, E=14, F=15. Zapamiętanie od A do F jest jedyną częścią, która różni się od standardowej dziesiątkowej arytmetyki.

Dla konwersji programowej większość języków oferuje wbudowane funkcje.parseInt("1A", 16)zwroty26W Pythonie,int("1A", 16)sam CSS obsługuje oba formaty natywnie, więc konwersja jest przede wszystkim przydatna, gdy trzeba manipulować indywidualnymi kanałami kolorów w kodzie -- na przykład, dostosowując jasność, tworząc gradienty programowo, lub mieszając dwa kolory.

3-cyfrowe kontra 6-cyfrowe kody HEX

CSS obsługuje skrócony trójcyfrowy format HEX (#RGB) dla wygody, gdy każda z trzech par składa się z identycznych cyfr. W tym skrócie każda pojedyncza cyfra jest rozszerzana poprzez jej podwojenie.

• #F80rozszerza się na#FF8800-> rgb ((255, 136, 0)
• #FFFrozszerza się na#FFFFFF-> rgb ((255, 255, 255)
• #000rozszerza się na#000000-> rgb ((0, 0, 0)
• #09Crozszerza się na#0099CC-> rgb{0, 153, 204)
• #A3Frozszerza się na#AA33FF-> rgb{170, 51, 255)

3-cyfrowa notacja zmniejsza liczbę dostępnych kolorów z 16,7 miliona do zaledwie 4,096 (16 x 16 x 16), więc nie może reprezentować każdego koloru.

CSS obsługuje również czterocyfrowe (#RGBA) i ośmiocyfrowe (#RRGGBBAA) Kody HEX zawierające kanał alfa (przejrzystość).FFjest całkowicie nieprzezroczysty i00jest w pełni przejrzysty.#FF880080reprezentuje kolorrgb(255, 136, 0)Nasz konwerter koncentruje się na standardowych formatach 3- i 6-cyfrowych; jeśli wpiszesz kod z kanałem alfa, przetworzy tylko część RGB.

HEX do tabeli odniesienia RGB

Poniżej znajduje się tabela odniesienia powszechnych kolorów HEX i ich odpowiedników RGB. Ta tabela obejmuje najczęściej używane kolory w projektowaniu stron internetowych, nazwane kolory CSS i popularne wybory palety marek.

CSS definiuje łącznie 147 nazwanych kolorów, z których każdy ma odpowiednią wartość HEX. Chociaż nazwane kolory są wygodne do prototypowania, profesjonalne projekty zazwyczaj polegają na wartościach HEX lub RGB dla precyzji i spójności w przeglądarkach i narzędziach projektowych.

Popularne kolory marek - wartości HEX i RGB

Deweloperzy i projektanci często potrzebują dokładnych wartości HEX i RGB popularnych kolorów marek do makiet, integracji i przewodników stylistycznych.

Wytyczne dotyczące marek często określają kolory w wielu formatach (HEX, RGB, CMYK, Pantone).

Porównanie modeli kolorów: HEX, RGB, HSL i CMYK

Zrozumienie, kiedy używać każdego modelu kolorystycznego pomaga pracować bardziej efektywnie w różnych narzędziach i nośnikach:

HEX i RGB są matematycznie identyczne-- reprezentują one tę samą przestrzeń kolorów przy użyciu różnych notacji. Konwersja między nimi jest prostym przekładem od podstawy 16 do podstawy 10 bez utraty precyzji lub różnic w gamie. HSL, z drugiej strony, jest przekształceniem RGB w cylindryczny system współrzędnych, który ułatwia niezależne rozumowanie o odcieniu, nasyceniu i lekkości. CMYK jest modelem subtrakcyjnym kolorów używanym w druku i nie może reprezentować wszystkich kolorów RGB (i odwrotnie), więc konwersje między RGB a CMYK są przybliżone.

W nowoczesnym CSS (poziom 4)color()funkcji i nowych przestrzeni kolorowych, takich jakoklch()orazdisplay-p3Jednak HEX i RGB pozostają podstawą kompatybilności z siecią i są obsługiwane przez każdą używaną obecnie przeglądarkę.

Używanie HEX i RGB w CSS i JavaScript

Zarówno wartości HEX, jak i RGB są ważne w CSS i dają identyczne wyniki.

Deklaracje CSS:

/* HEX notation */
body { background-color: #1A2B3C; }

/* RGB notation */
body { background-color: rgb(26, 43, 60); }

/* RGB with alpha (transparency) */
.overlay { background-color: rgba(26, 43, 60, 0.5); }

/* Modern CSS — space-separated syntax */
.card { color: rgb(26 43 60 / 80%); }

Funkcje konwersji JavaScript:

// HEX to RGB
function hexToRgb(hex) {
  const h = hex.replace('#', '');
  return {
    r: parseInt(h.substring(0, 2), 16),
    g: parseInt(h.substring(2, 4), 16),
    b: parseInt(h.substring(4, 6), 16)
  };
}

// RGB to HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('').toUpperCase();
}

Podczas pracy z API HTML Canvas kolory często muszą być ustawione jako ciągi."#FF8000"oraz"rgb(255, 128, 0)"pracować dlafillStyleorazstrokeStyle. jednakżegetImageData()metoda zwraca dane pikseli jako tablicę 0 - 255 liczb całkowitych (RGBA), co czyni RGB naturalnym formatem do manipulacji na poziomie pikseli.

W niestandardowych właściwościach (zmiennach) CSS wartości HEX są zwykle przechowywane dla uproszczenia:

:root {
  --primary: #4A90E2;
  --primary-rgb: 74, 144, 226; /* for use with rgba() */
}
.element {
  background: rgba(var(--primary-rgb), 0.3);
}

Ten wzorzec przechowywania surowych wartości kanału RGB jako zmiennej CSS jest popularną techniką, która pozwala na dynamiczne stosowanie nieprzezroczystości bez konwersji między formatami podczas uruchamiania.

Dostępność i kontrast kolorów

Konwersja HEX na RGB jest często pierwszym krokiem w obliczaniu współczynników kontrastu kolorów dla zgodności z dostępnością.4,5 do 1dla zwykłego tekstu oraz3: 1dla dużego tekstu (18 px + tłuste lub 24 px + zwykłe).

Formuła współczynnika kontrastu wymagawzględna jasnośćWartości RGB obliczane są w następujących krokach:

1. Konwertuj HEX na RGB (0 - 255 na kanał).
2. Znormalizuj każdy kanał do 0 - 1 dzieląc przez 255.
3. Zastosuj formułę liniowania sRGB: jeśli wartość jest <= 0,04045, podziel przez 12,92; w przeciwnym razie oblicz ((wartość + 0,055) / 1,055) ^ 2.4.
4. Obliczyć luminancję: L = 0,2126 x R + 0,7152 x G + 0,0722 x B.
5. Oblicz współczynnik kontrastu między dwoma kolorami: (L1 + 0,05) / (L2 + 0,05) gdzie L1 jest jaśniejszym kolorem.

Jak widać, wartości RGB są niezbędnym wejściem do każdego obliczenia kontrastu dostępności. Narzędzia takie jak WebAIM Contrast Checker, Chrome DevTools color picker i Axe accessibility scanner wykonują tę konwersję wewnętrznie.

Dla projektantów szybka zasada: ciemny tekst na jasnym tle (lub odwrotnie) z różnicą jasności co najmniej 125 i różnicą koloru co najmniej 500 (używając sumy różnic bezwzględnych w kanałach R, G, B) generalnie przekroczy standardy WCAG AA.