Színválasztó

A színválasztó használata

1. Kattints a Válassz színt alatti színmintára a böngésződ színválasztójának megnyitásához, majd válassz egy színt. Írhatsz vagy illeszthetsz be értéket a Színkód mezőbe is: HEX-kódot, például #1E90FF-et, rgb(30, 144, 255)-öt, hsl(210 100% 56%)-t vagy CSS-színnevet, például tomato-t.
2. A nagy előnézet azonnal frissül, a HEX-kód feketével vagy fehérrel írva, amelyik jobban olvasható az adott háttéren.
3. A Színkódok alatt a kívánt formátumot a mellette lévő Másolás gombbal másolhatod ki: HEX, RGB, HSL, HSV vagy CMYK.
4. Kattints a Véletlen szín gombra, ha ihletre van szükséged, vagy a Kiválasztás a képernyőről gombra (az ezt támogató böngészőkben, például Chrome-ban és Edge-ben), hogy a képernyő bármelyik képpontját mintavételezd, más ablakokét is.

Minden a böngésződben történik: semmilyen színt vagy képet nem küldünk el sehová.

Mit jelent az egyes színkódok?

• A HEX a HTML-ben és a CSS-ben használt hatjegyű hexadecimális jelölés. Minden számjegypár egy csatorna (vörös, zöld, kék) 00 és FF között, tehát a #1E90FF vörös 30, zöld 144, kék 255 értéket jelent.
• Az RGB ugyanezt a három csatornát adja tízes számrendszerben, 0 és 255 között. Ezt várja a legtöbb tervezőprogram és programozási könyvtár.
• A HSL a színt színárnyalattal (szög 0° és 360° között a színkörön), telítettséggel és világossággal írja le. Praktikus, ha egyetlen szám módosításával akarsz világosabbá vagy sötétebbé tenni egy színt.
• A HSV (HSB néven is ismert) színárnyalatot, telítettséget és értéket (fényerőt) használ. Ez a modell áll a Photoshop, a Figma és sok más szerkesztő színnégyzetei mögött.
• A CMYK a színt ciánkék, bíbor, sárga és fekete tinta százalékaiban fejezi ki.

A CMYK-értékekről

A CMYK-kódok egyszerű átszámítással készülnek: K = 1 − max(R, G, B), majd C = (1 − R − K) / (1 − K), az M-re és az Y-ra ugyanígy. Ez a szokásos tankönyvi képlet, de nem használ ICC-profilt. A valódi nyomtatás a nyomdagéptől, a papírtól és a tintáktól függ, ezért a nyomda a saját profiljával konvertálja a színeidet, és az eredmény eltérhet. Ezeket a számokat kiindulópontnak használd, ne nyomdai bizonyítéknak.

A kontrasztarányok olvasása

A HEX-kód alatt az előnézet megjeleníti a Kontraszt fehéren és a Kontraszt feketén értéket, a WCAG 2 relatív fénysűrűségi képletével számolva. Normál törzsszöveghez AA szinten legalább 4,5:1 arány kell, nagy szöveghez és felületi elemekhez 3:1. Ha a színed fehéren csak a 3:1-et éri el, tartogasd nagy címsorokhoz vagy ikonokhoz, a szöveghez pedig használj sötétebb árnyalatot.

Tippek

• A hexkódokat a # nélkül is beillesztheted: az 1e90ff is működik, akárcsak a rövid alakok, például az f60.
• Az átlátszóságot tartalmazó értékeket, például az rgb(0 0 0 / 50%)-ot elfogadja; a színválasztó a tömör színt mutatja.
• A böngésző saját színpárbeszédablaka rendszerenként eltér. Ha pontos értékre van szükséged, a Színkód mezőbe gépelve az mindig pontos.