HEX, RGB, HSL, CMYK és szövegkontraszt ellenőrzése

A színkód ugyanannak a színnek egy másik írásmódja. A HEX, az RGB és a HSL ugyanazt a fényt írja le a képernyőn, ezért a rounding-tól eltekintve pontosan átválthatók egymásba. A CMYK a papíron lévő festékre vonatkozik, ezért a képernyőértékekből történő átváltása csak becslés. A WCAG kontrasztarány egy külön szám, amely két szín világosságát hasonlítja össze, és azt dönti el, olvasható-e a szöveg. Illessz be egy színt a színkonverterbe, és egyszerre látod az összes formátumot.

SzínkonverterMás formátumú szín kellPróbáld ki ingyen

Ha a keresett szín egy fotón, logón vagy képernyőképen van, először a képszín kiválasztóval olvasd le a pixelről, majd a HEX-kódot illeszd ide. A pontos szín kiválasztása egy képből lépéseit ismerteti.

A HEX és az RGB ugyanazok a számok

A HEX-kód három pár hexadecimális számjegy. A #34D6A0 egy vörös, egy zöld és egy kék értéket tartalmaz. Minden pár egy 00 és FF közötti szám, tizedesben 0 és 255 között. Tehát a 34 52, a D6 214, az A0 pedig 160, és az RGB-forma rgb(52, 214, 160).

A szám hexadecimális írása csak a megjelenését változtatja. A rövidített #abc jelentése #aabbcc, vagyis minden számjegy megduplázódik. A nyolcjegyű kód végére egy átlátszósági (alfa) pár kerül, a teljesen átlátszatlan 00-tól a teljesen átlátszó FF-ig, így a #34D6A080 nagyjából félig átlátszó. Az RGBA ugyanezt az alfát 0 és 1 közötti számként írja le.

A CSS színneveket is elfogad. A rebeccapurple a #663399. A konverter a neveket maga a böngésző értelmezi, így bármelyik név, amelyet a böngésző ismer, működik.

A HSL úgy írja le a színt, ahogy az emberek

A HSL a hue (árnyalat), saturation (telítettség) és lightness (világosság) rövidítése. Az árnyalat egy szög a színkörön: a vörös 0 fok, a zöld 120, a kék 240. A telítettség azt mutatja, mennyire távol van a szín a szürkétől, a világosság pedig azt, mennyire van a feketétől vagy a fehértől.

Ugyanez a #34D6A0 hsl(160, 66%, 52%). Árnyalata a zöld és a kék között van, telítettsége magas, világossága pedig éppen a középső érték felett. A HSL kézzel a legkönnyebben szerkeszthető forma, mert megtarthatod az árnyalatot, és csak a világosságot mozgatva kapsz világosabb vagy sötétebb változatot.

A HSV a HSL-hez hasonló, de a világosság helyett a value (érték) mutatót használja, vagyis a legerősebb csatorna fényerejét. Néhány színválasztó ezt használja, ezért más eszközökben is találkozhatsz vele. A konverter a HSL mellett mutatja, hogy össze tudd hasonlítani a kettőt.

A CMYK nyomtatásra készül, ezért becslés

A képernyő fényt ad hozzá: a vörös, a zöld és a kék együtt fehéret adnak. A nyomtató festékkel vesz el fényt: ciánt, magentát, sárgát és feketét old fehér papírra. A két rendszer nem illeszthető tökéletesen egymáshoz, ezért a CMYK-érték mindig fordítás.

A konverter az egyszerű képletet használja. A fekete a K, amely 1 mínusz a vörös, zöld és kék érték közül a legnagyobb 0 és 1 közötti skálán. A ciánt, a magentát és a sárgát ezután abból számítja ki, ami a K után megmarad. A képlet figyelmen kívül hagyja a festéket, a papírt és azt a színprofilt, amelyet a nyomda használ. A nyomtatott eredmény ezért eltérhet, a nagyon élénk színeket pedig a CMYK festékek egyáltalán nem tudják kinyomtatni. A CMYK-értéket használd arra, hogy elindíts a beszélgetést a nyomdával, nagyobb példányszám előtt pedig kérj próbanyomatot.

A kontraszt a fényességről szól, nem az árnyalatról

