Színek konvertálása

Konvertálások – Részletek – Harmóniák – Képek – Előnézet – Színvakság szimuláció – CSS – Súgó

Konvertálások

Itt látod a színedet 15 különböző színformátumba konvertálva, mint RGB, CMYK, HSV, HSL, CIELab, Android, Decimal és YUV.

🤖 Konvertálj több színt egyszerre, vagy 📢 szerezd meg a REST API-n keresztül a konverziókat és a harmóniákat.

• 📕 HOWCOLORS.WORK
• eloszlás
• Fényerő & Telítettség gradiens
• Analóg
• Triász
• Komplementer
• Split-komplementer
• Square
• Téglalap
• Sweetspot
• Fehér háttér
• Color Contrast Check
• Fekete háttér
• Color Contrast Check
• RGB 73, 108, 60 háttér
• Dichromacia
• Trichromacia
• Monokrómia
• Text
• Border
• Háttér
• 📕 HOWCOLORS.WORK
• Konvertálás
• Details
• Harmóniák
• SVG képek
• Képek
• Színvakság-szimuláció
• CSS példák
• Color Bucket
• Színkontraszt-ellenőrző

📕 HOWCOLORS.WORK

Egy CSS színjelölési útmutató.

vagy vedd meg a Leanpubon!

Részletek

A 73, 108, 60-as RGB szín sötét szín, a websafe változat hex 336633. Ennek a színnek a kiegészítője 95, 60, 108 lenne, a szürkeárnyalatos változat pedig 92, 92, 92.
Az eredeti szín 20%-kal világosabb változata 123, 160, 108, a 26, 60, 16 pedig a 20%-kal sötétebb szín. Ha 10%-kal telítjük a színt, akkor 65, 108, 49-et kapunk, ha pedig 10%-kal telítjük, akkor 81, 108, 71 lesz.

eloszlás

Fényerő & Telítettség gradiens

Ezek a gradiensek azt mutatják, hogy a 73, 108, 60 RGB szín hogyan változik a fényerő 10 százalékos változtatásával. Az első ábra az egyes színek +10%-os eltolódását, a második ábra pedig -10%-os eltolódását mutatja.

A fényerősségi gradiensekhez hasonlóan, de a következő telítettségi gradiensek a 73, 108, 60-as RGB szín változását mutatják a telítettség 10%-os megváltoztatása helyett.

Harmóniák

SVG képek

Az aktuális szín #496C3C hex változatát használó SVG képek kiválasztása.

Előnézet

Trichromacia

Monokrómia

CSS példák

Text

A szöveg színét RGB 73, 108, 60-ra változtató CSS tulajdonság neve “color”. A color tulajdonság beállítható osztályokon, azonosítókon vagy közvetlenül a HTML elemen.

Ez a példa azt mutatja, hogyan néz ki a szöveg az rgb(73, 108, 60) színben.

📋 Copy Code

Ha szeretnél szövegárnyékot adni az adott színben, használd a text-shadow tulajdonságot, a 🔧 CSS Text Shadow Generator segítségével közvetlenül is generálhatsz szövegárnyékot.

Itt látható, hogyan néz ki a fekete szöveg egy 4 pixeles rgb(73, 108, 60) színű árnyékkal.

📋 Copy Code

Border

A CSS tulajdonság, amellyel egy elem szegélyét RGB 73, 108, 60 színűre változtathatjuk, a “border”. A border tulajdonság beállítható osztályokon, azonosítókon vagy közvetlenül a HTML elemen.

Ez a példa a színt borderként mutatja, ez a “border” vagy “border-color” CSS tulajdonságon keresztül alkalmazható.

📋 Copy Code

Ha csak a border színét szeretnénk megváltoztatni, használjuk a border-color tulajdonságot.

📋 Copy Code

Ha az adott színű dobozárnyékot szeretnénk hozzáadni, használjuk:

Itt látható, hogyan néz ki egy doboz 4 pixeles rgb(73, 108, 60) színű árnyékkal.

📋 Copy Code

Háttér

Az elem háttérszínét RGB 73, 108, 60-ra változtató CSS tulajdonság a “background”. A háttér tulajdonság beállítható osztályokon, azonosítókon vagy közvetlenül a HTML elemen.

📋 Copy Code

Ha csak a háttérszínt kell megváltoztatni lehet használni:

📋 Copy Code

Ez a példa a színt háttérként mutatja, a “background” CSS tulajdonságon keresztül alkalmazzák.

A CSS kód optimalizálásához és tömörítéséhez használhatja a csstidy-n alapuló online CSS tömörítő és optimalizáló programunkat. Ha lineáris vagy radiális gradienst szeretnél létrehozni háttérként vagy szegélyként, nézd meg 🌈 CSS Gradient Generatorunkat.

