Narzędzia kolorów ToolDeck umożliwiają konwersję między formatami kolorów, sprawdzanie współczynników kontrastu dla dostępności, generowanie palet, tworzenie gradientów CSS oraz wyszukiwanie nazw kolorów lub klas Tailwind bezpośrednio w przeglądarce. Konwerter Kolorów obsługuje HEX, RGB, HSL i HSV w obu kierunkach. Sprawdzacz Kontrastu weryfikuje zgodność z WCAG 2.1 AA i AAA. Generator Palety tworzy schematy komplementarne, analogiczne, triadyczne i tetradyczne na podstawie dowolnego koloru bazowego. Generator Gradientu CSS generuje gotowy do użycia kod gradientu liniowego i radialnego. Wyszukiwarka Nazw Kolorów dopasowuje dowolną wartość do najbliższej nazwanej barwy CSS, a Wyszukiwarka Kolorów Tailwind mapuje dowolne kolory na klasy narzędziowe Tailwind. Wszystkie narzędzia działają po stronie klienta i nie wysyłają żadnych danych na serwer.
Czym są narzędzia kolorów?
Narzędzia kolorów to programy pomocnicze, które ułatwiają deweloperom i projektantom pracę z cyfrowymi wartościami kolorów. Każdy kolor na ekranie jest zapisany jako liczby: trzy kanały dla RGB (czerwony, zielony, niebieski), szesnastkowy ciąg znaków dla skróconego zapisu CSS lub kąt odcienia oraz nasycenie i jasność dla HSL. Ręczne przeliczanie między tymi reprezentacjami jest powolne i podatne na błędy, szczególnie gdy trzeba uwzględnić przezroczystość alfa lub nowsze modele, takie jak OKLCH.
Poza konwersją formatów praca z kolorami obejmuje testowanie dostępności, tworzenie palet i projektowanie gradientów. WCAG 2.1 definiuje minimalne współczynniki kontrastu (4,5:1 dla zwykłego tekstu na poziomie AA, 7:1 dla AAA), które trudno zweryfikować wzrokowo. Generowanie harmonijnych schematów kolorów wymaga precyzyjnych obliczeń kątowych na kole kolorów HSL. Gradienty CSS wymagają poprawnej składni dla kierunku, punktów zatrzymania koloru i wartości zapasowych. Ręczne wykonywanie tego wszystkiego w systemie projektowania z dziesiątkami tokenów szybko staje się żmudne.
Narzędzia kolorów automatyzują te zadania. Przyjmują kolor w jednym formacie, wykonują obliczenia i zwracają potrzebny wynik — czy to przekonwertowaną wartość, wynik testu dostępności, zestaw harmonijnych próbek czy fragment kodu CSS. Gdy narzędzie działa w przeglądarce, unikasz też przesyłania poufnych tokenów projektu do zewnętrznych usług.
Dlaczego warto używać narzędzi kolorów na ToolDeck?
Narzędzia kolorów ToolDeck działają wyłącznie w Twojej przeglądarce. Żadne wartości kolorów nie opuszczają Twojego urządzenia, nie jest wymagane konto, a każde narzędzie ładuje się natychmiast bez instalowania rozszerzeń ani oprogramowania.
🎨Konwersja formatów w jednym kroku
Wklej kod HEX i uzyskaj jednocześnie wartości RGB, HSL i HSV. Nie musisz łączyć wielu konwerterów ani pamiętać wzorów przeliczania.
🔒Zachowaj prywatność tokenów projektu
Całe przetwarzanie odbywa się po stronie klienta. Kolory marki, nieopublikowane decyzje dotyczące palety i wewnętrzne wartości systemu projektowania pozostają na Twoim urządzeniu.
♿Testuj dostępność natychmiast
Sprawdź dowolną parę kolor pierwszego planu/tła względem progów WCAG 2.1 AA i AAA dla zwykłego i dużego tekstu. Uzyskaj dokładny współczynnik kontrastu, a nie tylko etykietę zaliczony/niezaliczony.
⚡Kopiuj gotowy do użycia wynik
Każde narzędzie generuje wartości, które możesz wkleić bezpośrednio do CSS, konfiguracji Tailwind lub pól wprowadzania w narzędziach projektowych. Bez konieczności ponownego formatowania.
Przypadki użycia narzędzi kolorów
Oto sześć typowych scenariuszy, w których narzędzia kolorów ToolDeck oszczędzają czas.
Utrzymanie systemu projektowania
Podczas aktualizacji systemu projektowania często otrzymujesz kolory w formacie HEX od projektanta, ale potrzebujesz HSL dla właściwości niestandardowych CSS.
Konwerter Kolorów tłumaczy między formatami, dzięki czemu możesz wypełniać pliki tokenów bez ręcznych obliczeń.
Audyty dostępności
Podczas audytu zgodności z WCAG każda kombinacja tekstu i tła musi spełniać minimalne współczynniki kontrastu.
Sprawdzacz Kontrastu Kolorów pokazuje dokładny współczynnik oraz status zaliczenia AA/AAA dla zwykłego i dużego tekstu.
Eksploracja palety marki
Zaczynając od jednego koloru marki, potrzebujesz wariantów akcentowych i neutralnych.
Generator Palety Kolorów oblicza harmonie komplementarne, analogiczne, triadyczne i tetradyczne, dzięki czemu możesz ocenić opcje przed zatwierdzeniem palety.
Stylizacja tła CSS
Tworzenie sekcji hero lub tła karty z gradientem wymaga poprawnej składni CSS dla kątów, punktów zatrzymania koloru i prefiksów dostawców.
Generator Gradientu CSS pozwala budować gradient wizualnie i skopiować kod.
Migracja do Tailwind
Podczas migracji projektu do Tailwind CSS musisz zmapować istniejące wartości HEX lub RGB na najbliższą klasę narzędziową Tailwind.
Wyszukiwarka Kolorów Tailwind znajduje najbliższe dopasowanie i pokazuje różnicę, abyś mógł ocenić, czy przybliżenie jest akceptowalne.
Przegląd kodu i dokumentacja
Podczas przeglądu kodu surowa wartość HEX jak #708090 nic nie mówi na pierwszy rzut oka.
Wyszukiwarka Nazw Kolorów identyfikuje ją jako SlateGray, dzięki czemu przeglądy i dokumentacja stają się bardziej czytelne.
Dokumentacja modeli kolorów CSS
CSS obsługuje wiele modeli kolorów. Poniższa tabela zawiera podsumowanie sześciu najczęstszych formatów, ich składni i typowych przypadków użycia. Wszystkie są obsługiwane przez Konwerter Kolorów ToolDeck.
| Model | Składnia CSS | Kanały | Zakres wartości | Typowe zastosowanie |
|---|
| HEX | #rrggbb | Czerwony, Zielony, Niebieski | 00–ff na kanał | Najczęściej stosowany w CSS, przekazywaniu projektów, wytycznych marki |
| RGB | rgb(r, g, b) | Czerwony, Zielony, Niebieski | 0–255 na kanał | JavaScript canvas API, obliczone style, przetwarzanie obrazów |
| HSL | hsl(h, s%, l%) | Odcień, Nasycenie, Jasność | 0–360 / 0–100% / 0–100% | Tokeny projektu, generowanie motywów, programowe warianty odcieni |
| HSV | N/A (nie w CSS) | Odcień, Nasycenie, Wartość | 0–360 / 0–100% / 0–100% | Selektory kolorów (Photoshop, Figma), kalibracja kolorów sprzętowych |
| OKLCH | oklch(L C H) | Jasność, Chroma, Odcień | 0–1 / 0–0.4 / 0–360 | Percepcyjnie jednolite palety (specyfikacja CSS Color Level 4) |
| Named | np. slategray | Mapowane wewnętrznie na RGB | 148 predefiniowanych nazw | Prototypowanie, czytelny kod, szybkie demonstracje |
CSS Color Level 4 (W3C) definiuje również funkcje lab(), lch() i color(). HEX i RGB pozostają najszerzej obsługiwanymi formatami w przeglądarkach i narzędziach projektowych.
Jak wybrać odpowiednie narzędzie kolorów
Każde narzędzie kolorów rozwiązuje inny problem. Skorzystaj z poniższego przewodnika, aby znaleźć właściwe dla swojego zadania.
- 1
Jeśli potrzebujesz skonwertować kolor między formatami HEX, RGB, HSL lub HSV → Konwerter Kolorów - 2
Jeśli potrzebujesz zweryfikować, czy para kolor tekstu/tła spełnia standardy dostępności WCAG → Sprawdzacz Kontrastu Kolorów - 3
Jeśli potrzebujesz wygenerować zestaw harmonijnych kolorów na podstawie jednego koloru bazowego → Generator Palety Kolorów - 4
Jeśli potrzebujesz zbudować liniowy lub radialny gradient CSS i uzyskać kod → Generator Gradientu CSS - 5
Jeśli potrzebujesz znaleźć czytelną dla człowieka nazwę CSS najbliższą danej wartości koloru → Wyszukiwarka Nazw Kolorów - 6
Jeśli potrzebujesz zmapować dowolny kolor na najbliższą klasę narzędziową Tailwind CSS → Wyszukiwarka Kolorów Tailwind
Wszystkie sześć narzędzi akceptuje dane wejściowe w wielu formatach. Jeśli nie jesteś pewien, w jakim formacie jest Twój kolor, zacznij od Konwertera Kolorów, który automatycznie wykrywa notację HEX, RGB, HSL i HSV.
Najczęściej zadawane pytania
Jaka jest różnica między formatami kolorów HEX i RGB?
HEX i RGB reprezentują tę samą przestrzeń kolorów. Kod HEX jak #ff6600 to szesnastkowe kodowanie trzech kanałów RGB: ff = 255 (czerwony), 66 = 102 (zielony), 00 = 0 (niebieski). Jedyna różnica to notacja. HEX jest bardziej zwięzły w arkuszach stylów CSS, natomiast RGB jest łatwiejszy do programowego manipulowania, ponieważ każdy kanał jest już dziesiętną liczbą całkowitą.
Kiedy powinienem używać HSL zamiast HEX lub RGB?
HSL oddziela odcień (sam kolor) od nasycenia i jasności. Ułatwia to tworzenie wariantów odcieni: zachowaj stały odcień, zmniejsz jasność dla ciemniejszego tonu, zwiększ dla jaśniejszego odcienia. Systemy projektowania generujące motywy jasne/ciemne na podstawie jednego koloru bazowego często przechowują tokeny w HSL z tego powodu. Właściwości niestandardowe CSS również dobrze łączą się z HSL, ponieważ można nadpisywać poszczególne kanały.
Jakiego współczynnika kontrastu wymaga WCAG 2.1 dla tekstu?
WCAG 2.1 Poziom AA wymaga minimalnego współczynnika kontrastu 4,5:1 dla zwykłego tekstu (poniżej 18pt lub 14pt pogrubiony) i 3:1 dla dużego tekstu (18pt+ lub 14pt+ pogrubiony). Poziom AAA podnosi te progi odpowiednio do 7:1 i 4,5:1. Współczynniki te są obliczane na podstawie względnej luminancji kolorów pierwszego planu i tła przy użyciu wzoru zdefiniowanego w Kryterium Sukcesu WCAG 2.1 1.4.3.
Ile nazwanych kolorów obsługuje CSS?
CSS definiuje 148 nazwanych kolorów, odziedziczonych ze specyfikacji SVG 1.1 i CSS3. Obejmują one popularne nazwy jak red, blue i white, a także szczegółowe nazwy jak MediumSlateBlue, PapayaWhip i LavenderBlush. Nazwane kolory mapują się na stałe wartości RGB. Specyfikacja CSS Color Level 4 zachowuje te same 148 nazw i nie dodaje nowych. Przeglądarki rozpoznają też słowo kluczowe transparent (odpowiednik rgba(0,0,0,0)).
Czy mogę już dziś używać kolorów OKLCH w CSS?
Tak. Funkcja oklch() jest obsługiwana w Chrome 111+, Firefox 113+ i Safari 15.4+. OKLCH jest częścią specyfikacji CSS Color Level 4 opublikowanej przez W3C. Jego główną zaletą nad HSL jest percepcyjna jednolitość: dwa kolory o tej samej wartości jasności w OKLCH faktycznie wyglądają jednakowo jasno dla ludzkiego oka, co nie jest prawdą w przypadku HSL. Sprawia to, że OKLCH jest lepszym wyborem do generowania dostępnych palet o spójnej postrzeganej jasności.
Jaka jest różnica między HSL a HSV?
HSL i HSV używają cylindrycznej reprezentacji z odcieniem jako kątem, ale różnie definiują jasność. W HSL jasność 50% oznacza czysty kolor; 0% to czerń, 100% to biel. W HSV wartość 100% oznacza czysty kolor; 0% to czerń. HSV nie ma wbudowanego sposobu na osiągnięcie bieli bez jednoczesnego zmniejszenia nasycenia. Projektanci i selektory kolorów (Photoshop, Figma) zazwyczaj używają HSV, natomiast CSS natywnie używa HSL.
Jak znaleźć klasę Tailwind dla dowolnego koloru HEX?
Tailwind CSS zawiera stałą paletę około 220 klas kolorów (22 odcienie razy 10 wariantów każdy, plus black, white i transparent). Aby znaleźć najbliższą klasę dla danej wartości HEX, obliczasz odległość euklidesową w percepcyjnej przestrzeni kolorów (jak CIELAB lub OKLCH) między swoim kolorem a każdą próbką Tailwind. Wyszukiwarka Kolorów Tailwind na ToolDeck robi to automatycznie i pokazuje najbliższe dopasowanie wraz z różnicą kolorów, dzięki czemu możesz ocenić, czy przybliżenie jest wystarczające.
Czy bezpieczne jest wklejanie poufnych kolorów marki do narzędzia online?
To zależy od narzędzia. Każde narzędzie, które wysyła dane wejściowe na serwer, ujawnia te wartości w ruchu sieciowym i logach serwera. Narzędzia kolorów ToolDeck działają wyłącznie w Twojej przeglądarce przy użyciu JavaScript po stronie klienta. Żadne żądania HTTP nie przesyłają danych kolorów do żadnego backendu. Możesz to zweryfikować, otwierając kartę Sieć w przeglądarce podczas korzystania z narzędzia. Dla maksymalnego bezpieczeństwa możesz też używać narzędzi offline po pierwszym załadowaniu strony.