Konwerter kolorów

Przeliczaj kolory między HEX, RGB, HSL i OKLCH, znajdź każdy kolor we fragmencie CSS i twórz odcienie oraz harmonie — bezpośrednio w przeglądarce.

O narzędziu Konwerter kolorów

Co to jest

To narzędzie przyjmuje pojedynczy kolor albo cały blok CSS, SVG lub JSON i znajduje w nim każdy kolor. Dla aktywnego koloru pokazuje wszystkie popularne formaty, skalę odcieni od 50 do 950, harmonie dopełniającą i analogiczną oraz kontrast na bieli i czerni. Wynik można wyeksportować jako zmienne CSS, konfigurację Tailwind lub Figma JSON.

Główne funkcje

  • Każdy kolor znaleziony we wklejonym CSS, SVG lub JSON — HEX, rgb(), hsl(), oklch() i inne.
  • Aktywny kolor we wszystkich popularnych formatach, z pipetą.
  • Skala odcieni od 50 do 950.
  • Harmonie dopełniająca i analogiczna.
  • Kontrast na bieli i czerni z oznaczeniami AA i AAA; eksport jako zmienne CSS, Tailwind lub Figma JSON.

Jak używać

  1. Wklej kolor lub blok CSS, SVG albo JSON, lub kliknij „Przykład”.
  2. Wybierz kolor, z którym chcesz pracować.
  3. Skopiuj go w potrzebnym formacie albo przejrzyj odcienie i harmonie.
  4. Wyeksportuj kolory jako kod, jeśli budujesz motyw.

Kiedy się przydaje

  • Zamienić kolory HEX z projektu na OKLCH lub HSL do swojego CSS.
  • Uzyskać pełną skalę odcieni z jednego koloru marki.
  • Zebrać wszystkie kolory użyte w starym arkuszu stylów.

Prywatność i ograniczenia

Twoje dane

Twoje kolory i kod są przetwarzane w przeglądarce i nie trafiają na serwer — witryna otrzymuje tylko anonimowe zdarzenie „otwarto narzędzie”, bez treści. Wynik wysłany do innego narzędzia zostaje na tym urządzeniu przez 24 godziny w „Ostatniej aktywności”.

Ograniczenia

  • Zmienne CSS w rodzaju var(--brand) nie są rozwijane: znajdowane są tylko wartości kolorów zapisane w tekście.
  • Niektóre formaty lekko zaokrąglają wartości, więc przeliczenie tam i z powrotem może zmienić ostatnią cyfrę.

Najczęstsze pytania

Jakie formaty kolorów są obsługiwane?

HEX (3, 6 lub 8 cyfr), rgb(), hsl(), oklch(), oklab() oraz nazwy kolorów CSS, np. rebeccapurple. Każdy format znaleziony w tekście jest pokazany obok swojej wartości we wszystkich pozostałych.

Jak powstaje skala odcieni?

Z aktywnego koloru budowane są jaśniejsze i ciemniejsze stopnie od 50 do 950, nazwane jak palety Tailwind, więc od razu wstawisz je do motywu.

Czy mogę przeliczyć wiele kolorów naraz?

Tak — wklej cały plik CSS lub JSON z tokenami projektowymi, a wszystkie kolory w nim zostaną znalezione i wypisane.