A Színstúdió öt eszközt fog össze. A „Színválasztó” egy szín kiválasztására, a „Színek képből” képek színeinek kinyerésére, a „Palettakészítő” színgyűjtemények összeállítására, a „Színátmenet-generátor” átmenetes hátterek készítésére, a „Kontrasztellenőrző” pedig a szöveg és a háttér összehasonlítására szolgál. Minden lap külön oldalt nyit meg. Váltás előtt mentsd vagy exportáld, amit meg szeretnél tartani.
Válassz színt, és másold ki a kódját
Nyisd meg a „Színválasztó” eszközt. A színes sáv fogantyújával válassz színezetet, például kéket vagy zöldet.
A nagy négyzetben mozgatva a fogantyút világosíthatod, sötétítheted vagy kevésbé élénkké teheted a színt.
A „Színformátumok” résznél keresd meg a kívánt formátumot, és nyomd meg a hozzá tartozó másolásgombot.
Illeszd be a kimásolt értéket a kívánt alkalmazásba vagy dokumentumba.
A formátummezők az eredményt mutatják, nem szerkeszthetők. A „Összes formátum másolása” mind az öt értéket kimásolja a megnevezésükkel együtt. A HEX, RGB, HSL, HSV és CMYK ugyanazt a kiválasztott színt írja le különböző módon.
A HEX, RGB és HSL webes stílusokhoz használható. A HSV és CMYK értékei számszerű átszámítások, nem közvetlenül beilleszthető CSS-deklarációk. A CMYK itt nem vesz figyelembe nyomtató- vagy papírprofilt, ezért nem jelzi előre a pontos nyomtatott színt.
A „Szín a képernyőről” megnyitja a böngésző pipettáját, ha az támogatott. Válassz egy látható képpontot a színének átvételéhez, vagy szakítsd meg a műveletet az Escape billentyűvel. Ez a funkció érintőképernyős eszközökön nem érhető el, és néhány asztali böngésző sem támogatja.
Keress egymáshoz illő színeket
A „Színharmónia” lehetőségei az aktuális színből készítenek javaslatokat. Egy javaslat kiválasztásával az lesz az aktuális szín, és frissülnek a formátumértékek.
| Lehetőség | Javasolt színek |
|---|---|
| Komplementer | Az aktuális szín és a színkör túloldalán lévő szín. |
| Triád | Három, a színkörön egyenletesen elosztott szín. |
| Analóg | Az aktuális szín és a színkörön mellette lévő két szín. |
| Osztott komplementer | Az aktuális szín és az ellentétes szín közelében lévő két szín. |
| Tetrád | Négy, a színkörön elhelyezkedő szín. |
| Monokróm | Az aktuális színezet világosabb és sötétebb változatai. |
Ezek a javaslatok nem ellenőrzik a szöveg olvashatóságát. Mielőtt szöveghez és háttérhez használnád őket, ellenőrizd együtt a két színt a „Kontrasztellenőrző” eszközben. A „Mentés beállításkészletként” elmenti az aktuális színt és harmóniát későbbre.
Nyerj ki színeket egy képből
Nyisd meg a „Színek képből” eszközt, és adj hozzá egy képet az eszközödről.
Várd meg a javasolt színeket. Ha többet vagy kevesebbet szeretnél, módosítsd a „Színek száma” értékét.
Kattints egy színmintára a kiválasztásához és a HEX-érték kimásolásához. A kiválasztott szín paneljén RGB-, HSL-, HSV- és CMYK-értékek is találhatók.
Kattints a kép másik részére, hogy az ottani színt is hozzáadd.
A „Színek száma” 1 és 20 közötti automatikus javaslatot enged. A kézzel kiválasztott színek ezeken felül kerülnek a listába, ezért a végeredmény hosszabb is lehet. A javaslatok mintavételezett képpontokból és színcsoportokból készülnek. Nem az eredeti kép összes különböző színét sorolják fel.
A „Szélső árnyalatok szűrése” kihagyja a nagyon sötét és nagyon világos képpontokat a javaslatok keresésekor. Kapcsold ki, ha ezek a színek fontosak, vagy a kép főként fekete-fehér. Ennek vagy a „Színek száma” értékének módosítása újraszámítja a javaslatokat. Állóképnél ez a kézi színválasztásokat is lecseréli.
A „Pontok megjelenítése” megjeleníti a mintavételi jelöléseket a képen. Kikapcsolása elrejti a jelöléseket, de nem törli a színeket. Egy látható jelölést áthúzva másik helyről vehetsz színmintát. Egérrel a nagyított előnézet segít a pontos hely kiválasztásában.
A színmintát a saját törlésgombjával távolíthatod el. A „Kép eltávolítása és újrakezdés” megerősítést kér az aktuális kép és a színek eltávolítása előtt. A mentett beállításkészletek megmaradnak.
A nagy képek kisebbre méretezhetők a mintavételi vászonhoz. A kiválasztott érték ezért a megjelenített, átméretezett képből származhat, nem az eredeti felbontás változatlan képpontjából. Az átlátszóságot az eszköz nem kezeli külön színcsatornaként.
Válassz színeket animált GIF-ből
Az animált GIF képkocka-idővonallal nyílik meg. Az előző és következő gombbal, a csúszkával vagy egy bélyegképpel választhatsz képkockát. Az animációt le is játszhatod és szüneteltetheted.
Kattints a képre az aktuális képkocka egyik színének gyűjtéséhez. A színlista egyesíti a használt képkockák mentett választásait. Másik képkockára lépve nem készül automatikusan új paletta minden képkockához.
Az aktuális képkocka automatikus színeinek újraszámításához módosítsd a „Színek száma” vagy a „Szélső árnyalatok szűrése” beállítást. A GIF képkockáinak színválasztásai külön tárolódnak, ezért más képkockák színei a közös listában maradhatnak. Ments képes beállításkészletet, ha meg szeretnéd tartani a képet, a képkockák választásait és a mintavételi helyeket.
Állíts össze és szerkessz palettát
Nyisd meg a „Palettakészítő” eszközt a Material színekkel való kezdéshez, vagy válassz másik gyorsbeállítást. Ha már módosítottad az aktuális összeállítást, a beállításkészlet alkalmazása megerősítést kérhet a csere előtt.
A „Véletlen paletta” a nem zárolt színeket változtatja meg. Zárold a megtartani kívánt színeket, majd generálj újra. A zárolás a véletlenszerű generálás során védi a színt. A szerkesztést, törlést vagy beállításkészlettel való lecserélést nem akadályozza meg.
A „Szín hozzáadása” új színmintát ad hozzá. Minden minta szerkeszthető és törölhető, a fogantyújával pedig átrendezhető. Legalább egy színnek meg kell maradnia. A megjelenített értékre kattintva kimásolhatod azt, a HEX vagy RGB választásával pedig módosíthatod a másolt formátumot.
Számítógépen a „Szín szerkesztése” a böngésző színválasztóját nyitja meg. Érintőképernyőn színvezérlőkkel, HEX- és RGB-mezőkkel ellátott párbeszédablak jelenik meg. A „Alkalmazás” megtartja, a „Mégse” elveti a módosítást.
A „Visszavonás” és „Újra” a paletta legutóbbi változásai között lépked. Az előzmény az oldal aktuális használata alatt legfeljebb 50 állapotot tárol. A „Visszaállítás” megerősítést kér az alapértelmezett paletta visszaállítása előtt.
A „Fókuszmód” nagyobb területen jeleníti meg a palettát és a szerkesztővezérlőket. Az Escape billentyűvel vagy a „Kilépés a fókuszmódból” paranccsal térhetsz vissza. Az oldal újratöltésekor a munkapaletta elölről indul. Távozás előtt használd a „Mentés beállításkészletként” vagy a „Paletta letöltése” lehetőséget.
Tölts le vagy másolj ki egy színgyűjteményt
Az exportablakot a „Színek képből” eszköz „Színek letöltése” gombjával vagy a „Palettakészítő” eszköz „Paletta letöltése” gombjával nyithatod meg. A PNG, JPG és SVG színmintákból álló sávot készít. A „HEX-kódok feltüntetése” és „RGB-kódok feltüntetése” a megfelelő feliratokat is ráteszi a képre.
A JSON strukturált adatként tölti le a színértékeket. A „CSS másolása” számozott egyéni tulajdonságokat másol ki, például --color-1, amelyek weboldalak stíluslapján használhatók. PNG és JPG esetén a „Szélesség (px)” értéke 120 és 7680 képpont közé állítható. A magasság a szélesség hatoda, egész képpontra kerekítve. Az SVG 1200 × 200 méretű koordinátateret használ.
Az exportált kép az összegyűjtött színeket tartalmazza, nem az importált fényképet. A munkaterület ürítése előtt exportálj, ha külön fájlt szeretnél megőrizni vagy megosztani.
Készíts színátmenetet
Nyisd meg a „Színátmenet-generátor” eszközt, és válassz típust. A színpont egy adott színt helyez el az átmenet meghatározott pontján. Elmozdításával azt változtatod meg, hol jelenik meg ez a szín.
| Típus | Mit állíthatsz |
|---|---|
| Lineáris | A végpontok húzásával változtasd meg az irányt. Egy köztes pontot a vonal mentén mozgatva áthelyezheted a színét az átmenetben. |
| Sugárirányú | Mozgasd a középpontot az iránybeállító területen, majd helyezd el a színeket a „Színpontok” sávon. |
| Kúpos | Mozgasd a középpontot és a kezdőszög fogantyúját, vagy adj meg szöget. A színeket a színpontok sávján állítsd be. |
| Többpontos | Helyezz el külön színpontokat a területen, és húzással változtasd meg a színes régiók átfedését. |
Lineáris vagy többpontos átmenetnél kattints a terület üres részére egy szín hozzáadásához. Sugárirányú és kúpos átmenetnél a színpontok sávjára kattints. A lineáris, sugárirányú és kúpos átmenet legfeljebb hat színpontot, a többpontos legfeljebb tíz pontot enged. Legalább kettő mindig megmarad.
Kattints egy színpontra a szín szerkesztéséhez. A dupla kattintás eltávolítja, ahol ez a művelet támogatott. Érintőképernyőn a lineáris és többpontos pontok dupla koppintással is eltávolíthatók. Sugárirányú és kúpos színpontoknál a mozdulatlan nyomva tartás törli a pontot. Ezeket a fogantyúkat a Tab billentyűvel is kijelölheted, majd megnyomhatod a Delete billentyűt.
Lineáris szín hozzáadásakor a színpontok újra eloszlanak a meglévő vonalon. A „Színátmenet megfordítása” megfordítja a sorrendjüket, a „Irány visszaállítása” pedig visszaállítja az aktuális típus irányát vagy középpontját. Az előnézet szerkesztés közben frissül.
A „Kész színátmenetek” kiinduló mintákat kínál. A „Könyvtár megnyitása” nagyobb gyűjteményt nyit meg keresőmezővel. A beállításkészlet alkalmazása szükség esetén megerősítés után lecseréli az aktuális átmenet beállításait. Az előnézet nagyítógombjával nagyobb méretben is megnézheted az eredményt. Az Escape billentyűvel térhetsz vissza.
Használd máshol a színátmenetet
A CSS az előnézetben használt átmenetet adja meg. Másold a stíluslap egyik background-deklarációjába. Az SCSS az átmenetet tartalmazó változót és használati példát ad.
A Tailwind-kimenet lineáris irányra és legfeljebb három színre egyszerűsíti az eredményt. Kihagyhatja a köztes színpontokat, a pontos pozíciókat, valamint a sugárirányú, kúpos vagy többpontos átmenet alakját. Ha ezek számítanak, használj CSS-t.
Az SVG lineáris vagy sugárirányú átmenethez készít vektoros jelölőkódot. A kúpos és többpontos átmeneteket lineáris közelítéssel helyettesíti, ezért az export eltérően néz ki. A generált megjegyzés jelzi ezt a helyettesítést.
A „Színátmenet letöltése” 1200 × 600 képpontos PNG- vagy JPG-fájlt exportál. Az exportablakban CSS-, Tailwind-, SCSS- vagy SVG-kódot is másolhatsz. Nézd meg az exportált képet a végleges méretében, mert az arányai eltérhetnek az oldalon látható előnézettől. Távozás előtt mentsd a képet vagy a kódot, mert a munkában lévő átmenet nem mentett beállításkészlet.
Ellenőrizd a szöveg olvashatóságát
Nyisd meg a „Kontrasztellenőrző” eszközt.
Add meg a szöveg és a háttér színét hatjegyű HEX-értékként a # jellel együtt, vagy válaszd ki őket a színválasztóval.
Nézd meg a kontrasztarányt és a négy AA-, illetve AAA-eredményt.
Ha a színpár nem felel meg, módosíts egy színt, vagy próbáld ki a „Igazítás AA-ra” vagy „Igazítás AAA-ra” lehetőséget, majd ellenőrizd újra az eredményt.
A fehér alapon fekete szöveg aránya például 21:1. A fehér alapon fehéré 1:1. A nagyobb szám nagyobb fénysűrűség-különbséget jelent.
| Szövegkategória | AA-minimum | AAA-minimum |
|---|---|---|
| Normál szöveg | 4.5:1 | 7:1 |
| Nagy szöveg | 3:1 | 4.5:1 |
A WCAG szerint a szöveg 18 ponttól, körülbelül 24 CSS-képponttól számít nagynak, félkövéren pedig 14 ponttól, körülbelül 18,7 CSS-képponttól. A négy jelzés egyszerre mutatja mindkét méretkategóriát. Az előnézet betűméretének módosítása nem változtatja meg a színek kontrasztarányát.
Ezek a határértékek a WCAG minimális kontrasztra vonatkozó útmutatójából és a fokozott kontrasztra vonatkozó útmutatóból származnak. Egy megfelelő színpár nem bizonyítja az egész oldal akadálymentességét.
A „Igazítás AA-ra” és „Igazítás AAA-ra” változatlan háttér mellett próbálja világosítani vagy sötétíteni a szöveget. A normál szöveg határértékeit célozza. Egyes színpárok ezzel a módszerrel nem javíthatók. Ilyenkor válassz kézzel másik szöveg- vagy háttérszínt.
Teljes értéket használj, például #336699. Hiányos vagy érvénytelen értéknél az utolsó elfogadott szín marad érvényben. Az arány két tizedesjeggyel jelenik meg, de a megfelelőség a kerekítés nélküli számításból adódik.
A közelítő színszűrők csak az előnézetet módosítják. Egyszerű látványelemek, nem egy adott ember színlátásának megbízható szimulációi. A kontrasztszámítást nem befolyásolják.
Őrizd meg a beállításkészleteket és a legutóbbi színeket
A „Mentés beállításkészletként” névvel ellátott beállítást ment a „Színválasztó”, „Színek képből”, „Palettakészítő” vagy „Kontrasztellenőrző” eszközből. Adj meg nevet, majd nyomd meg a „Beállításkészlet mentése” gombot. A „Beállításkészletek” megnyitja a mentett listát. Telefonon a könyvjelzőgombot használd. Egy beállításkészlet kiválasztása a hozzá tartozó eszközben állítja vissza a beállítást.
A beállításkészletek ebben a böngészőben tárolódnak. A képes beállításkészletek a színek és a mintavételi helyek mellett az importált képet is tartalmazhatják. Nem kerülnek át automatikusan másik eszközre, és a böngészőadatok törlésével elveszhetnek. A fontos munkákról tölts le külön másolatot.
A „Törlés” megerősítés után egy mentett beállításkészletet távolít el. A „Összes törlése” megerősítés után a teljes mentett gyűjteményt törli. Egyik művelet sem törli az eredeti fájlokat az eszközödről.
A „Színelőzmények” legfeljebb 20 legutóbbi bejegyzést tárol. Egy bejegyzés kiválasztása kimásolja a HEX-értékét, a „Színválasztó” eszközben pedig be is állítja a színt. A színelőzmények ürítése független a beállításkészletek törlésétől.
Ha hibásnak tűnik az eredmény
Ha egy kép nem nyílik meg, próbálj kisebb JPG- vagy PNG-fájlt. A HEIC és HEIF formátumhoz külön dekóder áll rendelkezésre. Más képváltozatok támogatása a böngészőtől függ. Egyszerre csak egy kép nyitható meg.
Ha a kinyert színekből hiányzik a kívánt részlet, kattints kézzel arra a területre. Kapcsold ki a „Szélső árnyalatok szűrése” lehetőséget, ha közel fekete vagy közel fehér színekre van szükséged. Az automatikus javaslatok mintavételezett színcsoportokat írnak le. A csoport átlaga ezért nem feltétlenül szerepel pontos képpontszínként a képen.
Ha a másolt átmenet eltér az előnézettől, ellenőrizd a kódformátumot. A Tailwind és egyes SVG-kimenetek közelítések. A CSS megőrzi az átmenet típusát és a pozíciókat.
Ha a másolás blokkolva van a „Színválasztó” vagy „Színek képből” eszközben, jelöld ki az értéket a kimeneti mezőben, és használd a szokásos másolásparancsot. Palettánál exportálj inkább JSON-t vagy palettaképet. A feldolgozás és a mentett gyűjtemények a böngészőben maradnak, de a böngészőtárhely nem biztonsági másolat.
Billentyűzet használata
| Művelet | Billentyűk |
|---|---|
| Váltás a vezérlők között | Tab |
| A fókuszban lévő gomb aktiválása | Enter |
| Kijelölt szöveg másolása egy kimeneti mezőből |
MacCommand + C
Windows / LinuxCtrl + C
|
| Előzmények, beállításkészletek, export vagy színátmenet-előnézet bezárásaAz Escape a paletta fókuszmódjából is kilép. | Escape |
| Fókuszban lévő sugárirányú vagy kúpos színpont szerkesztéseElőször a Tab billentyűvel helyezd fókuszba a színpont fogantyúját. | Enter vagy Szóköz |
| Fókuszban lévő sugárirányú vagy kúpos színpont eltávolításaLegalább két színpont megmarad. Ez nem vonatkozik a lineáris vászon pontjaira. | Delete vagy Backspace |
| Beírt színszám vagy előnézeti betűméret megerősítéseAmikor a megfelelő számmező van fókuszban. | Enter |
A paletta „Visszavonás” és „Újra” funkciói gombokkal működnek. Az eszköz nem rendeli a Cmd + Z vagy Ctrl + Z billentyűkombinációt a paletta módosításaihoz. Szövegszerkesztéskor ezek a gyorsbillentyűk továbbra is a megszokott módon működnek.