Konwerter kodów kolorów
Kolory w tworzeniu stron internetowych mogą być określane w wielu formatach: hex, RGB, HSL i kolory nazwane. To narzędzie konwertuje między wszystkimi formatami, wyświetla podgląd wizualny, oblicza współczynniki kontrastu dla dostępności i generuje uzupełniające palety kolorów.
Specyfikacje
Typowe zastosowania
- Konwersja kolorów hex od projektanta do HSL dla łatwiejszej manipulacji
- Sprawdzanie, czy kolor tekstu spełnia standardy dostępności WCAG
- Generowanie palet kolorów do projektowania interfejsu
- Debugowanie wartości kolorów CSS, które nie renderują się zgodnie z oczekiwaniami
- Znajdowanie odpowiednika hex dla nazwanych kolorów CSS
Funkcje
- Parsowanie hex (#RGB, #RRGGBB, #RRGGBBAA), RGB, RGBA, HSL, HSLA i kolorów nazwanych
- Natychmiastowa konwersja między wszystkimi formatami kolorów
- Wyjście HEX8 (8-cyfrowy hex z kanałem alfa)
- Podgląd wizualny koloru z przełącznikiem ciemnego/jasnego tła
- Podgląd przykładowego tekstu na białym i czarnym tle
- Obliczanie współczynnika kontrastu WCAG względem czarnego i białego
- Klasyfikacja koloru jako jasny/ciemny
- Generowanie palet kolorów: dopełniająca, analogiczna, triadyczna, tetradyczna i monochromatyczna
- Pokazywanie luminancji i zaleceń dotyczących dostępności
Przyklady
Wskazowki
- HSL jest często łatwiejszy w użyciu: H to kolor, S to nasycenie, L to jasność.
- Dla dostępnego tekstu staraj się osiągnąć współczynnik kontrastu co najmniej 4,5:1 (WCAG AA).
- 8-cyfrowy format hex (#RRGGBBAA) zawiera przezroczystość alfa.
- CSS4 wprowadza nowe przestrzenie kolorów, takie jak oklch(), dla lepszej jednorodności percepcyjnej.
Zrozumienie Konwerter kodów kolorów
Wartości kolorów CSS definiują kolory do stylizacji stron internetowych przy użyciu kilku systemów notacji. Najpopularniejszy to szesnastkowy (#RRGGBB), gdzie każda para cyfr hex reprezentuje kanały czerwony, zielony i niebieski od 00 (0) do FF (255). Skrócona forma #RGB podwaja każdą cyfrę (#F00 odpowiada #FF0000). Forma 8-cyfrowa #RRGGBBAA dodaje kanał przezroczystości alfa.
Notacje funkcyjne zapewniają bardziej intuicyjną specyfikację kolorów. RGB (rgb(255, 0, 0)) określa kanały jako liczby całkowite 0-255 lub procenty. HSL (hsl(0, 100%, 50%)) używa odcienia (0-360 stopni na kole barw), nasycenia (0-100%) i jasności (0-100%), co wielu projektantów uważa za bardziej intuicyjne do tworzenia palet kolorów i dostosowywania kolorów. Zarówno RGB, jak i HSL wspierają przezroczystość alfa za pomocą rgba() i hsla() lub nowoczesnej składni rgb(255 0 0 / 50%).
Dostępność kolorów to kluczowa kwestia w tworzeniu stron internetowych. WCAG 2.1 definiuje minimalne współczynniki kontrastu: 4,5:1 dla normalnego tekstu (Poziom AA), 3:1 dla dużego tekstu i 7:1 dla zwiększonego kontrastu (Poziom AAA). Niewystarczający kontrast sprawia, że tekst jest trudny lub niemożliwy do odczytania dla użytkowników z osłabionym wzrokiem lub zaburzeniami widzenia barw.
CSS wspiera również 148 nazwanych kolorów (jak rebeccapurple, cornflowerblue, tomato), słowo kluczowe currentColor oraz nowsze przestrzenie kolorów, takie jak HWB (odcień-biel-czerń), LAB, LCH i OKLCH, które zapewniają percepcyjnie jednorodną manipulację kolorami. Nowsze przestrzenie są szczególnie przydatne do generowania harmonijnych palet kolorów i płynnych gradientów.
Hex (#FF0000) i RGB (rgb(255,0,0)) oba określają wartości kanałów czerwonego, zielonego i niebieskiego — hex używa systemu szesnastkowego, a RGB liczb dziesiętnych. HSL (hsl(0,100%,50%)) reprezentuje kolor za pomocą odcienia (sam kolor na kole 0-360 stopni), nasycenia (intensywności) i jasności, co wielu programistów uważa za bardziej intuicyjne do tworzenia wariantów. Wszystkie trzy formaty mogą reprezentować te same kolory, ale HSL ułatwia tworzenie jaśniejszych, ciemniejszych lub bardziej stonowanych wariantów przez dostosowanie pojedynczej wartości.
Kanał alfa kontroluje przezroczystość w skali od 0 (w pełni przezroczysty) do 1 (w pełni nieprzezroczysty). W notacji hex alfa jest dopisywane jako dwie dodatkowe cyfry — #FF000080 reprezentuje 50% przezroczystą czerwień (80 hex = 128 dziesiętnie). W notacji funkcyjnej składnia to rgba(255,0,0,0.5) lub nowoczesna forma rgb(255 0 0 / 50%). Przezroczystość alfa jest niezbędna dla nakładek, znaków wodnych i warstwowych elementów interfejsu. Dla zgodności z WCAG, Poziom AA wymaga współczynnika kontrastu co najmniej 4,5:1 dla normalnego tekstu i 3:1 dla dużego tekstu (18px+ pogrubiony lub 24px+ normalny), podczas gdy Poziom AAA wymaga 7:1 dla normalnego tekstu i 4,5:1 dla dużego tekstu. Elementy nie-tekstowe, takie jak ikony, obramowania i kontrolki formularzy, potrzebują co najmniej kontrastu 3:1 względem sąsiednich kolorów.
LAB i OKLCH to percepcyjnie jednorodne przestrzenie kolorów, w których równe zmiany numeryczne dają wizualnie równe różnice kolorów, co czyni je lepszymi do generowania palet i płynnych gradientów. OKLCH (Jasność, Chroma, Odcień) jest szczególnie przydatny w CSS, ponieważ dostosowywanie jasności daje naturalne, przewidywalne wyniki. Oba są wspierane w nowoczesnym CSS za pomocą funkcji oklch() i lab().