Konwerter kolorów (HEX/RGB/HSL)
Konwertuj kolory między formatami HEX, RGB i HSL. Wybierz kolor wizualnie lub wprowadź wartości ręcznie.
#535bebrgb(83, 91, 235)hsl(237, 79%, 62%)Jak korzystać z tego narzędzia
- 1
Click the color swatch to open your operating system's color picker and choose a color visually.
- 2
Or type a 6-digit HEX value (such as #535beb, with or without the leading #) into the text field.
- 3
Read the matching rgb(R, G, B) and hsl(H, S%, L%) strings in the result cards below.
- 4
Copy whichever format you need straight into your CSS or design file.
Czym jest konwerter kolorów (HEX/RGB/HSL)?
HEX, RGB i HSL to trzy sposoby wyrażania tego samego koloru. HEX (#RRGGBB) jest najpowszechniejszy w CSS i narzędziach projektowych. RGB (rgb(R,G,B)) rozdziela kanały liczbowo. HSL (hsl(H,S%,L%)) jest bardziej intuicyjny dla człowieka: barwa (hue) to kolor, nasycenie to intensywność, a jasność (lightness) to jaskrawość. Używaj HSL przy projektowaniu palet; konwertuj na HEX na potrzeby wdrożenia.
Typowe przypadki użycia
Translating a brand HEX code from a style guide into the rgb() values a legacy stylesheet or email template requires.
Grabbing the HSL form of a color so you can nudge its lightness or saturation while keeping the same hue for a palette.
Checking the exact RGB channels of a color picked from a screenshot or mockup before writing it into CSS.
Confirming what a designer's HEX swatch becomes in RGB for a canvas, SVG, or charting library that wants numeric channels.
Teaching or learning how hexadecimal color notation maps to decimal RGB and to the HSL model.
Quickly sampling a color visually with the picker and reading all three CSS-ready notations at once.
Najczęściej zadawane pytania
Kiedy powinienem używać HSL zamiast HEX?▼
A co z OKLCH i nowoczesnymi przestrzeniami barw?▼
Powiązane narzędzia
Generator box-shadow CSS
Twórz wizualnie wartości box-shadow w CSS. Podgląd w czasie rzeczywistym i kopiowanie wygenerowanego CSS.
Generator gradientów CSS
Twórz liniowe i radialne gradienty CSS. Wybieraj kolory w sposób wizualny i kopiuj wygenerowany kod CSS.
Generator krzywych przyspieszenia cubic-bezier
Twórz krzywe przyspieszenia cubic-bezier dla CSS. Zawiera standardowe ustawienia predefiniowane.
Generator palet kolorów
Generuj harmonijne palety kolorów z dowolnego koloru bazowego. Obsługuje schematy dopełniające, analogiczne, triadyczne i monochromatyczne.
Generator border-radius CSS
Twórz wizualnie złożone wartości border-radius w CSS. Niezależna kontrola każdego rogu.
Generator CSS clamp()
Generuj płynne, responsywne wartości CSS za pomocą clamp(). Skaluje się gładko między rozmiarem minimalnym a maksymalnym w zakresach widoku.