Wybierak i Konwerter Kolorów – HEX ⇄ RGB ⇄ HSL ⇄ CMYK + Kontrast WCAG i Harmonii

Loading…

O narzędziu Online Wybierak i Konwerter Kolorów

Upuść obraz, wklej kolor lub użyj koła, aby pobrać kolory z dokładnością do piksela. Narzędzie przeprowadza bogatą analizę po stronie klienta: normalizuje HEX, oblicza RGB/HSL/HSV/CMYK, konwertuje na XYZ/LAB/LCH, oblicza luminancję i kontrast WCAG oraz generuje harmonijne palety. Następnie możesz skopiować dowolny format jako token gotowy do CSS lub użyć harmonii do zbudowania spójnego systemu projektowania.

Co Ten Wybór Kolorów Potrafi

Próbkuj kolory z obrazów* lub zacznij od precyzyjnego koła kolorów lub wprowadzenia HEX/RGB
Bogate konwersje: HEX, HEX8, RGB/A, HSL/A, HSV, CMYK, XYZ, LAB, LCH
Wbudowany sprawdzacz kontrastu WCAG względem #000000 i #FFFFFF z użyciem względnej luminancji
Sugestie bezpiecznych dla sieci i skróconych wartości HEX, gdy to możliwe
Harmonii kolorów: dopełniające, triadyczne, tetradyczne, analogiczne, monochromatyczne (obliczane przez rotację odcienia)
Podgląd luminancji i postrzeganej jasności, aby przewidzieć problemy z kontrastem
Przybliżone dopasowanie w stylu Pantone na podstawie najbliższej odległości RGB (z buforowanym zbiorem danych)
Analiza działa po stronie klienta; tylko minimalne dane są używane, gdy opcjonalne wyszukiwanie Pantone jest włączone

🔧 Jak Używać Wyboru Kolorów for color-picker

1. Wybierz lub pobierz kolor bazowy

Wklej wartość HEX, wpisz RGB/HSL lub użyj wyboru, aby pobrać kolor z obrazu lub koła. Narzędzie normalizuje go wewnętrznie do bezpiecznej wartości HEX.

2. Dostosuj odcień i jasność

Dostosuj odcień, nasycenie i jasność, aż próbka wygląda odpowiednio. Duży podgląd pokazuje kolor na jasnych i ciemnych powierzchniach dla kontekstu.

3. Odczytaj i skopiuj potrzebne formaty

Skopiuj HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, XYZ, LAB i LCH jednym kliknięciem. Użyj ich dla zmiennych CSS, tokenów projektowych lub notatek przekazania.

4. Sprawdź kontrast WCAG

Zobacz współczynniki kontrastu względem #000000 i #FFFFFF na podstawie luminancji sRGB. Użyj wyników, aby szybko zdecydować, czy kolor nadaje się do tekstu głównego, dużych tytułów lub elementów interfejsu.

5. Generuj harmonie i buduj paletę

Eksploruj kolory dopełniające, triadyczne, tetradyczne, analogiczne i monochromatyczne generowane przez rotację odcienia. Dodaj ulubione do palety/historii i eksportuj je jako tokeny.

Szczegóły Techniczne

Obsługa Wejścia i Normalizacja

Narzędzie akceptuje szesnastkowe kody kolorów i konwertuje je na znormalizowany 6-cyfrowy HEX jako wewnętrzny punkt odniesienia.

