0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
Ustawienia
Konwertowałem kolory między wszystkimi formatami: HEX, RGB, HSL, HWB, HSV, LAB, LCH, OKLab, OKLCh, XYZ D50/D65, Display P3, A98, ProPhoto, Rec. 2020 i CMYK. Zawiera interaktywny selektor wizualny.
#3b82f6
HEX, rgb(), hsl(), oklch(), color() itd.
Wyniki
Podstawy
#RRGGBB
#RRGGBBAA
rgb(r g b)
CSS Poziom 3
hsl(h s% l%)
CSS Poziom 4
hwb(h w% b%)
lab(l a b)
lch(l c h)
oklab(l a b)
oklch(l c h)
color(xyz-d50 x y z)
color(xyz-d65 x y z)
color()
color(display-p3 r g b)
color(a98-rgb r g b)
color(prophoto-rgb r g b)
color(rec2020 r g b)
Inne
hsv(h s% v%)
Druk
cmyk(c% m% y% k%)

Jak to działa

Ten sam kolor można zapisać na wiele sposobów. HEX (#RRGGBB) i RGB opisują mieszankę czerwieni, zieleni i błękitu; HSL i HSV opisują go przez barwę, nasycenie i jasność, bardziej intuicyjne przy wyborze wariantów; a CMYK jest przeznaczony do druku.

To narzędzie przyjmuje kolor w HEX, RGB lub HSL i natychmiast tłumaczy go na wszystkie formaty, w tym nowoczesne przestrzenie CSS Level 4, takie jak HWB, LAB, LCH, OKLab, OKLCh oraz funkcje color() (Display P3, Rec. 2020, ProPhoto).

Wizualny wybierak i kontrolki numeryczne pozwalają dostosować kolor i zobaczyć, jak wszystkie wartości zmieniają się jednocześnie. Wszystko jest obliczane w przeglądarce.

Przykłady

#ff0000rgb(255 0 0) · hsl(0 100% 50%) · cmyk(0% 100% 100% 0%)Czysta czerwień: maksimum w kanale czerwonym, zero w zielonym i niebieskim.
#3b82f6rgb(59 130 246)Każda para cyfr szesnastkowych (3b, 82, f6) to wartość 0-255 kanału: 59, 130 i 246.
#ffffffrgb(255 255 255) · hsl(0 0% 100%)Biel ma wszystkie trzy kanały na maksimum; w HSL jasność 100%.

Przypadki użycia

  • Przekształcić kolor z przewodnika projektowego w HEX na format RGB lub HSL wymagany przez Twój CSS lub framework.
  • Uzyskać odpowiednik CMYK koloru ekranowego, aby przygotować materiał do druku.
  • Poznawać nowoczesne przestrzenie kolorów (OKLCh, Display P3) podczas dostrajania palety o szerokim gamucie.

Najczęstsze pytania

Czym jest kanał alfa i jak zapisuje się go w HEX?

Alfa to nieprzezroczystość, od 0 (przezroczysty) do 100%. W HEX dodaje się ją jako parę cyfr na końcu: #RRGGBBAA. Na przykład #ff000080 to czerwień z 50% krycia.

Jaka jest różnica między HSL a HSV?

Oba używają barwy i nasycenia, ale trzecia oś jest różna: HSL używa jasności (gdzie 100% to biel), a HSV wartości lub jasności (gdzie 100% to najintensywniejszy kolor). HSL jest zwykle wygodniejszy do tworzenia rozjaśnień i przyciemnień.

Dlaczego istnieją OKLab i OKLCh?

To przestrzenie percepcyjnie jednorodne: równe odległości między wartościami odpowiadają podobnym różnicom wizualnym. Dają bardziej naturalne gradienty i regulacje jasności niż HSL, a CSS obsługuje je od poziomu 4.

Czy pokazywany CMYK jest dokładny do druku?

To przybliżona konwersja referencyjna. Rzeczywisty wynik druku zależy od profilu kolorów, farby i papieru, więc do prac profesjonalnych najlepiej użyć profilu ICC drukarni.

Zobacz też