Ugrás a fő tartalomra

Ingyenes Színkonvertáló

Konvertálj színeket HEX, RGB, HSL, HSV és CMYK formátumok között azonnal. Fényesség-skálát és előre beállított mintákat is tartalmaz.

Betöltés után offline is működik

Szín konvertálása HEX, RGB, HSL, HSV és CMYK között — élő előnézettel és egy kattintásos másolással. Minden a böngészőben fut.

Elfogad: HEX (#fff vagy #ffffff), RGB (255, 255, 255) vagy HSL (360, 100%, 50%)

100%
Előbeállítások:
HEX#14B8A6
rgb() · régirgb(20, 184, 166)
rgb() · modernrgb(20 184 166)
hsl() · régihsl(173, 80%, 40%)
hsl() · modernhsl(173 80% 40%)
oklch()oklch(70.4% 0.123 182.5)
lab()lab(67.1% -42.9 -2.3)
lch()lch(67.1% 43.0 183.1)
hsv()hsv(173, 89%, 72%)
cmyk()cmyk(89%, 0%, 10%, 28%)
RGB értékek20, 184, 166

WCAG kontraszt

Fehér háttéren

2,49:1

Sikertelenség

Fekete háttéren

8,44:1

AAA
🖨️ Nyomtatáshoz: Ezek a CMYK értékek (89%, 0%, 10%, 28%) egy szabványos sRGB→CMYK közelítés referenciaként. A pontos nyomtatási szín érdekében használja a nyomtató ICC profilját vagy nyomtatott mintát — a képernyőn megjelenő CMYK nem minden tinta/papír kombinációnak felel meg.

Világosság-skála

Kattints bármely mintára az adott árnyalatra váltáshoz

Gyakori felhasználások

  • Színek konvertálása webdesignhozSzerzessze meg a HEX-, RGB- és HSL-értékeket bármely szín számára - készen beilleszthető a CSS-be vagy a Tailwind-be.
  • Színek konvertálása nyomtatáshoz (CMYK)Konvertálja az képernyő-színeket (HEX/RGB) CMYK-értékekre nyomtatási tervezéshez és professzionális nyomtatáshoz való felhasználáshoz.
  • Szín-paletták felépítése tervezési rendszerekhezKonvertálja a márkaszíneket az összes formátum között, és hozzon létre konzisztens fényerő-skálákat egy teljes tervezési rendszer számára.
  • Szín kontraszt ellenőrzése hozzáférhetőséghezKonvertálja a színeket RGB értékek lekéréséhez a kontrarányos arány eszközök használatához — WCAG megfelelőség az elérhető tervezéshez.
  • Színek konvertálása FigmáhozSzerezze meg a pontos HEX és RGB értékeket a Figma szín választók és tervezési token rendszerekbe való beillesztéshez.

Hogyan működik

Minden átváltási logika kézzel írt JavaScript, amely teljesen a böngészőjében fut — nincs könyvtár, nincs szerverhívás. Az eszköz feldolgozza a bemenetet, egy tiszta matematikai függvénylánc útján irányítja, és egyidejűleg tizenegy kimeneti formátumot állít elő, beleértve a modern CSS Color 4 tereket, az oklch()-t és lab()-ot is.

  1. 1
    Rugalmas bemenet-elemzés
    Egy egyéni parser elfogadja a hex (3, 4, 6 vagy 8 számjegy), rgb()/rgba(), hsl()/hsla() formátumokat mind a régi vesszős szintaxisban, mind a modern szóközös szintaxisban, valamint a puszta numerikus hármasokat. Az alfa értékek tizedesként vagy százalékként a 0–1 tartományba normalizálódnak, mielőtt bármilyen átváltás elkezdődne.
  2. 2
    RGB mint az átváltás központja
    Minden elfogadott formátum először egy kanonikus RGB hármassá oldódik fel. Erről az egyetlen reprezentációról az eszköz szétágazik: a HSL és HSV a standard min/max/kroma képleteket használja; a CMYK a kulcscsatorna megtalálásával kerül levezetésre; és az sRGB linearizálás (az IEC 61966-2-1-ben definiált szakaszos gamma görbe) kerül alkalmazásra a perceptuális-tér számítások előtt.
  3. 3
    Perceptuális színterek a semmiből kiszámítva
    Az oklch() Björn Ottosson referencia 3×3 mátrixaival (LMS köbgyök-tér) kerül kiszámításra. A lab() és lch() Bradford kromatikus adaptációt használ a D65 fehérpontból D50-re való átváltáshoz, ami megfelel annak, ahogy a CSS Color 4 definiálja a lab()-ot. Ezek ugyanazok a képletek, amelyeket a böngésző renderelőmotorjai használnak — itt bármilyen külső függőség nélkül implementálva.
  4. 4
    WCAG kontraszt és fényerő-skála
    A relatív fényerő a WCAG 2.1 képlet szerint kerül kiszámításra (linearizált R, G, B 0,2126/0,7152/0,0722 súlyozással), és a fehérrel és feketével szembeni kontrasztarány AA-large, AA, AAA vagy Fail minősítést kap. Egy kilenc lépéses fényerő-csík kerül generálásra a HSL fényerő-csatorna 10%-tól 90%-ig lépegetésével, lehetővé téve, hogy bármely mintára kattintva átváltsa azt az árnyalatot.

Kapcsolódó eszközök

Gyakran ismételt kérdések