Wybierz kolor lub wprowadź wartości w dowolnym formacie. Natychmiast konwertuje między HEX, RGB i HSL z podglądem próbki i kopiowaniem jednym kliknięciem.
Uzyskaj dostęp do pełnego zestawu lokalnych narzędzi SEO, śledzenia pozycji i optymalizacji opartej na AI.
Zarejestruj się za darmoKolor jest jednym z najpotężniejszych elementów projektowych w sieci, a wybór odpowiedniego formatu dla Twojego CSS może znacząco wpłynąć na efektywność pracy. Trzy najczęściej używane formaty kolorów — HEX, RGB i HSL — każdy reprezentuje ten sam zakres ponad 16 milionów kolorów, ale różnią się znacząco pod względem intuicyjności odczytu i manipulacji. Kody HEX, takie jak #3b82f6, są kompaktowe i wszechobecne w CSS, podczas gdy wartości RGB, takie jak rgb(59, 130, 246), odzwierciedlają bezpośrednio kanały światła czerwonego, zielonego i niebieskiego, które ekran wykorzystuje do wyświetlania koloru.
HSL (Hue, Saturation, Lightness) jest coraz częściej wybierany przez projektantów, ponieważ odpowiada naturalnemu postrzeganiu koloru przez ludzi. Zamiast mieszać abstrakcyjne wartości kanałów, wybierasz odcień na kole kolorów (0‑360 stopni), ustawiasz jego intensywność za pomocą nasycenia (0‑100 %) i kontrolujesz jasność za pomocą lightness (0‑100 %). Dzięki temu łatwo tworzyć harmonijne palety: utrzymujesz stały odcień i zmieniasz nasycenie oraz jasność, aby uzyskać odcienie, przyciemnienia i tonacje tego samego koloru. Nowoczesne własności CSS działają szczególnie dobrze z HSL, umożliwiając zdefiniowanie bazowego odcienia i wyprowadzenie z niego całej palety.
Wybór kolorów, które wyglądają dobrze, to tylko połowa równania — muszą być także dostępne. Wytyczne Web Content Accessibility Guidelines (WCAG 2.1) wymagają współczynnika kontrastu co najmniej 4,5:1 dla normalnego tekstu i 3:1 dla dużego tekstu. Około 8 % mężczyzn i 0,5 % kobiet doświadcza pewnej formy niedowidzenia barw, więc poleganie wyłącznie na kolorze w przekazywaniu informacji jest częstą pułapką dostępności. Zawsze łącz swoje wybory kolorów z narzędziem sprawdzającym kontrast i rozważ, jak projekt wygląda w symulowanych filtrach daltonizmu. Ten konwerter pomaga szybko iterować wartości kolorów, aby testować różne kombinacje i znaleźć idealną równowagę między estetyką a czytelnością.