Próbnik i konwerter kolorów szesnastkowych (RGB, HSL, HSV, CMYK, OKLCH)

Konwertuj dowolny kolor do HEX, RGB, HSL, HSV, CMYK i OKLCH, sprawdź kontrast, kopiuj próbki harmonii i eksportuj CSS lub JSON—bezpośrednio w przeglądarce.

Do korzystania z funkcji interaktywnych wymagana jest obsługa JavaScript. Aby móc korzystać z tego narzędzia, włącz JavaScript w swojej przeglądarce.

Wartość koloru

Wprowadź hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() lub nazwę koloru CSS. Nieprawidłowe wartości zachowują ostatnią poprawną konwersję.

Najbliższa nazwa CSS: royalblue

Krycie100%

Konwersje

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217.219, 91.2%, 59.8%)

HSVhsv(217.219, 76%, 96.5%)

CMYKcmyk(76%, 47.2%, 0%, 3.5%)

OKLCHoklch(0.623 0.188 259.815)

Kontrast WCAG

Na białym tle

3.68:1

Spełnia WCAG AA (tylko duży tekst)

Na czarnym tle

5.71:1

Spełnia WCAG AA (tekst normalny)

Próbki harmonii

Typ harmonii

Liczba próbek

Pasek odcienia/cienia

Kroki odcienia/cienia

Eksportuj próbki

CSS

:root {
  --color-base: #3B82F6;
  --color-analogous-1: #3BF6AF;
  --color-analogous-2: #3BDFF6;
  --color-analogous-3: #3B82F6;
  --color-analogous-4: #513BF6;
  --color-analogous-5: #AF3BF6;
  --color-tint-shade-1: #000000;
  --color-tint-shade-2: #0A162B;
  --color-tint-shade-3: #142D55;
  --color-tint-shade-4: #1F4380;
  --color-tint-shade-5: #295AAA;
  --color-tint-shade-6: #3370D5;
  --color-tint-shade-7: #3D87FF;
}

JSON

{
  "baseHex": "#3B82F6",
  "alpha": 1,
  "namedColor": "royalblue",
  "harmony": "analogous",
  "harmonyCount": 5,
  "harmonySwatches": [
    "#3BF6AF",
    "#3BDFF6",
    "#3B82F6",
    "#513BF6",
    "#AF3BF6"
  ],
  "tintShadeStrip": [
    "#000000",
    "#0A162B",
    "#142D55",
    "#1F4380",
    "#295AAA",
    "#3370D5",
    "#3D87FF"
  ],
  "stripCount": 7,
  "contrast": {
    "onWhite": 3.68,
    "onBlack": 5.71
  }
}

Wybierz lub wklej dowolny format koloru, konwertuj do HEX, RGB, HSL, HSV, CMYK i OKLCH, sprawdź kontrast WCAG, generuj próbki harmonii, kopiuj wartości i eksportuj CSS lub JSON. Bezpłatny, szybki i działa całkowicie w przeglądarce.

Jak korzystać z tego selektora kolorów

Wpisz lub wklej dowolny obsługiwany format koloru, dostosuj krycie lub użyj natywnego selektora. Strona natychmiast konwertuje do HEX, RGB, HSL, HSV, CMYK i OKLCH, pokazuje kontrast WCAG na białym i czarnym tle, generuje próbki harmonii i pasek odcienia/cienia oraz utrzymuje wszystko gotowe do kopiowania. Udostępnij konfigurację przez URL—stan jest przechowywany w ciągu zapytania.

Odniesienie HEX, RGB, HSL, HSV, CMYK i OKLCH

Hex to kompaktowe kodowanie RGB. RGB opisuje kanały czerwony/zielony/niebieski. HSL wyraża odcień, nasycenie i jasność; HSV wykorzystuje odcień, nasycenie i wartość (jasność). CMYK modeluje procenty tuszu drukarskiego. OKLCH to perceptualnie jednolita przestrzeń kolorów CSS. To narzędzie używa deterministycznych obliczeń w przeglądarce—bez przesyłania i zewnętrznych API.

Komplementarny, analogiczny, triadyczny, split-komplementarny, tetradyczny i monochromatyczny

Komplementarny obraca odcień o 180°. Analogiczny przesuwa odcień stałymi kątami wokół bazy. Triadyczny używa przesunięć 120°. Split-komplementarny dodaje dwa odcienie blisko komplementu. Tetradyczny używa prostokątnych przesunięć 90°. Monochromatyczny zachowuje odcień i zmienia jasność. Sterowanie liczbą dotyczy trybów analogicznego i monochromatycznego.

Zmienne CSS i eksport JSON

Eksport tworzy właściwości :root o stabilnych nazwach (np. --color-base, --color-analogous-1) i JSON z baseHex, alpha, namedColor, trybem harmonii, współczynnikami kontrastu i listami próbek dla skryptów lub tokenów projektowych.

Sprawdzanie kontrastu WCAG

Współczynnik kontrastu jest obliczany z luminancji względnej według WCAG 2.x. AA wymaga 4,5:1 dla normalnego tekstu i 3:1 dla dużego tekstu; AAA wymaga 7:1. Użyj podglądów przy wyborze kolorów tekstu lub UI na jasnym lub ciemnym tle.

Często zadawane pytania

Jakie formaty kolorów mogę wprowadzić?

Hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() oraz wszystkie standardowe nazwy kolorów CSS, takie jak cornflowerblue lub rebeccapurple.

Czy #ABC rozwija się do sześciu cyfr?

Tak. Trzycyfrowy hex jest rozwijany na parę cyfr, więc #ABC staje się #AABBCC.

Co się stanie, jeśli mój kolor jest nieprawidłowy?

Zobaczysz błąd wbudowany. Ostatni prawidłowy kolor pozostaje w wierszach konwersji, selektorze i eksporcie, dopóki ponownie nie wprowadzisz prawidłowej wartości.

Jak działa sprawdzanie kontrastu WCAG?

Oblicza współczynnik kontrastu między Twoim kolorem a czystą bielą lub czernią, używając luminancji względnej. Wyniki pokazują, czy kolor spełnia progi AA lub AAA dla normalnego lub dużego tekstu.

Jak obliczane są kolory harmonii?

Są deterministyczne: komplementarny to przesunięcie odcienia o 180°; analogiczny używa stałych kroków odcienia; triadyczny przesunięć 120°; split-komplementarny odcieni blisko komplementu; tetradyczny prostokątnych przesunięć 90°; monochromatyczny zmienia jasność, zachowując odcień i nasycenie bazy.

Co zawiera eksport JSON?

Stabilne klucze: baseHex, alpha, namedColor, harmony, harmonyCount gdzie ma to zastosowanie, harmonySwatches, tintShadeStrip, stripCount i współczynniki kontrastu—odpowiednie do narzędzi lub dokumentacji.

Czy mogę udostępnić swoje kolory?

Tak. URL jest aktualizowany o hex, alpha, tryb harmonii, liczby i rozmiar paska, abyś mógł zapisać lub udostępnić dokładną konfigurację.