Konwerter kolorów tłumaczy wartość koloru z jednego zapisu na inny — na przykład z trójki HEX (#6366F1) na krotkę RGB (99, 102, 241) lub trójkę HSL (239, 84%, 67%). Ten sam kolor można również wyrazić jako trójkę HSV (239, 59%, 95%). Każdy format koduje ten sam wizualny kolor przy użyciu innego modelu matematycznego; różne narzędzia, języki i API oczekują różnych formatów w zależności od kontekstu.
HEX i RGB opisują kolor jako mieszankę czerwonego, zielonego i niebieskiego światła. HEX jest zwartą reprezentacją szesnastkową tych samych trzech wartości kanałów 0–255, które RGB podaje w systemie dziesiętnym. HSL (barwa, nasycenie, jasność) i HSV (barwa, nasycenie, wartość) reorganizują te same informacje w walcowy układ współrzędnych, w którym barwa jest kątem na kole kolorów (0–360 stopni), a nasycenie oraz jasność lub jasność są wyrażone procentowo. Sprawia to, że HSL i HSV są bardziej intuicyjne przy tworzeniu jaśniejszych lub ciemniejszych odcieni tej samej barwy.
Konwersja między tymi formatami wymaga dobrze zdefiniowanej matematyki. Specyfikacja W3C CSS Color Module Level 4 dokumentuje algorytmy używane przez przeglądarki do rozwiązywania dowolnego koloru CSS na trójkę sRGB. Wzory są deterministyczne: dane wejście zawsze daje ten sam wynik, więc konwersje są bezstratne, o ile wartości nie są zaokrąglane ani przycinane. Większość selektorów kolorów i narzędzi projektowych opiera się na tych samych wzorach pod spodem.
Dlaczego warto użyć tego konwertera kolorów?
Narzędzia projektowe eksportują kolory w jednym formacie, twój CSS potrzebuje innego, a API, które wywołujesz, oczekuje trzeciego. Zamiast pisać kod konwersji lub szukać odpowiedniego wzoru, wklej wartość i uzyskaj wszystkie formaty jednocześnie.
⚡
Natychmiastowa konwersja na żywo
Wpisz lub wybierz kolor, a wartości HEX, RGB, HSL i HSV aktualizują się w czasie rzeczywistym. Bez przycisku zatwierdzania, bez żądania do serwera.
🔒
Przetwarzanie z poszanowaniem prywatności
Wszystkie obliczenia konwersji są wykonywane w przeglądarce. Żadne wartości kolorów, dane o użyciu ani pliki cookie nie są nigdzie wysyłane.
🔀
Wszystkie cztery formaty jednocześnie
Jedno wejście daje HEX, RGB, HSL i HSV jednocześnie. Skopiuj dowolny potrzebny format jednym kliknięciem.
📋
Nie wymaga konta
Otwórz stronę i zacznij konwertować. Bez rejestracji, bez e-maila, bez limitów. Działa offline po załadowaniu.
Zastosowania konwertera kolorów
Rozwój CSS
Projektant przekazuje ci wartość HEX z Figmy, ale twoja biblioteka komponentów używa HSL do motywowania. Przekonwertuj wartość i wstaw ją do własnych właściwości CSS lub konfiguracji Tailwind.
Integracja z API backendu
Twój endpoint przyjmuje kolory jako tablice RGB do generowania wykresów. Przekonwertuj kody HEX marki z przewodnika stylu na trójki liczb całkowitych, których oczekuje API.
Utrzymanie systemu projektowania
Dokumentując system projektowania, potrzebujesz każdego tokena koloru podanego w HEX do szybkiego podglądu, RGB do renderowania Canvas oraz HSL do programowego generowania odcieni.
Testowanie wizualne i QA
Porównywanie koloru piksela ze zrzutu ekranu (zwykle podawanego w RGB przez DevTools przeglądarki) z oczekiwaną wartością HEX ze specyfikacji Figma. Szybka konwersja potwierdza lub sygnalizuje niezgodności.
Wizualizacja danych
Biblioteki wykresów, takie jak D3.js i Chart.js, przyjmują kolory w różnych formatach w zależności od metody. Przekonwertuj raz i utrzymuj spójny zapis w całej konfiguracji zbioru danych.
Nauka teorii kolorów
Studenci studiujący grafikę komputerową lub projektowanie stron internetowych mogą zobaczyć, jak ten sam kolor odwzorowuje się na HEX, RGB, HSL i HSV. Dostosowywanie jednego kanału i obserwowanie zmian pozostałych buduje intuicję dotyczącą powiązań między modelami kolorów.
Opis formatów kolorów
Poniższa tabela zawiera pięć najpopularniejszych formatów kolorów, z tym samym kolorem indygo (#6366F1) pokazanym w każdym zapisie. HEX i RGB są najszerzej obsługiwane w CSS i JavaScript. HSL jest preferowany do motywowania, ponieważ dostosowywanie jasności i nasycenia jest proste. HSV to model używany przez większość selektorów kolorów w oprogramowaniu do projektowania graficznego.
Format
Przykład (indygo)
Kanały
Typowe zastosowanie
HEX
#6366F1
6 (or 3/8)
CSS, design tools, brand guides
RGB
rgb(99, 102, 241)
3 (0–255 each)
CSS, Canvas API, image processing
HSL
hsl(239, 84%, 67%)
3 (deg, %, %)
CSS, color theming, accessibility tuning
HSV
hsv(239, 59%, 95%)
3 (deg, %, %)
Color pickers, Photoshop, Figma
CMYK
cmyk(59%, 58%, 0%, 5%)
4 (0–100% each)
Print design, prepress workflows
HEX vs RGB vs HSL
Wszystkie trzy formaty opisują tę samą przestrzeń kolorów sRGB. Różnica polega na tym, jak udostępniają dane, co wpływa na czytelność i łatwość manipulacji w różnych kontekstach.
HEX
Sześciocyfrowy ciąg szesnastkowy (lub trzycyfrowy skrót). Zwięzły i powszechny w CSS, narzędziach projektowych i wytycznych dotyczących marki. Trudny do odczytania na pierwszy rzut oka: #6366F1 nie mówi ci o barwie. Obsługuje opcjonalny ośmiocyfrowy zapis (#6366F180) dla przezroczystości alfa.
RGB
Trzy liczby całkowite od 0 do 255 dla kanałów czerwonego, zielonego i niebieskiego. Natywny format dla Canvas 2D, WebGL i większości bibliotek do przetwarzania obrazów. Łatwy w manipulacji kanał po kanale, ale dostosowanie postrzeganej jasności wymaga jednoczesnej zmiany wszystkich trzech wartości.
HSL
Barwa (0–360 stopni), nasycenie (0–100%) i jasność (0–100%). Zaprojektowany z myślą o czytelności dla człowieka. Aby rozjaśnić kolor, zwiększ L. Aby zmniejszyć nasycenie, zmniejsz S. CSS natywnie obsługuje zapis hsl(), a nowoczesny CSS color-mix() i składnia kolorów względnych opiera się na nim.
Przykłady kodu
Konwersja kolorów między HEX, RGB i HSL w popularnych językach i środowiskach. Każdy przykład używa tego samego koloru indygo (#6366F1) dla łatwego porównania.
JavaScript
// HEX → RGB
function hexToRgb(hex) {
const n = parseInt(hex.replace('#', ''), 16)
return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}
hexToRgb('#6366f1') // → [99, 102, 241]
// RGB → HSL
function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255
const max = Math.max(r, g, b), min = Math.min(r, g, b)
const l = (max + min) / 2
if (max === min) return [0, 0, Math.round(l * 100)]
const d = max - min
const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
let h = 0
if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6
else if (max === g) h = ((b - r) / d + 2) / 6
else h = ((r - g) / d + 4) / 6
return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)]
}
rgbToHsl(99, 102, 241) // → [239, 84, 67]
package main
import (
"fmt"
"math"
)
func hexToRGB(hex string) (int, int, int) {
var r, g, b int
fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
return r, g, b
}
func rgbToHSL(r, g, b int) (int, int, int) {
rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
max := math.Max(rf, math.Max(gf, bf))
min := math.Min(rf, math.Min(gf, bf))
l := (max + min) / 2
if max == min {
return 0, 0, int(math.Round(l * 100))
}
d := max - min
s := d / (2 - max - min)
if l <= 0.5 {
s = d / (max + min)
}
var h float64
switch max {
case rf: h = (gf - bf) / d; if gf < bf { h += 6 }
case gf: h = (bf - rf) / d + 2
case bf: h = (rf - gf) / d + 4
}
return int(math.Round(h / 6 * 360)), int(math.Round(s * 100)), int(math.Round(l * 100))
}
func main() {
r, g, b := hexToRGB("#6366f1")
fmt.Println(r, g, b) // → 99 102 241
fmt.Println(rgbToHSL(r, g, b)) // → 239 84 67
}
CSS
/* Modern CSS supports multiple color formats natively */
/* HEX notation */
.button { color: #6366f1; }
/* RGB functional notation */
.button { color: rgb(99 102 241); }
/* HSL — easier to adjust lightness and saturation */
.button { color: hsl(239 84% 67%); }
/* CSS Color Level 4: relative color syntax (Chrome 119+) */
.button-light { color: hsl(from #6366f1 h s calc(l + 20%)); }
/* color-mix() for tinting without manual conversion */
.button-muted { color: color-mix(in srgb, #6366f1 70%, white); }
Najczęściej zadawane pytania
Jaka jest różnica między HSL a HSV?
Oba używają barwy i nasycenia, ale inaczej definiują jasność. HSL używa jasności (lightness), gdzie 50% to czysty kolor, 0% to czarny, a 100% to biały. HSV używa wartości (value, czyli jasności), gdzie 100% to czysty kolor, a 0% to czarny. HSV nie ma bezpośredniego punktu końcowego dla bieli. W praktyce HSL jest używany w CSS i tworzeniu stron internetowych, podczas gdy HSV to model stosowany przez większość selektorów kolorów w oprogramowaniu projektowym, takim jak Photoshop i Figma.
Jak przekonwertować HEX na RGB w JavaScript?
Przetwórz ciąg szesnastkowy na liczbę całkowitą za pomocą parseInt(hex, 16), a następnie wyodrębnij każdy kanał za pomocą przesunięcia bitowego: (n >> 16) & 255 dla czerwonego, (n >> 8) & 255 dla zielonego i n & 255 dla niebieskiego. Działa to dla dowolnego sześciocyfrowego ciągu szesnastkowego z wiodącym znakiem # lub bez niego. Dla trzycyfrowego skrótu, takiego jak #F0F, najpierw rozwiń każdą cyfrę (FF00FF) przed przetwarzaniem.
Czy mogę używać HSL bezpośrednio w CSS?
Tak. Wszystkie nowoczesne przeglądarki obsługują hsl() i hsla() w CSS. Od CSS Color Level 4 składnia to hsl(239 84% 67%) z wartościami oddzielonymi spacjami (przecinki są nadal akceptowane). Możesz również dodać kanał alfa jako czwarty parametr: hsl(239 84% 67% / 0.5). Safari, Chrome, Firefox i Edge obsługują tę składnię.
Czy konwersja kolorów jest stratna?
Matematycznie nie. HEX, RGB, HSL i HSV opisują tę samą przestrzeń kolorów sRGB, a konwersje są odwracalne. W praktyce mogą pojawić się niewielkie różnice wynikające z zaokrąglania, ponieważ HEX jest ograniczony do 256 kroków na kanał, a wartości procentowe HSL są zazwyczaj zaokrąglane do liczb całkowitych. Wielokrotna konwersja tam i z powrotem może kumulować błędy zaokrąglania rzędu 1–2 jednostek.
Czym jest ośmiocyfrowy format HEX?
Ośmiocyfrowy format HEX dodaje dwie cyfry alfa (przezroczystości) do standardowego sześciocyfrowego koloru HEX. Na przykład #6366F180 oznacza ten sam kolor indygo przy 50% nieprzezroczystości (0x80 = 128, około 50% z 255). CSS obsługuje ten zapis we wszystkich nowoczesnych przeglądarkach. Skrócona forma to 4 cyfry, np. #63F8.
Dlaczego mój kolor wygląda inaczej na innym monitorze?
Wygląd kolorów zależy od profilu kolorów monitora, jasności i kalibracji gamma. Dwa ekrany mogą wyświetlać tę samą wartość sRGB (#6366F1) inaczej, jeśli ich profile kolorów się różnią. Narzędzia do konwersji kolorów działają w zdefiniowanej przestrzeni kolorów (zazwyczaj sRGB) i dają matematycznie poprawne wyniki. Postrzegane różnice to problem kalibracji wyświetlacza, a nie błąd konwersji.
Jak wybrać jaśniejszy lub ciemniejszy odcień koloru?
Przekonwertuj kolor na HSL i dostosuj kanał L (jasność). Zwiększanie L w kierunku 100% daje jaśniejsze odcienie; zmniejszanie w kierunku 0% daje ciemniejsze. Barwa i nasycenie pozostają bez zmian. W CSS możesz to zrobić bezpośrednio: hsl(239 84% 80%) to jaśniejsza wersja hsl(239 84% 67%). Nowoczesny CSS oferuje również color-mix(in srgb, #6366F1, white 30%) dla tego samego efektu bez ręcznej konwersji.