📕 HOWCOLORS.WORK

Egy CSS színjelölési útmutató.

vagy vedd meg a Leanpubon!

Hogyan használd a Színek konvertálása

Konvertálás

A konvertáláshoz illessz be egy karakterláncot az alábbi színformátumok egyikében, például “496C3C”, a beviteli mezőbe, és kattints a konvertálásra. Az eredmény az Átalakítások szakaszban lesz, és a következő szakaszokban további részleteket tudhat meg a színről.

Egyes színformátumok ugyanazt a jelölést használják, és a konverzió kitalálja a keresőkérdés összetételét. Példaként, ha a “104°, 44%, 42%” karakterláncot próbálja konvertálni, az lehet HSV vagy HSL szín, a konverzió ebben az esetben HSL-t fog feltételezni.

Mivel ez téves konverziókhoz vezethet, meghatározhatja, hogy melyik formátumot adja át, ha a színláncot zárójelbe teszi, előtte a formátummal. A “HSV(104°, 44%, 42%)” keresési karakterlánc a helyes HSV színt fogja megadni, mivel nem kell kitalálni a formátumot. Más példák: “CIELAB(41,95, -22,52, 22,92)”, “CIELCH(42, 32,133, 134,485)”, “YXY(12,4678, 0,3233, 0,4517)” és “CMYK(0,32, 0,00, 0,44, 0,58)”.

Details

A részletek szakaszban először a színről kap egy összefoglalót, és ha van, egy leírást, például “sötét tompított vörös”. A színeloszlást különböző formátumokban láthatja. Az RGB formátumban például megtudhatja, hogy mennyi vörös, zöld és kék van a színben.

Végül megkapja a szín fényerősség és telítettség gradiensét 10%-os lépésekben. Tehát ha világosabb vagy sötétebb változatra van szüksége, innen kiválaszthatja.

Harmóniák

A harmóniák alapvetően azokat a színeket mutatják meg, amelyek jól illeszkednek az éppen megtekintett színhez. Ha tetszik valamelyik harmónia, közvetlenül létrehozhatsz belőle egy 🌈 CSS Gradientet vagy 🔧 CSS Text Shadowt, vagy megtekintheted a harmóniát 🖌️ Color Bucketként.

SVG képek

Ez a rövid rész az aktuális színt használó SVG fájlok egy válogatását mutatja. Letöltheti ezeket a fájlokat, és felhasználhatja őket projektjeiben, például háttérképként.

Képek

Meg szeretné nézni, hogyan néz ki a színe fehér vagy fekete háttéren? Akkor nézd meg a színoldal “Előnézetek” szakaszát.

A színének színkontrasztját is láthatja ezeken a háttereken, és kap egy linket a Színkontraszt-ellenőrzőhöz az előre kiválasztott színével.

Színvakság-szimuláció

Amikor kiválaszt egy színt a projektjéhez, érdemes szem előtt tartania, hogyan érzékeli ezt a színt az, akinek színlátási zavarai vannak. Ezért adtam hozzá ezt a részt, amely különböző színlátás-hiányosok számára mutatja a szín előnézetét.

CSS példák

Ha új vagy a webfejlesztésben, érdemes megnézned, hogyan alkalmazhatod a színedet előtér-, háttér- vagy szegélyszínként. A “CSS példák” rész pontosan ezt adja meg, segítséget nyújt, hogyan alkalmazza az aktuális színt CSS-ben.

Ha egy színt olyan formátumban tekint meg, amely nem elérhető a CSS-ben, akkor a színt kompatibilis formátumba konvertálva látja.

Color Bucket

Döntött a színekről a következő projektjéhez, és szeretné letölteni őket palettaként, vagy megosztani őket barátaival, hogy megvitassák a döntését? Akkor érdemes vetnie egy pillantást a színvödörre. Ez lehetővé teszi, hogy legfeljebb 10 színt tároljon, automatikusan létrehozza az egyes színek színpalettáit a világosság alapján, és WCAG-mátrixot ad.

A színpaletták mindegyikét vagy a kiválasztott színeket GIMP, Adobe® ASE vagy Tailwind CSS-palettaként töltheti le. Ezenkívül mindent megtekinthetsz 🌈 CSS Gradient, 🔧 CSS Text Shadow, vagy 📷 Color Palette Image néven.

Hogy hozzáadj egy színt a színpalettádhoz, a weboldal minden oldalának fejlécében elhelyeztem egy “❤️ Add this color to the bucket” linket.

Színkontraszt-ellenőrző

Amikor egy projekthez színeket választ, feltétlenül szem előtt kell tartani a színkontrasztot. A Színkontraszt-ellenőrzőm lehetővé teszi, hogy ellenőrizze a kiválasztott színeket a Web Content Accessibility Guidelines (WCAG) 2.0.

szerint.