Loading...
Loading...
Tłumacz dowolny kolor między HEX, RGB i HSL z na żywo suwakami, interaktywnym wybierakiem i gotowymi do skopiowania ciągami CSS — wszystko obliczane w twojej przeglądarce.
#1A73E8rgb(26, 115, 232)hsl(214, 82%, 51%)WCAG ratio of this color against pure white and pure black backgrounds.
Konwerter kolorów tłumaczy pomiędzy trzema formatami, które projektanci i deweloperzy używają na co dzień: HEX (#RRGGBB) do arkuszy stylów, RGB (czerwony, zielony, niebieski 0–255) do płócien i narzędzi graficznych oraz HSL (odcień, nasycenie, jasność) do intuicyjnej edycji. Wszystkie one opisują ten sam punkt w przestrzeni kolorów sRGB — różnią się jedynie czytelnością a matematyką. To narzędzie utrzymuje te trzy formaty w synchronizacji podczas edytowania któregokolwiek z nich, pokazuje na żywo próbkę i raportuje szybki zrzut kontrastu WCAG, abyś wiedział, czy kolor jest bezpieczny dla tekstu na białym lub czarnym tle. Wszystko działa lokalnie w twojej przeglądarce; żaden kolor nie jest przesyłany ani rejestrowany.
Wklej wartość HEX (z lub bez wiodącego #), przeciągnij natywny wybierak kolorów lub ustaw kanały RGB / HSL za pomocą suwaków lub pól numerycznych.
Duża próbka i etykieta HEX aktualizują się przy każdym naciśnięciu klawisza lub przeciągnięciu suwaka, więc możesz zobaczyć kolor przed jego zatwierdzeniem.
Niezależnie od tego, który format edytowałeś, pozostałe dwa są natychmiast przeliczane w sekcji Kopiuj jako — HEX, rgb(...) i hsl(...) gotowe do wklejenia do CSS, narzędzi projektowych lub kodu.
Kliknij Kopiuj w dowolnym wierszu, aby umieścić ten ciąg w schowku. Przycisk potwierdza to znakiem wyboru przez 1,5 sekundy.
Zrzut kontrastu pokazuje wskaźnik WCAG twojego koloru w porównaniu do czystej bieli i czystej czerni. Jeśli potrzebujesz pełnych werdyktów WCAG AA / AAA w porównaniu do niestandardowego tła, przejdź do narzędzia Sprawdzanie kontrastu, które jest podlinkowane poniżej.
HEX → RGB:
R = parseInt(hex[0..1], 16)
G = parseInt(hex[2..3], 16)
B = parseInt(hex[4..5], 16)
RGB → HSL (każdy kanał skalowany do 0–1):
max = max(R, G, B); min = min(R, G, B)
L = (max + min) / 2
S = L > 0.5 ? (max − min) / (2 − max − min) : (max − min) / (max + min)
H zależy od tego, który kanał jest maksymalny:
R: H = 60 · ((G − B) / (max − min) mod 6)
G: H = 60 · ((B − R) / (max − min) + 2)
B: H = 60 · ((R − G) / (max − min) + 4)HEX to po prostu RGB zapisane w systemie szesnastkowym — trzy pary cyfr szesnastkowych, jedna na kanał, spakowane w jeden ciąg. HSL to percepcyjne przekształcenie tego samego sześcianu RGB: odcień (0–360°) wybiera kawałek koła kolorów, nasycenie (0–100%) to jak żywy w porównaniu do szarości jest kolor, a jasność (0–100%) to jak blisko bieli lub czerni się znajduje. Powyższe konwersje są bezstratne z wyjątkiem zaokrągleń, więc HEX ↔ RGB ↔ HSL ↔ HEX powinny zwracać tę samą wartość.
Referencja: Moduł kolorów CSS Poziom 4 — sRGB
| Wejście | Odpowiednie formaty |
|---|---|
#1A73E8 | rgb(26, 115, 232) · hsl(214, 82%, 51%) Niebieski Google — popularny odcień linku / przycisku głównego. |
rgb(255, 105, 180) | #FF69B4 · hsl(330, 100%, 71%) Nazwa koloru CSS różowy, wyrażona na trzy sposoby. |
hsl(120, 73%, 75%) | #9EE89E · rgb(158, 232, 158) Pastelowa zieleń — łatwa do ustawienia poprzez podniesienie suwaka L. |
#03A | #0033AA · rgb(0, 51, 170) · hsl(222, 100%, 33%) Trzycyfrowy skrót rozwija się do swojego sześciocyfrowego odpowiednika. |
Testuj dowolne dwa kolory pod kątem zgodności z kontrastem WCAG AA i AAA dla tekstu i interfejsu użytkownika.
Oblicz swój dokładny wiek w latach, miesiącach i dniach od dowolnej daty urodzenia.
Sprawdź wskaźnik masy ciała na podstawie wzrostu i wagi, używając jednostek metrycznych lub imperialnych.
Oblicz procenty, zmiany procentowe i procent całości w kilka sekund.
Ostatnia aktualizacja