Konwerter kolorów
Przelicz kolor między HEX, RGB, HSL i HSV, z jego kontrastem względem czerni i bieli.
Działa w całości w twojej przeglądarce. Nic nie jest wysyłane, logowane ani przechowywane.
Szesnastkowo
#3498DB
- RGB
- rgb(52 152 219)
- HSL
- hsl(204.1 69.9% 53.1%)
- HSV
- hsv(204.1 76.3% 85.9%)
- Luminancja względna
- 0,2830
- Kontrast na białym
- 3,15:1
- Kontrast na czarnym
- 6,66:1
HEX, RGB, HSL i HSV to cztery sposoby zapisu tego samego koloru sRGB. To, który jest wygodny, zależy od tego, co robisz: szesnastkowy do skopiowania wartości z projektu, HSL do lekkiego rozjaśnienia czegoś bez zmiany odcienia.
Jak to działa
Wejście jest odczytywane jako ośmiobitowe kanały czerwony, zielony i niebieski plus kanał alfa, a wszystkie wyniki są liczone z tych kanałów. Nic nie jest przeliczane z innego wyniku, więc wartość nie może się rozjechać przez łańcuch zaokrągleń.
Wartości kontrastu są zgodne z WCAG 2.1: każdy kanał jest linearyzowany i ważony według tego, ile wnosi dla oka, a współczynnik to (jaśniejszy + 0,05) podzielone przez (ciemniejszy + 0,05). Skala biegnie od 1 dla dwóch identycznych kolorów do 21 dla czerni na bieli.
Przykłady
| Przypadek | Dane wejściowe | Wynik |
|---|---|---|
| Wartość szesnastkowa z pliku projektu | #3498db | rgb(52 152 219), hsl(204 70% 53%) |
| Forma skrócona, w której każda cyfra jest powtarzana | #39d | #3399DD, not #039D |
| Z przezroczystością | rgb(52 152 219 / 0.5) | #3498DB80 |
Najczęściej zadawane pytania
Czy kontrast 4,5 oznacza, że mój tekst spełnia wymagania?
To zależy od tekstu — dlatego podana jest liczba, a nie werdykt. WCAG wymaga 4,5 dla zwykłego tekstu i 3 dla dużego, przy czym duży oznacza co najmniej 18 punktów albo 14 punktów pogrubionym. Narzędzie, które widzi tylko dwa kolory, nie może wiedzieć, która reguła ma zastosowanie.
Dlaczego po przeliczeniu na HSL i z powrotem czasem zmienia się cyfra?
Bo zapis szesnastkowy ma 256 kroków na kanał, a HSL nie dzieli się na nie dokładnie. Przeliczenie tam i z powrotem może wylądować o jeden krok obok. Tutaj każda notacja jest liczona z oryginalnych kanałów, więc pokazane wartości są zawsze najbliższe temu, co wpisałeś.
Czym różni się HSL od HSV?
Mają wspólny odcień, a w reszcie się różnią. W HSL jasność 100% to biel, a 50% to czysty kolor. W HSV wartość 100% to czysty kolor, a biel pojawia się dopiero, gdy nasycenie spadnie do zera. Narzędzia graficzne zwykle pokazują HSV; CSS mówi w HSL.
Czy obsługiwane są nazwy kolorów, takie jak „rebeccapurple”?
Nie. Lista słów kluczowych CSS to tabela około 150 nazw, która należy do specyfikacji, a nie do arytmetyki, a to narzędzie przelicza między notacjami, zamiast wyszukiwać nazwy.
Warto wiedzieć
- Wszystko tutaj to sRGB, przestrzeń, którą sieć zawsze zakładała. Szersze przestrzenie dodane w CSS Color 4 — lab, oklch, display-p3 — opisują kolory, których sRGB nie osiąga, a przeliczanie do nich wymaga decyzji, co zrobić z kolorami spoza zakresu. Ta decyzja nie zapada tutaj.
- Wartości kontrastu to liczby, a nie werdykty. To, czy para kolorów spełnia wymagania, zależy od rozmiaru i grubości tekstu, których sam kolor nie zna.
Źródła
Wszystkie narzędzia z kategorii Kod