Värien muuntaminen

Muunnokset – Yksityiskohdat – Harmoniat – Kuvat – Esikatselu – Värisokeuden simulointi – CSS – Ohje

Muunnokset

Tässä näet värisi muunnettuna 15 eri väriformaattiin, kuten RGB, CMYK, HSV, HSL, CIELab, Androidi, Desimaali ja YUV.

🤖 Muunna useita värejä kerralla tai 📢 hae muunnokset ja harmoniat REST API:n kautta.

Muunnokset osa 1

Format	Väri
Hex	496C3C 📋
RGB	73, 108, 60 📋
RGB Prosentti	29%, 42%, 24% 📋
CMY	0.7137, 0.5765, 0.7647 📋
CMYK	0.32, 0.00, 0.44, 0.58 📋
HSL	104°, 29 %, 33 % 📋
HSV	104°, 44 %, 42 % 📋
XYZ	8.9258, 12.4678, 6.2111 📋

Muunnokset osa 2

Format	Väri
RYB	60, 108, 95 📋
Decimal	4811836 📋
CIELab	41.95, -22.52, 22.92 📋
CIELCh	42, 32.133, 134.485 📋
Yxy	12.4678, 0.3233, 0.4517 📋
Android (android.graphics.Color)	4283001916 (0xFF496C3C) 📋
YUV	92.0630, -15.8071, -16.7183 📋

• 📕 KUINKAVÄRIT.TYÖSKENTELY
• Jakauma
• Kirkkaus & Värikylläisyys Gradientit
• Analoginen
• Triadi
• Komplementaarinen
• Split-komplementaarinen
• Neliö
• Suorakulmio
• Sweetspot
• Valkoinen tausta
• Värikontrastin tarkistus
• Musta tausta
• Värikontrastin tarkistus
• RGB 73, 108, 60 Tausta
• Dichromacy
• trikromaattisuus
• Monokromaattisuus
• Teksti
• Border
• Tausta
• 📕 KUINKA VÄRIT.TYÖSKENTELEVÄT
• Muuntaminen
• Details
• Harmoniat
• SVG-kuvat
• Esikuvat
• Värisokeuden simulointi
• CSS-esimerkkejä
• Väriämpäri
• Värikontrastin tarkistus

📕 KUINKAVÄRIT.TYÖSKENTELY

CSS-värien merkintäohje.

tai osta se Leanpubista!

Details

RGB-väri 73, 108, 60 on tumma väri, ja websafe-versio on hex 336633. Tämän värin komplementti olisi 95, 60, 108, ja harmaasävyversio on 92, 92, 92.
20 % vaaleampi versio alkuperäisestä väristä on 123, 160, 108, ja 26, 60, 16 on 20 % tummempi väri. Jos väriä kyllästetään 10 %:lla, saadaan 65, 108, 49, ja jos väriä kyllästetään 10 %:lla, se on 81, 108, 71.

Jakauma

RGB-värien jakauma RGB-arvojen, punaisen, vihreän ja sinisen, jakauma.punainen Punaisen osuus värin punaisesta väristä.vihreä Vihreän osuus värin vihreästä väristä.sininen Sininen sinisen osuus väristä.RGB

RYB-värien jakauma RYB-arvojen, punaisten, keltaisten ja sinisten, jakauma.punainen Punainen Punaisen prosenttiosuus värissä.keltainen Keltainen Keltaisen prosenttiosuus värissä.Sininen Sinisen prosenttiosuus värissä.RYB

CMYK-värien jakauma CMYK-arvojen jakauma, syaani, magenta, keltainen ja musta.Cyan Syaanin prosenttiosuus värissä.magenta Magentan prosenttiosuus värissä.keltainen Keltaisen prosenttiosuus värissä.musta Mustan prosenttiosuus värissä.CMYK

CMY-värien jakauma CMY-arvojen jakauma, syaani, magenta, keltainen.Cyan Syaanin prosenttiosuus värissä.magenta Magentan prosenttiosuus värissä.keltainen Keltaisen prosenttiosuus värissä.CMY

Kirkkaus & Värikylläisyys Gradientit

