Szesnastkowy Konwerter RGB

Witaj w narzędziu Szesnastkowy konwerter RGB, wszechstronnym konwerterze kolorów, który błyskawicznie przekształca szesnastkowe kody kolorów na wartości RGB, RGBA, HSL, HSLA i CMYK. Bez względu na to, czy jesteś projektantem stron, programistą czy artystą cyfrowym, to narzędzie oferuje podgląd koloru w czasie rzeczywistym, funkcję kopiowania jednym kliknięciem, generowanie kolorów dopełniających oraz sprawdzanie kontrastu pod kątem dostępności WCAG.

Co to jest szesnastkowy kod koloru (hex)?

Szesnastkowy kod koloru (hex color) to 6-cyfrowy kod używany do reprezentowania kolorów w projektowaniu stron internetowych, CSS i grafice cyfrowej. Kod składa się z trzech par cyfr szesnastkowych (0-9 i A-F), które reprezentują intensywność składowych: czerwonej, zielonej i niebieskiej. Każda para mieści się w zakresie od 00 (minimum, 0) do FF (maksimum, 255).

Na przykład #FF5733 rozkłada się na:

• FF = 255 Czerwony (maksymalna intensywność czerwieni)
• 57 = 87 Zielony (umiarkowana intensywność zieleni)
• 33 = 51 Niebieski (niska intensywność niebieskiego)

Wynikiem jest żywy kolor koralowo-pomarańczowy. Symbol # jest opcjonalny, ale powszechnie stosowany do identyfikacji wartości jako szesnastkowego kodu koloru.

3-cyfrowy skrót

Gdy wszystkie trzy pary kolorów składają się z powtarzających się cyfr, można użyć 3-cyfrowego skrótu. Na przykład #FF5533 nie można skrócić, ale #FFAA00 można zapisać jako #FA0. Każda cyfra jest automatycznie podwajana: F staje się FF, A staje się AA, 0 staje się 00.

Jak przekonwertować hex na RGB

Konwersja hex na RGB polega na przeliczeniu każdej pary cyfr szesnastkowych na ich odpowiednik dziesiętny:

1. Usuń symbol # jeśli jest obecny
2. Podziel na pary: Rozdziel 6 cyfr na 3 pary (RR, GG, BB)
3. Konwertuj każdą parę: Przelicz z systemu szesnastkowego (podstawa 16) na dziesiętny (podstawa 10)

Konwersja szesnastkowa na dziesiętną

Każda pozycja cyfry szesnastkowej ma swoją wartość: pierwszą cyfrę mnoży się przez 16, a drugą cyfrę dodaje. Dla pary hex "5A":

5 × 16 + 10 (A) = 80 + 10 = 90

Zrozumienie formatów kolorów

RGB i RGBA

RGB (Red, Green, Blue) używa trzech wartości od 0 do 255 do zdefiniowania koloru. RGBA dodaje kanał Alpha (od 0 do 1) dla przezroczystości. RGB(255, 87, 51) jest nieprzezroczysty, podczas gdy RGBA(255, 87, 51, 0.5) jest w 50% przezroczysty.

HSL i HSLA

HSL (Barwa, Nasycenie, Jasność) jest często bardziej intuicyjny dla projektantów:

• Barwa (Hue): Pozycja na kole kolorów (0-360 stopni). 0=czerwony, 120=zielony, 240=niebieski
• Nasycenie (Saturation): Intensywność koloru (0-100%). 0% to szarość, 100% to żywy kolor
• Jasność (Lightness): Rozświetlenie (0-100%). 0% to czarny, 100% to biały, 50% to czysty kolor

CMYK

CMYK (Cyjan, Magenta, Żółty, Czarny) jest używany w druku. Podczas gdy ekrany wykorzystują addytywne mieszanie kolorów (RGB), drukarki używają mieszania subtraktywnego (CMYK). Kolory mogą wyglądać inaczej po wydrukowaniu, więc sprawdzenie wartości CMYK pomaga zapewnić dokładne odwzorowanie w druku.

Teoria kolorów: Kolory dopełniające i triadyczne

Kolory dopełniające

Kolory dopełniające leżą naprzeciwko siebie na kole kolorów, tworząc maksymalny kontrast. Dla dowolnego koloru hex dopełnienie oblicza się odejmując każdą wartość RGB od 255. Pary dopełniające są używane do:

• Wyróżniających się przycisków wezwania do działania (CTA)
• Projektów logo o dużym wpływie wizualnym
• Tworzenia napięcia wizualnego i energii

Kolory triadyczne

Kolory triadyczne to trzy kolory równomiernie rozmieszczone na kole kolorów (co 120 stopni). Tworzą żywe, zrównoważone palety, które zachowują harmonię przy jednoczesnej różnorodności. Schemat ten jest popularny w projektowaniu graficznym i brandingu.

