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

Konwertuj pliki szesnastkowe na RGB, HSL i HSV, 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.

Kolor szesnastkowy

Wprowadź #RGB lub #RRGGBB (z # lub bez). Nieprawidłowe wartości powodują zachowanie ostatniej dobrej konwersji.

Konwersje

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217.219, 91.2%, 59.8%)

HSVhsv(217.219, 76%, 96.5%)

Próbki harmonii

Typ harmonii

Liczba próbek

Pasek odcienia / cienia

Stopnie 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",
  "harmony": "analogous",
  "harmonyCount": 5,
  "harmonySwatches": [
    "#3BF6AF",
    "#3BDFF6",
    "#3B82F6",
    "#513BF6",
    "#AF3BF6"
  ],
  "tintShadeStrip": [
    "#000000",
    "#0A162B",
    "#142D55",
    "#1F4380",
    "#295AAA",
    "#3370D5",
    "#3D87FF"
  ],
  "stripCount": 7
}

Wybierz lub wklej kolor szesnastkowy, przekonwertuj go na RGB, HSL i HSV, wygeneruj próbki uzupełniające/analogowe/triadyczne/monochromatyczne, skopiuj wartości i eksportuj CSS lub JSON. Bezpłatny, szybki i działa całkowicie w przeglądarce.

Jak korzystać z tego szesnastkowego próbnika kolorów

Wpisz lub wklej wartość szesnastkową albo użyj natywnego selektora. Strona natychmiast konwertuje je do formatów RGB, HSL i HSV, generuje próbki harmonii oraz pasek odcienia i sprawia, że wszystko jest gotowe do kopiowania. Udostępnij swoją konfigurację adresowi URL — stan jest przechowywany w ciągu zapytania.

Odniesienia szesnastkowe, RGB, HSL i HSV

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ść). To narzędzie wykorzystuje deterministyczną matematykę w przeglądarce — bez przesyłania i zewnętrznych interfejsów API.

Uzupełniające, analogiczne, triadyczne i monochromatyczne

Uzupełniający obraca odcień o 180°. Analogiczne stopnie zabarwiają się pod stałym kątem wokół podstawy. Triadic używa przesunięć 120°. Monochromatyczny utrzymuje odcień i zmienia jasność. Sterowanie zliczaniem dotyczy trybów analogowych i monochromatycznych.

Zmienne CSS i eksport JSON

Eksport tworzy niestandardowe właściwości :root o stabilnych nazwach (na przykład --color-base, --color-analogous-1) i JSON z baseHex, trybem harmonii i listami próbek dla skryptów lub tokenów projektowych.

Często zadawane pytania

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

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

Co się stanie, jeśli mój heks będzie nieprawidłowy?

Widzisz błąd wbudowany. Ostatni prawidłowy kolor pozostaje w wierszach konwersji, selektorze i eksporcie, dopóki ponownie nie wprowadzisz prawidłowego koloru szesnastkowego.

Jak obliczane są kolory harmonii?

Są deterministyczne: komplementarne jest przesunięcie odcienia o 180 ° w HSL; analogicznie wykorzystuje stałe stopnie odcienia; triadyczny wykorzystuje przesunięcia 120°; monochromatyczny zmienia jasność, zachowując odcień i nasycenie od podstawy.

Co zawiera eksport JSON?

Stabilne klucze: baseHex, Harmony, HarmonCount tam, gdzie ma to zastosowanie, HarmonSwatches (ciągi szesnastkowe), tintShadeStrip i StripCount — odpowiednie do oprzyrządowania lub dokumentacji.

Czy mogę podzielić się swoimi kolorami?

Tak. Adres URL jest aktualizowany o wartości szesnastkowe, tryb harmonii, liczbę i rozmiar paska, dzięki czemu możesz dodawać zakładki lub udostępniać dokładną konfigurację.