Näissä gradienteissa näytetään, miten RGB-väri 73, 108, 60 muuttuu muuttamalla kirkkautta 10 prosentilla. Ensimmäisessä kuvassa kunkin värin muutos on +10 % ja toisessa kuvassa -10 %.

Samankaltaiset kuin kirkkauden gradientit, mutta seuraavat kylläisyyden gradientit näyttävät, miten RGB-väri 73, 108, 60 muuttuu muuttamalla sen sijaan kylläisyyttä 10 %:lla.

Harmoniat

SVG-kuvat

Valikoima SVG-kuvia, joissa käytetään nykyisen värin heksaversiota #496C3C.

Katselukuvat

RGB 73, 108, 60 Tausta

trikromaattisuus

Monokromaattisuus

CSS Esimerkkejä

Teksti

CSS-ominaisuutta, jolla tekstin väri muutetaan RGB 73, 108, 60:ksi, kutsutaan nimellä ”color”. Color-ominaisuus voidaan asettaa luokkiin, id:iin tai suoraan HTML-elementtiin.

Tässä esimerkissä näytetään, miltä teksti näyttää värillä rgb(73, 108, 60).

📋 Copy Code

Jos haluat lisätä tekstin varjostuksen kyseisellä värillä, käytä text-shadow-ominaisuutta, voit luoda tekstin varjostuksen suoraan 🔧 CSS Tekstin varjostusgeneraattorillamme.

Tässä näet, miltä musta teksti näyttää 4 pikselin rgb(73, 108, 60)-värisellä varjolla.

📋 Copy Code

Border

CSS-ominaisuutta, jolla voit muuttaa elementin reunan RGB 73, 108, 60 -väriseksi, kutsutaan nimellä ”border”. Border-ominaisuus voidaan asettaa luokkiin, id:iin tai suoraan HTML-elementtiin.

Tässä esimerkissä väri on border, sitä voidaan soveltaa CSS-ominaisuudella ”border” tai ”border-color”.

📋 Copy Code

Jos vain borderin väri halutaan muuttaa, käytetään ominaisuutta border-color.

📋 Copy Code

Jos haluat lisätä laatikon varjon kyseisellä värillä, käytä:

Tässä näet, miltä näyttää laatikko, jossa on 4 pikselin rgb(73, 108, 60)-värinen varjo.

📋 Copy Code

Tausta

CSS-ominaisuutta, jolla voit vaihtaa elementin taustavärin RGB-värisävyyn 73, 108, 60, kutsutaan nimellä ”background”. Tausta-ominaisuus voidaan asettaa luokkiin, id:iin tai suoraan HTML-elementtiin.

📋 Copy Code

Jos vain taustaväriä halutaan muuttaa, voidaan käyttää:

📋 Copy Code

Tässä esimerkissä väri on taustavärinä, sitä sovelletaan CSS-ominaisuuden ”background” kautta.

Jos haluat optimoida ja pakata CSS-koodisi, voit käyttää online CSS-pakkaus ja -optimointiohjelmistoamme, jonka perustana on csstidy. Jos haluat luoda lineaarisen tai radiaalisen kaltevuuden taustaksi tai reunukseksi, tutustu 🌈 CSS Gradient Generatoriin.

📕 KUINKA VÄRIT.TYÖSKENTELEVÄT

CSS-värien merkintäohje.

tai osta se Leanpubista!

Käyttöohjeet Väreiden muuntaminen

Muuntaminen

Muuntaaksesi liitä syöttökenttään merkkijono jossakin näistä väriformaateista, esimerkiksi ”496C3C”, ja napsauta convert. Tulos on kohdassa Muunnokset, ja seuraavissa kohdissa saat lisätietoja väristä.

Jotkut väriformaatit käyttävät samaa merkintätapaa, ja muunnos arvaa hakukyselyn koostumuksen. Jos esimerkiksi yrität muuntaa merkkijonoa ”104°, 44%, 42%”, se voi olla HSV- tai HSL-väri, muunnos olettaa tässä tapauksessa HSL-väriä.

