Przejdź do głównej treści
LibraTool logoLibraTool

Selektor kolorów i generator palet za darmo

Wybieraj kolory, konwertuj HEX/RGB/HSL i generuj harmonijne palety.

Działa offline po wczytaniu
HEX
HSV
h217°
s76%
v96%
tylko wyświetlanie

RGB

r
g
b

HSL

H
S
L

Więcej formatów

HEX8#3b82f6ff
RGBrgb(59 130 246)
HWBhwb(217 23% 4%)
CMYKcmyk(76%, 47%, 0%, 4%)
OKLCHoklch(62.3% 0.188 259.8)
SwiftUIColor(red: 0.231, green: 0.510, blue: 0.965, alpha: 1)
Android0xFF3B82F6
FlutterColor(0xFF3B82F6)

Kontrast WCAG

Najbliższy nazwany kolor: dodgerblue · Czarny tekst jest tu czytelniejszy (5,71:1)

Tekst na białym3,68:1AA duży
Tekst na czarnym5,71:1AA
Tekst na #ffffff3,68:1AA duży

Odcienie i tony (50–950)

Paleta kolorów

Dopełniający

#3b82f6
#f6af3c

Triadyczny

#3b82f6
#f63c83
#83f63c

Analogiczny

#3ce0f6
#3b82f6
#523cf6

Monochromatyczny

#073c92
#0a5adb
#3b82f6
#85b2f9
#cee0fd

Typowe zastosowania

  • Selektor Kolorów do Projektowania StronWybierz i generuj kolory dla twojej strony internetowej — uzyskaj wartości HEX, RGB i HSL oraz harmonijne palety.
  • Selektor Kolorów do BrandinguZbuduj paletę kolorów swojej marki — wybierz kolory podstawowe, dodatkowe i akcentujące, które pracują razem.
  • Selektor Kolorów do Mediów SpołecznychUtwórz urzekające palety kolorów dla postów, historii i projektów profilu mediów społecznych.
  • Selektor Kolorów do DrukuWybierz kolory do materiałów drukowanych — ulotki, wizytówki, broszury — z dokładnymi podglądami kolorów.
  • Selektor Kolorów do PrezentacjiProjektuj schematy kolorów slajdów — wybierz kolory tekstu czytelne, palety wykresów i spójne odcienie akcentu.

Jak to działa

Wszystko działa bezpośrednio w przeglądarce, z ręcznie napisaną matematyką konwersji — bez biblioteki kolorów i odwołań do serwera. Wybierasz kolor natywnym polem koloru przeglądarki lub przez EyeDropper API, a narzędzie natychmiast przelicza go na sześć formatów, obliczając przy tym współczynniki kontrastu WCAG i generując palety harmonii.

  1. 1
    Wybór koloru przez natywne API
    Kolor wybierasz wbudowanym w przeglądarkę widżetem <input type="color">, a w przeglądarkach opartych na Chromium EyeDropper API pozwala pobrać dowolny piksel z ekranu. Obie ścieżki zwracają ciąg hex, który staje się jedynym źródłem prawdy.
  2. 2
    Ręcznie napisane konwersje formatów
    Narzędzie przelicza wartość hex na RGB, HSL, HSV, CMYK i OKLCH własnymi funkcjami matematycznymi (bez zewnętrznej biblioteki). Konwersja OKLCH linearyzuje kanały sRGB, stosuje macierz OKLab z pierwiastkiem sześciennym, a następnie wyznacza chromę i kąt odcienia — zgodnie z nowoczesnym CSS Color Level 4.
  3. 3
    Obliczanie współczynnika kontrastu WCAG
    Luminancja względna jest obliczana ze zlinearyzowanych kanałów RGB według wzoru WCAG 2.x. Następnie narzędzie oblicza współczynniki kontrastu względem czystej bieli i czystej czerni i oznacza je jako AA-duży, AA, AAA lub niezgodny według progów WCAG (3:1, 4,5:1, 7:1).
  4. 4
    Generowanie palet harmonii i zapis lokalny
    Próbki dopełniające, triadyczne, analogiczne i monochromatyczne powstają przez matematyczny obrót lub stopniowanie wartości odcienia i jasności HSL. Zapisane palety trafiają do localStorage w przeglądarce — nic nie opuszcza urządzenia.

Powiązane narzędzia

Często zadawane pytania