Dostępność WCAG i kontrast

Wytyczne dotyczące dostępności treści internetowych (WCAG) definiują współczynniki kontrastu dla czytelnego tekstu:

• Poziom AAA (7:1): Doskonały - najwyższy standard dostępności
• Poziom AA (4.5:1): Dobry - minimum dla zwykłego tekstu
• Poziom AA Large (3:1): Akceptowalny dla dużego tekstu (18pt+ lub 14pt pogrubiony)
• Fail (<3:1): Niewystarczający kontrast dla dostępności

Nasze narzędzie oblicza współczynniki kontrastu zarówno dla białego, jak i czarnego tła, pomagając Ci wybrać dostępne kolory tekstu dla Twoich projektów.

Jak korzystać z tego konwertera

1. Wprowadź kod hex: Wpisz lub wklej kolor hex (z # lub bez). Działają oba formaty: 6-cyfrowy i 3-cyfrowy.
2. Ustaw alfa (opcjonalnie): Dostosuj przezroczystość od 0 (niewidoczny) do 1 (nieprzezroczysty) dla wyników RGBA/HSLA.
3. Kliknij Konwertuj: Natychmiast zobacz wartości RGB, HSL, CMYK oraz podgląd koloru.
4. Skopiuj dowolny format: Kliknij przycisk kopiowania, aby przenieść wartości do schowka.
5. Eksploruj palety: Zobacz kolory dopełniające, schematy triadyczne, odcienie i tony dla inspiracji projektowej.

Często zadawane pytania

Co to jest szesnastkowy kod koloru?

Szesnastkowy kod koloru to 6-cyfrowa (lub 3-cyfrowa w skrócie) reprezentacja koloru używana w projektowaniu stron internetowych i grafice cyfrowej. Zaczyna się od symbolu #, po którym następuje sześć znaków (0-9 i A-F) reprezentujących składowe: czerwoną, zieloną i niebieską. Na przykład #FF5733 reprezentuje kolor koralowo-pomarańczowy z wartościami Czerwony=255, Zielony=87, Niebieski=51.

Jak ręcznie przekonwertować hex na RGB?

Aby ręcznie przekonwertować hex na RGB: 1) Usuń symbol #, 2) Rozdziel 6 cyfr na 3 pary (RR, GG, BB), 3) Przelicz każdą parę z systemu szesnastkowego na dziesiętny. Na przykład #FF5733: FF=255 (czerwony), 57=87 (zielony), 33=51 (niebieski), co daje RGB(255, 87, 51). Nasz konwerter robi to natychmiastowo.

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

RGB określa kolor za pomocą wartości Czerwonego, Zielonego i Niebieskiego (każda od 0 do 255). RGBA dodaje kanał Alpha (0-1) dla przezroczystości. RGB(255, 87, 51) to kolor jednolity, podczas gdy RGBA(255, 87, 51, 0.5) to ten sam kolor z 50% krycia. RGBA jest niezbędne do tworzenia półprzezroczystych nakładek i efektów.

Co to jest format koloru HSL?

HSL oznacza Hue (Barwa), Saturation (Nasycenie) i Lightness (Jasność). Barwa to kąt na kole kolorów (0-360 stopni), Nasycenie to intensywność koloru (0-100%), a Jasność to poziom rozświetlenia (0-100%). HSL jest często bardziej intuicyjny dla projektantów, ponieważ regulacja jasności lub nasycenia jest prosta i nie wpływa na bazową barwę.

Co to jest CMYK i kiedy go używać?

CMYK oznacza Cyan (Cyjan), Magenta (Magenta), Yellow (Żółty) i Key (Czarny). Jest to model kolorów stosowany w druku. Podczas gdy hex i RGB służą do wyświetlania na ekranach (kolory addytywne), CMYK służy do drukowania (kolory subtraktywne). Jeśli Twój projekt ma być wydrukowany, powinieneś sprawdzić wartości CMYK, aby zapewnić dokładność kolorów.

Co to jest kolor dopełniający?

Kolor dopełniający to kolor znajdujący się bezpośrednio po przeciwnej stronie koła kolorów względem innego koloru, co tworzy maksymalny kontrast. Dla każdego koloru jego dopełnienie znajduje się poprzez odwrócenie wartości RGB (255 minus każda składowa). Kolory dopełniające tworzą żywe, kontrastowe projekty i są powszechnie stosowane w logo oraz elementach wezwania do działania (CTA).

Powiązane zasoby

• Kolory w internecie - Wikipedia
• Model kolorów RGB - Wikipedia
• Wytyczne kontrastu WCAG - W3C