Aspekt	Zachowanie	Uwagi
Normalizacja HEX	HEX 3- i 6-cyfrowy, opcjonalny wiodący #	Krótki HEX (np. #0f8) jest rozwijany do #00ff88; znaki nie-heksadecymalne są usuwane.
Obsługa HEX8	RGBA przez #RRGGBBAA	Kanał alfa jest konwertowany na 0–255 i dołączany jako 4. bajt.
Sugestia bezpiecznych kolorów sieciowych	Przybliżenie do najbliższego kroku 51 na kanał	Wartości są zaokrąglane do najbliższej wielokrotności 51 (0, 51, 102, 153, 204, 255).
Sugestia skróconego HEX	Tylko gdy możliwe do skompresowania	Pokazywane, gdy każda para cyfr HEX się powtarza (np. #112233 → #123).

Przestrzenie kolorów i konwersje

Wszystkie obliczenia opierają się na sRGB z referencyjną bielą D65.

Przestrzeń	Obliczenia	Zastosowanie
RGB	Z znormalizowanego HEX (0–255 na kanał)	Podstawowa reprezentacja do konwersji.
HSL / HSV	Standardowe przekształcenia cylindryczne z sRGB	Używane do intuicyjnych edycji i obliczeń harmonii.
CMYK	Niezależne od urządzenia przybliżenie	Obliczane jako 1−max(R,G,B) z komponentami 0–100%; niezwiązane z profilami ICC.
XYZ	Linearyzowane sRGB → XYZ z użyciem macierzy D65	Przestrzeń pośrednia dla LAB/LCH i głębszej analizy.
LAB	CIE Lab* z XYZ	Percepcyjnie bardziej jednolita przestrzeń metryczna.
LCH	CIE LCh° z LAB	Przydatne do regulacji odcienia/chrominancji/jasności i projektowania palet percepcyjnych.

Luminancja i kontrast WCAG

Kontrast jest obliczany przy użyciu standardowego wzoru na względną luminancję WCAG.

Aspekt	Szczegóły	Uwagi
Względna luminancja	Obliczona z linearyzowanego sRGB (składowa Y)	Używa współczynników 0,2126R + 0,7152G + 0,0722B.
Współczynnik kontrastu	(L1 + 0,05) / (L2 + 0,05)	Narzędzie raportuje kontrast względem #000000 i #FFFFFF.
Progi WCAG	AA/AAA dla tekstu normalnego i dużego	Typowe progi: 4,5:1 (AA normalny), 3:1 (AA duży), 7:1 (AAA normalny), 4,5:1 (AAA duży).

Harmonie i kolory pochodne

Harmonie są generowane jako proste obroty odcienia w HSL, zachowując nasycenie i jasność.

Harmonia	Reguła	Przykład
Dopełnienie	+180° odcienia	Przeciwny punkt na kole kolorów.
Triada	±120° odcienia	Trzy równomiernie rozmieszczone kolory.
Tetrada	+90°, +180°, +270° odcienia	Cztery kolory tworzące prostokąt na kole.
Analogiczne	−30° / +30° odcienia	Sąsiedzi wokół koloru bazowego.
Monochromatyczne	Rozjaśnianie/ściemnianie w L	Jaśniejsze i ciemniejsze wersje tego samego odcienia.

Dopasowanie w stylu Pantone (przybliżone)

Gdy dostępny jest zestaw danych Pantone, narzędzie oblicza najbliższe dopasowanie w przestrzeni RGB.

Aspekt	Zachowanie	Uwagi
Ładowanie zestawu danych	Buforowane + asynchroniczne ładowanie przez getPantoneColors / getPantoneColorsCached	Interfejs może natychmiast pokazać dopasowanie, gdy pamięć podręczna jest aktywna, lub po krótkim asynchronicznym ładowaniu.
Metryka dopasowania	Kwadratowa odległość euklidesowa w RGB (0–255)	Szybkie, proste przybliżenie; nie jest metryką percepcyjną ΔE*.
Wynik	Identyfikator i nazwa w stylu Pantone	Wyświetlane wyłącznie jako wskazówka; nie jest to oficjalne mapowanie Pantone.

Wydajność i prywatność

Konwersje, luminancja, kontrast i harmonie są obliczane wyłącznie po stronie klienta. Wyszukiwanie Pantone może korzystać z lokalnego lub zdalnego zestawu danych w zależności od konfiguracji, ale surowe kolory pozostają prostymi ciągami HEX, chyba że wyraźnie je udostępnisz lub wyeksportujesz.

Popularne zastosowania

UI/UX i Front-End

Twórz dostępne pary pierwszoplanowe/tła dla przycisków, linków i tekstu.
Eksportuj zmienne CSS i tokeny projektowe bezpośrednio z wybranych kolorów.
Sprawdź kontrast dla trybów jasnego/ciemnego przed wdrożeniem przełącznika motywów.

/* Tokeny kolorów CSS */
:root {
  --brand: #4caf50;
  --brand-rgb: 76, 175, 80;
  --on-brand: #0b0b0b;
}
.button-primary {
  background-color: var(--brand);
  color: var(--on-brand);
}

Branding i tożsamość wizualna

Wyprowadź paletę podstawową/dodatkową/akcentów z pojedynczego koloru głównego.
Eksploruj opcje dopełniające lub triadowe dla logo lub linii produktów.
Uzyskaj przybliżone nazewnictwo w stylu Pantone przed przygotowaniem wytycznych marki.

Wizualizacja danych i pulpity nawigacyjne

Zdefiniuj kolory serii, które pozostają rozróżnialne na jasnych i ciemnych tłach.
Użyj LAB/LCH do projektowania palet z kontrolowanymi krokami percepcyjnymi.
Szybko sprawdź, czy kolory wykresów spełniają oczekiwania kontrastu w legendzie i etykietach.

❓ Frequently Asked Questions

Jaka jest różnica między HEX, RGB, HSL i HSV?

HEX to po prostu zwarty sposób zapisu wartości RGB w systemie szesnastkowym. RGB opisuje składowe czerwone/zielone/niebieskie w sRGB. HSL i HSV to bardziej intuicyjne modele cylindryczne: H to odcień na kole kolorów, S to nasycenie, a L/V kontroluje jasność.

Dlaczego wartości CMYK wyglądają przybliżenie?

Rzeczywiste wyjście CMYK zależy od profili drukarki, tuszu, papieru i kalibracji. To narzędzie pokazuje niezależne od urządzenia przybliżenie, przydatne do wczesnych decyzji projektowych, ale ostateczne prace drukowane powinny być sprawdzane z profilami ICC dostawcy druku.

Do czego przydają się LAB i LCH?

LAB i LCH są bardziej jednolite percepcyjnie niż surowe RGB. Równe kroki numeryczne w L lub C zwykle wyglądają bardziej spójnie dla oka, co czyni je doskonałymi do generowania odcieni, cieni i zrównoważonych palet lub do mierzenia wizualnej odległości między kolorami.

Jak obliczany jest kontrast?

Obliczamy względną luminancję z sRGB za pomocą formuły WCAG, a następnie wyprowadzamy współczynnik kontrastu (L1 + 0,05) / (L2 + 0,05). Wynik jest porównywany z typowymi progami, takimi jak 4,5:1 (AA dla normalnego tekstu) i 7:1 (AAA dla normalnego tekstu).

Czy nazwy Pantone są dokładne?

Nie. Każda etykieta w stylu Pantone to przybliżone dopasowanie najbliższego sąsiada w przestrzeni RGB i jest dostarczana wyłącznie jako wskazówka. W przypadku prac krytycznych dla produkcji zawsze weryfikuj za pomocą oficjalnych bibliotek i narzędzi Pantone.

Czy przechowujecie moje obrazy lub kolory?

Obliczenia kolorów (formaty, kontrast, harmonie) są wykonywane po stronie klienta. W zależności od konfiguracji, przesyłanie obrazów i zestawy danych Pantone mogą angażować serwer, ale narzędzie jest zaprojektowane do przetwarzania tymczasowego, a nie długoterminowego przechowywania. W przypadku wysoce poufnych zasobów preferuj narzędzia lokalne/offline.

Pro Tips

Best Practice

Zawsze podglądaj kolory na jasnych i ciemnych powierzchniach; postrzegane nasycenie i kontrast mogą się drastycznie zmieniać w zależności od kontekstu.

Best Practice

Używaj LAB lub LCH przy generowaniu odcieni i tonów, aby zmiany jasności były bardziej jednolite dla ludzkiego oka.

Best Practice

Sprawdzaj kontrast AA/AAA dla wszystkich stanów interaktywnych (najechanie, aktywny, wyłączony), nie tylko dla domyślnego koloru przycisku.

Best Practice

Eksportuj zmienne CSS lub tokeny projektowe z zakładki formatów, aby zachować spójność kolorów w komponentach.

Best Practice

Przy pobieraniu próbek z obrazów uśredniaj mały obszar zamiast pojedynczego piksela, aby zmniejszyć szum z kompresji i wygładzania.