§

Szín bemenet

§

Élő előnézet

§

Minden gyakori formátum

§

WCAG kontraszt ellenőrző

Kontrasztarány
Normál szöveg
Nagy szöveg
The quick brown fox jumps over the lazy dog.

Az amerikai terméktervezők a Figmában, Sketch-ben vagy Webflow-ban dolgozva rendszeresen váltanak a hex, RGB, HSL, OKLCH és a CSS Color Module Level 4 névleges értékei között. Ez a konverter minden átalakítást a böngésző CSS Typed OM és Color 4 algoritmusain keresztül futtat — a színpaletta elküldése nélkül külső szolgáltatásba.

Mi az a színkonverzió?

Minden szín, amit a böngésződ megjelenít, végső soron egy sRGB hármas — három szám 0 és 255 között a piros, zöld és kék csatornákhoz, plusz opcionális alfa. A CSS Color Level 4 specifikáció több szöveges formátumot definiál.

Hogyan működik a színkonverzió?

A konverzió jól definiált lineáris és nem lineáris transzformációk sorozata. Minden lépés a böngésződben fut:

  1. A bemeneted elemzésre kerül. Az eszköz automatikusan felismeri a 3, 4, 6 vagy 8 számjegyű HEX-et, a funkcionális formákat és a 150 névleges CSS színt.
  2. Az elemzett szín kanonikus sRGB-vé normalizálódik — négy lebegőpontos szám {r, g, b, a} 0–1 tartományban.
  3. A HEX az egyes csatornák 0–255 bájtértékké kerekítéséből és a hex számjegyek összefűzéséből származik.
  4. A CMYK egy naív közelítés — alkalmas képernyő előnézethez, de nem nyomtatáshoz.
  5. Az OKLCH a css-color-4 előre irányú útvonalat követi: sRGB linearizálás, LMS mátrix, köbgyök, OKLab átalakítás, majd poláris OKLCH.

Miért használd ezt a szín konvertert?

  • Adatvédelem: minden konverzió a böngésződben fut. A beillesztett szín soha nem hagyja el az eszközödet.
  • Tervező-fejlesztő átadás: illeszd be a HEX-et Figmából és olvasd le a rgb() karakterláncot Tailwind konfigurációhoz.
  • WCAG pontosság: a kontraszt ellenőrző a pontos WCAG 2.1 relatív fényerő képletet használja.
  • Sötét mód és paletta származtatás: a HSL és OKLCH a világosságot egyetlen csatornaként teszi elérhetővé.

Mik a színkonverzió gyakori alkalmazásai?

A színkonverzió a webfejlesztés, tervezés és hozzáférhetőségi munka során jelenik meg:

  • Tervezési rendszerek: márka HEX átalakítása a megfelelő HSL és OKLCH tokenekké.
  • Hozzáférhetőségi auditok: előtér és háttér színpár beillesztése és a kontrasztarány leolvasása.
  • Eszközök közötti átjárás: szín kiválasztása képernyőmentésből és bemásolása HSL vagy OKLCH formátumban.

Hogyan néz ki egy színkonverziós példa?

Vegyük a híres rebeccapurple színt. A névleges szín feloldása #663399-t ad. RGB konverzió: rgb(102, 51, 153). HSL konverzió: hsl(270, 50%, 40%).

Használd ezt a konvertert gyors referenciaként bármely színhez, amivel találkozol — kódban, tervfájlokban vagy képernyőmentésben — és a kontraszt ellenőrzőt ellenőrzésként a szállítás előtt.