Öt kapcsolódó eszköz
A színválasztó, a képszínkinyerő, a palettakészítő, a színátmenet-készítő és a kontrasztellenőrző közös alapot használ. A módválasztó az egyes eszközök külön oldalát nyitja meg.
Színstúdió
Válassz színt, nyerj palettát képből, állíts össze saját palettát, készíts CSS-színátmenetet, vagy ellenőrizd a szöveg kontrasztját.
Mód kiválasztása
Színválasztó
Színharmónia
Jelenlegi
Színformátumok
Kapcsolódó eszközök
Statisztikáid
0
Kiválasztott színek
0
Exportált paletták
0
Létrehozott színátmenetek
0
Kontrasztellenőrzések
Színválasztó
Leggyakrabban használt mód
0%
Aktivitási pontszám
A Színstúdió használata
A videó nem tölthető be. Az alábbi útmutatót továbbra is követheted.
A videó az angol felületet mutatja.
Kattints a szivárványsávra, vagy húzd rajta a jelölőt a színezet kiválasztásához. Az alatta lévő mezőben állítsd be a fényerőt és a telítettséget. A színmező melletti értékek követik a változtatást. A pipettát támogató böngészőkben a „Szín a képernyőről” is használható.
Színeszközök egy helyen
Színek képekből és GIF-ekből
Válassz színt a kép előnézetéből, vagy nyerj ki palettát. Animált GIF-nél választhatsz képkockát. Az átméretezés, a dekódolás és a színek csoportosítása befolyásolhatja az eredményt.
CSS-színátmenetek gyűjteménye
Válassz 60 kereshető mintából, vagy készíts lineáris, sugárirányú, kúpos vagy többpontos hátteret. Használat előtt nézd meg a kód- és képexport korlátait.
További 3 megjelenítéseKevesebb megjelenítése
Hat színharmónia
Próbáld ki a komplementer, analóg, triád, osztott komplementer, tetrád és monokróm színeket. Szöveghez használva külön ellenőrizd a kontrasztot.
Szöveg és háttér kontrasztja
Hasonlíts össze két egyszínű felületet a WCAG négy AA és AAA szövegküszöbével. A közelítő előnézeti szűrők nem igazolják az akadálymentességi megfelelést.
Próbáld ki a kontrasztjavítást
Az AA- vagy AAA-szintre igazítás megpróbálja módosítani a szöveg RGB-értékeit. Sikertelen lehet, vagy megváltoztathatja az árnyalatot, ezért ellenőrizd a kapott arányt.
Gyakori kérdések
Milyen színeszközöket használhatok?
A színválasztó öt formátumban mutatja az értékeket, és hat színharmóniát kínál. A képszínkinyerő fotókból és GIF-képkockákból vesz színeket. A palettakészítőben színmintákat szerkeszthetsz, a színátmenet-készítőben CSS-háttereket készíthetsz. A kontrasztellenőrző egyszínű szöveget és hátteret vet össze a WCAG szövegküszöbeivel. A módválasztó az eszközök külön oldalát nyitja meg.
Milyen formátumban másolhatom a színt?
A színválasztó HEX-, RGB-, HSL-, HSV- és becsült CMYK-értékeket mutat. Másolhatod őket egyenként vagy a Összes formátum másolása gombbal együtt. A mezők csak olvashatók. Az értékek kerekítettek, a CMYK pedig nem használ nyomtatási ICC-profilt.
Kinyerhetek színeket animált GIF-ből?
Igen. A képszínkinyerő lejátszást és képkockaválasztást kínál animált GIF-ekhez. A kiválasztott képkockából színt vagy palettát nyerhetsz ki. A nagy animációk sok memóriát igényelhetnek.
Milyen képformátumokat nyithatok meg?
Használj a böngésző által dekódolható formátumot, például PNG-t, JPG-t vagy WebP-t. A HEIC és HEIF szükség esetén letöltött helyi dekódolót használ. Az animált GIF-ek képkockánként töltődnek be. A formátumtámogatás böngészőfüggő, a TIFF-hez itt nincs külön dekódoló.
További 10 megjelenítéseKevesebb megjelenítése
Milyen színharmóniák közül választhatok?
Komplementer, Analóg, Triád, Osztott komplementer, Tetrád és Monokróm. A javasolt színmintára kattintva azt állíthatod be aktuális színnek. A harmónia színeket társít, a szöveg akadálymentességét nem ellenőrzi.
Milyen színátmeneteket készíthetek?
A lineáris, sugárirányú és kúpos átmenetekhez legfeljebb hat színpont tartozhat. A többpontos átmenetek legfeljebb tíz pontot engednek, és sugárirányú CSS-átmeneteket rétegeznek. A gyűjteményben 60 minta van. A Tailwind lineárisra egyszerűsít, az SVG a kúpos és többpontos típusokat lineárissal helyettesíti. A képexportnak külön megjelenítési korlátai vannak. Kúpos képhez a Canvasnak támogatnia kell a kúpos átmeneteket.
Milyen kontrasztarányt ír elő a WCAG?
Normál szöveghez legalább 4,5:1 kell az AA-, és 7:1 az AAA-szinthez. Nagy szövegnél a határ 3:1, illetve 4,5:1. A megfelelő eredmény a választott színpárra és szövegküszöbre vonatkozik, nem az egész webhelyre.
Az eszköz tudja helyettem javítani a kontrasztot?
A Igazítás AA-ra és Igazítás AAA-ra megpróbálja világosítani vagy sötétíteni a szövegszín RGB-csatornáit. Ez megváltoztathatja az árnyalatot, és az adott háttérnél sikertelen lehet. Használat előtt ellenőrizd a kapott arányt.
Mit mutatnak a színlátási beállítások?
A Protanópia, Deuteranópia és Tritanópia egyszerű CSS-szűrőt alkalmaz az előnézetre. Ezek közelítő megjelenítések, nem hitelesített színlátási modellek vagy az akadálymentesség bizonyítékai.
Hogyan őrizhetem meg a palettát?
Mentsd névvel ellátott mintaként ebben a böngészőben, vagy exportáld. A Színek exportálása ablak PNG-, JPG-, SVG- és JSON-fájlokat, valamint CSS-változók másolását kínálja. A nem mentett munkapaletta az oldal újranyitásakor Materialra áll vissza.
Hol tárolódnak a színelőzmények?
A közös előzménylista ebben a böngészőben legfeljebb 20 legutóbbi bejegyzést tárol a forrásmóddal együtt. A Színelőzmények ablakban találod őket. A webhelyadatok törlésével elveszhetnek. Az előzmények nem szinkronizálódnak az eszközök között.
Kiválaszthatok színt a képernyőről?
A Szín a képernyőről az EyeDropper API-t használja, ha a böngésző és az eszköz támogatja. Biztonságos környezetet igényel, és sRGB HEX-értéket ad vissza. Ha nem érhető el, használd az árnyalatcsúszkát és a színfelületet.
Hová kerülnek a képeim és mintáim?
A kiválasztott képeket ez a böngésző dolgozza fel, nem küldi őket átalakító szerverre. A névvel mentett minták és a legutóbbi előzmények helyileg, IndexedDB-ben tárolódnak. A webhelyadatok törlése előtt exportáld a fontos eredményeket.
Használhatom a Színstúdiót internet nélkül?
A betöltött vezérlők és számítások kapcsolat nélkül is működhetnek, de az oldalnak és minden szükséges szkriptnek már elérhetőnek kell lennie. A HEIC-dekódoló igény szerint töltődik le, ezért egy új HEIC-fájl megnyitásához internetkapcsolat kellhet.
Technikai részletek
Színértékek és harmóniák
A színválasztó az RGB-t HEX-, HSL-, HSV- és becsült CMYK-értékekké alakítja. Az értékek kerekítettek, a formátummezők csak olvashatók. A hat harmónia az árnyalatot vagy a világosságot változtatja. A CMYK-kimenet nem használ nyomtatási ICC-profilt.
Képelőnézet és színkinyerés
A Canvas-mintavételezés az átméretezett képelőnézetet olvassa. Az automatikus kinyerés K-means segítségével csoportosítja az RGB-mintákat 1–20 színből álló palettába. A legtöbb formátumot a böngésző dekódolja. A HEIC és HEIF helyi tartalék dekódolót, a GIF képkockavezérlőket kap.
További 4 megjelenítéseKevesebb megjelenítése
A szövegkontraszt kiszámítása
Az arány két egyszínű sRGB-szín relatív fénysűrűségét hasonlítja össze. Az AA határértéke normál szövegnél 4,5:1, nagy szövegnél 3:1. Az AAA határa 7:1 és 4,5:1. Az eredmény a kerekítés előtti arányból készül, és nem igazolja a teljes WCAG-megfelelést.
CSS-színátmenetek és exportkorlátok
A lineáris, sugárirányú és kúpos átmenetek CSS-átmenetfüggvényeket használnak. A többpontos átmenetek sugárirányú rétegekből állnak. A Tailwind egyszerűsített lineáris kódot ad, az SVG a kúpos és többpontos típusokat lineárissal helyettesíti. A PNG és JPG a Canvas segítségével készül, 1200 × 600 képpontban. Kúpos exporthoz megfelelő Canvas-támogatás kell. A rögzített képarány és a színkeverés eltérhet a CSS-előnézettől.
Palettaszerkesztés és fájlexport
Hét, egyenként négyszínű mintából indulhatsz. A színminták szerkeszthetők, hozzáadhatók, törölhetők, zárolhatók és átrendezhetők. Az export PNG-, JPG- vagy SVG-színcsíkot, JSON-fájlt és CSS-változók másolását kínálja. PNG és JPG esetén 120–7680 képpontos szélesség választható. A paletta megőrzéséhez mentsd névvel ellátott mintaként.
Előzmények és minták a böngészőben
Az előzmények legfeljebb 20 bejegyzést tartalmaznak a Színstúdió közös IndexedDB-tárolójában. A névvel mentett minták helyileg tárolják a színeket és a módbeállításokat. Az adatok elérhetősége és megőrzése a böngészőtől függ. Nincs automatikus szinkronizálás az eszközök között.