Wybór Koloru Online
Wybierz dowolny kolor wizualnie i uzyskaj natychmiast jego kod HEX, RGB i HSL.
Dlaczego warto używać
Najbardziej kompletny selektor kolorów dla projektantów i programistów
Wszystkie formaty
HEX, RGB i HSL jednocześnie. Skopiuj potrzebny format jednym kliknięciem.
Prywatność
Bez serwerów, bez logów. Wszystkie kolory są przetwarzane w Twojej przeglądarce.
Automatyczna historia
Ostatnio wybrane kolory są zapisywane lokalnie, ułatwiając porównania i ponowne użycie.
Natychmiastowy
Podgląd koloru w czasie rzeczywistym podczas dostosowywania suwakami lub klawiaturą.
Jak to działa
Trzy kroki, żadnych komplikacji
Wybierz kolor w wizualnym selektorze
Użyj interaktywnego selektora kolorów, aby wybrać odcień na pasku kolorów i dostosować nasycenie oraz jasność w kwadracie koloru. Możesz też bezpośrednio wpisać dowolną wartość HEX, RGB lub HSL w polach tekstowych.
Precyzyjne dostrajanie
Używaj suwaków odcienia, nasycenia i jasności, aby precyzyjnie dopracować kolor. Historia kolorów automatycznie zapisuje ostatnio wybrane kolory, ułatwiając porównania.
Kopiuj w potrzebnym formacie
Uzyskaj kod koloru w formacie HEX (#FF5733), RGB (rgb(255, 87, 51)) lub HSL (hsl(11, 100%, 60%)) jednym kliknięciem. Wszystkie formaty są dostępne jednocześnie.
FAQ
Masz pytania?
Nowoczesne webowe selektory kolorów zwykle działają w przestrzeni HSV (Hue, Saturation, Value): kwadrat selekcji odwzorowuje nasycenie na osi X (lewo = brak nasycenia, prawo = pełne nasycenie) i wartość/jasność na osi Y (góra = maksymalna jasność, dół = czerń). Boczny pasek odcienia pozwala wybrać kąt odcienia (0–360°). Po wybraniu punktu w kwadracie selektor oblicza wartości HSV i konwertuje je na HEX i RGB. Natywny selektor przeglądarki (<input type="color">) używa interfejsu systemu operacyjnego, który może się różnić między Windows (koło barw), macOS (domyślny selektor z nazwanymi kolorami i pipetą) i Linux.
Historia kolorów to zbiór ostatnio wybranych kolorów, zapisanych w celu ułatwienia ponownego użycia i porównań. Profesjonalne narzędzia projektowe, takie jak Figma i Adobe XD, zapisują palety kolorów na poziomie pliku (kolory dokumentu) i na poziomie użytkownika (osobista biblioteka kolorów). W webowych selektorach historia jest zwykle zapisywana w localStorage przeglądarki, aby zachowywała się między sesjami. Paleta kolorów to wyselekcjonowany zbiór powiązanych kolorów: kolory marki, kolory motywu lub palety generowane algorytmicznie (np. z oklch dla zapewnienia jednolitego kontrastu).
Najdokładniejszym sposobem jest użycie pipety w DevTools przeglądarki. W Chrome: otwórz DevTools (F12) → karta Elements → kliknij dowolną wartość koloru w panelu Styles → pojawi się selektor kolorów z pipetą do przechwycenia dowolnego piksela na ekranie. W Firefox: DevTools → Styles → kliknij kwadrat koloru → przycisk pipety. W macOS aplikacja 'Digital Color Meter' (dołączona do systemu) przechwytuje kolory w dowolnym formacie. W Windows PowerToys firmy Microsoft zawiera 'Color Picker' (Win+Shift+C), który przechwytuje kolory w HEX, RGB i HSL z dowolnego punktu na ekranie.
Dostępność kolorów jest przede wszystkim oceniana przez współczynnik kontrastu, zdefiniowany przez WCAG (Web Content Accessibility Guidelines). WCAG 2.1 wymaga minimalnego współczynnika kontrastu 4,5:1 dla normalnego tekstu i 3:1 dla dużego tekstu (18pt lub 14pt pogrubiony). Współczynnik kontrastu oblicza się przez porównanie względnej luminancji dwóch kolorów za pomocą wzoru L1+0,05/L2+0,05. Narzędzia takie jak color-contrast-checker Convertir.ai obliczają ten współczynnik automatycznie. Przy dostępnym projektowaniu skuteczną strategią jest używanie oklch: kolory z tą samą wartością L w oklch mają percepcyjnie równoważną luminancję, co ułatwia tworzenie palet z przewidywalnym kontrastem.
CSS definiuje 140 kolorów ze standardowymi nazwami, odziedziczonych z kolorów MIT X11 (1987). Podstawowe kolory zdefiniowane w CSS1 (1996) to 16: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. CSS Color Level 3 (2011) ustandaryzował 140 nazw X11, w tym historyczne ciekawostki jak 'rebeccapurple' (dodany w 2014 roku ku czci Rebeki Meyer). CSS Color Level 4 nie dodaje nowych nazw, lecz wprowadza transparent jako wartość koloru z rgba(0,0,0,0). Poza nazwami CSS4 wprowadza currentColor (wartość właściwości color elementu) i kolory systemowe OS, takie jak Canvas, ButtonText itp.
Historia selektora kolorów: od Photoshopa 1.0 do DevTools
Cyfrowy selektor kolorów pojawił się w pierwszych narzędziach do edycji obrazów. Adobe Photoshop 1.0 (1990, wyłącznie dla Mac) zawierał już selektor kolorów z paletą HSB i numerycznymi wartościami RGB. Interfejs podwójnego kwadratu kolorów (kolor pierwszoplanowy/tła), który spopularyzował Photoshop, stał się wzrokiem referencją dla cyfrowego projektowania na dziesięciolecia. Systemowy selektor kolorów Windows pojawił się w Windows 3.1 (1992) z projektem 48 podstawowych kolorów oraz konfigurowalną paletą – design ten pozostał praktycznie niezmieniony aż do Windows 7. macOS wprowadził narzędzie ColorSync Utility w Mac OS X 10.0 (2001), które po raz pierwszy zawierało selektor z profilami kolorów ICC i obsługą przestrzeni barw poza sRGB.
Tokeny projektowe zrewolucjonizowały sposób pracy nowoczesnych zespołów z kolorami. Koncepcja została spopularyzowana przez Salesforce w 2014 roku, gdy opublikował system Theo do zarządzania tokenami projektowymi Lightning Design System. Token projektowy koloru to zmienna z semantyczną nazwą (--color-brand-primary, --color-feedback-error) zamiast surowej wartości (#FF0000). Narzędzia takie jak Style Dictionary (Amazon), Theo (Salesforce) i specyfikacja W3C Design Tokens (w opracowaniu od 2019) standaryzują definiowanie, transformację i dystrybucję tych tokenów na różnych platformach (web, iOS, Android, Figma). Celem jest jedno źródło prawdy o kolorze, które automatycznie synchronizuje się między projektem a kodem.
Pipeta w przeglądarkach internetowych była przez lata funkcją bardzo poszukiwaną przez projektantów i programistów. Chrome DevTools wprowadził pipetę w zintegrowanym selektorze kolorów w 2013 roku (wersja 28). Firefox dodał pipetę do DevTools w wersji 31 (2014) i stworzył też rozszerzenie Color Picker przechwytujące kolory z dowolnej karty. W 2021 roku zaproponowano EyeDropper API jako standardowe webowe API (WICG), zaimplementowane w Chrome 95 i Edge 95 (październik 2021), pozwalające dowolnej aplikacji webowej uruchomić natywną pipetę systemową jedną linią JavaScript: const result = await new EyeDropper().open(). Firefox i Safari nie zaimplementowały jeszcze EyeDropper API (stan na 2024), ograniczając jego użycie do przeglądarek opartych na Chromium.