A WCAG kontrasztarány két színt a relatív fényességük alapján hasonlít össze. A relatív fényesség a vörös, zöld és kék értékekből számítódik gamma-korrekció után, és a zöld számít a legtöbbet, mert az emberi szem erre a legérzékenyebb. Minden csatornát először a 0–255 skáláról alakítunk át, a fényesség pedig 0,2126 × vörös + 0,7152 × zöld + 0,0722 × kék.

Az arány a világosabb fényesség + 0,05, osztva a sötétebb fényesség + 0,05 értékével. A fekete a fehéren 21:1, ez a lehető legnagyobb érték. Két szín árnyalatban eltérhet egymástól, mégis kicsi lehet a kontrasztarány, ha a világosságuk megegyezik, és pont erre való az ellenőrzés. Ugyanez az alacsony kontraszt az oka annak, hogy a QR-kódok nem olvashatók be.

A küszöbértékek

A WCAG 2.x két szintet határoz meg, és a megkövetelt arány a szöveg méretétől függ.

• AA szint: 4,5:1 normál szövegnél, 3:1 nagy szövegnél.
• AAA szint: 7:1 normál szövegnél, 4,5:1 nagy szövegnél.

A nagy szöveg 24 pixel vagy annál nagyobb, vagy 18,66 pixel és félkövér. Minden, ami ennél kisebb, normál szövegnek számít. Gyakori hiba a fehéren lévő szürke szöveg. Egy középszürke, például a #777777 fehéren körülbelül 4,48:1. Normál szövegnél kicsivel alatta marad az AA küszöbnek, nagy címeknél viszont megfelel az AA-nak.

A konverter a kontrasztarányt két tizedesjegyre kerekítve mutatja, de minden megfelelés vagy hiba a pontos értéken alapul. Ezért az a 4,50-nek látszó érték is megbukhat, ha valamivel alatta van. Az ellenőrzés csak egy dolgot mér. Nem veszi figyelembe a betűvastagságot, a sortávolságot és azt, hogyan látják a színvakok a tervet, ezért a valódi oldalt is teszteld a valódi méretekben.

Árnyalatok és sötétítések

A konverter alatti sáv a szín körül kilenc lépést mutat: négy, fehér felé kevert árnyalatot, magát a színt, és négy, fekete felé kevert sötétítést. Egy mintára kattintva annak HEX-kódja másolódik. Ez akkor hasznos, ha egy márkaszínből származó, egymáshoz illő színkészletre van szükséged, például világos háttérre, hover állapotra és sötét szövegszínre. A kiválasztott párokat a kontraszt-szakaszban ellenőrizd, mielőtt használnád őket.

Hogyan csináld a fixmint segítségével

1. Illessz be egy színt a Color mezőbe HEX, RGB, HSL formában vagy CSS színnévvel, például rebeccapurple formában.
2. Olvasd le a HEX, RGB, HSL, HSV és CMYK sorokat. A szükséges mellett nyomd meg a Copy gombot. A CMYK-t közelítőként jelöli.
3. Írd be a háttérszínt a Background mezőbe, vagy használd a színmintáját, majd olvasd le az arányt az On white, On black és On your background alatt.
4. Ellenőrizd az arány alatti négy jelölést: AA és AAA, mindegyik normál és nagy szövegre.
5. A Tints and shades alatt koppints egy mintára a másoláshoz.

Gyors válaszok

Pontos a CMYK-érték?

Nem. Ez egy egyszerű számítási átalakítás, amely figyelmen kívül hagyja a nyomdát, a papírt és a színprofilt. Kiindulópontnak tekintsd, és kérj hozzá próbanyomatot.

Ha a kontrasztarány megfelelő, akkor a terv akadálymentes?

Azt jelenti, hogy a szövegszínek megfelelnek egy mérhető küszöbnek. Az akadálymentességhez a méret, a térközök, a mozgás és az oldal felépítése is hozzátartozik, ezért az arány iránymutató, nem teljes körű felülvizsgálat.

Melyik formátumot tároljam egy stíluslapban?

Azt, amelyet a legkönnyebben olvasol és szerkesztesz. A HEX tömör és elterjedt. A HSL kézzel könnyebben módosítható, mert a világosságot változtathatod anélkül, hogy az árnyalat megváltozna.