Koska tämä voi johtaa vääriin muunnoksiin, voit määritellä, minkä formaatin välität, kietomalla värijonon sulkuihin, joiden edessä on formaatti. Hakusana ”HSV(104°, 44%, 42%)” antaa oikean HSV-värin, koska formaattia ei tarvitse arvata. Muita esimerkkejä ovat ”CIELAB(41.95, -22.52, 22.92)”, ”CIELCH(42, 32.133, 134.485)”, ”YXY(12.4678, 0.3233, 0.4517)” ja ”CMYK(0.32, 0.00, 0.44, 0.58)”.

Details

Tietoja-osiossa saat ensin yhteenvedon väristä ja, jos se on saatavilla, kuvauksen, kuten ”tumman hillitty punainen”. Voit nähdä värijakauman eri muodoissa. Esimerkiksi RGB-muodossa saat tietää punaisen, vihreän ja sinisen määrän värissäsi.

Viimeiseksi saat värin kirkkaus- ja kylläisyysgradientit 10 %:n askelin. Jos siis tarvitset kirkkaamman tai tummemman version, voit valita sen täältä.

Harmoniat

Harmoniat näyttävät periaatteessa värit, jotka sopivat hyvin yhteen parhaillaan katsomasi värin kanssa. Jos pidät jostakin harmoniasta, voit luoda siitä suoraan 🌈 CSS Gradientin tai 🔧 CSS Text Shadowin tai tarkastella harmoniaa 🖌️ Color Bucketina.

SVG-kuvat

Tässä lyhyessä osiossa näytetään valikoima SVG-tiedostoja, joissa käytetään nykyistä väriä. Voit ladata nämä tiedostot ja käyttää niitä projekteissasi esimerkiksi taustakuvana.

Esikuvat

Haluatko nähdä, miltä värisi näyttää valkoisella tai mustalla pohjalla? Silloin sinun kannattaa tutustua värisivun ”Esikatselukuvat”-osioon.

Näet myös värisi värikontrastin näillä taustoilla ja saat linkin Color Contrast Checkeriin, jossa värisi on esivalittuna.

Värisokeuden simulointi

Kun valitset värin projektiisi, kannattaa pitää mielessä, miten värinäkövammainen henkilö havaitsee tämän värin. Siksi olen lisännyt tämän osion, jossa näytetään värin esikatselukuvat eri värinäkövammaisille.

CSS-esimerkkejä

Jos olet uusi web-kehityksessä, saatat haluta nähdä, miten voit soveltaa väriäsi etu-, tausta- tai reunavärinä. ”CSS-esimerkkejä”-osio antaa sinulle juuri tätä, apua siihen, miten nykyistä väriä käytetään CSS:ssä.

Jos katsot väriä muodossa, jota ei ole saatavilla CSS:ssä, näet värin muunnettuna yhteensopivaan muotoon.

Väriämpäri

Päätitkö väreistä seuraavaan projektiin ja haluat ladata ne paletiksi tai jakaa ne ystävien kanssa keskustellaksesi päätöksestäsi? Sitten sinun kannattaa vilkaista väriämpäriä. Sen avulla voit tallentaa enintään 10 väriä, luoda automaattisesti väripaletit jokaiselle näistä väreistä vaaleuden perusteella ja antaa sinulle WCAG-matriisin.

Voit ladata jokaisen väripaletin tai valitut värit GIMP-, Adobe® ASE- tai Tailwind CSS-palettina. Lisäksi voit tarkastella kaikkea 🌈 CSS Gradient, 🔧 CSS Text Shadow tai 📷 Color Palette Image.

Värin lisäämiseksi väriämpäriin laitan linkin ”❤️ Add this color to the bucket” (Lisää tämä väri ämpäriin) tämän verkkosivuston jokaisen sivun otsikko-osioon.

Värikontrastin tarkistus

Kun päätät väreistä projektia varten, on tärkeää pitää mielessä värikontrasti. My Color Contrast Checkerin avulla voit tarkistaa valitsemasi värit Web Content Accessibility Guidelines (WCAG) 2.0:n mukaisesti.