Yksinkertainen ja Käyttäjäystävällinen Värinvalitsin Työkalu

Johdanto

Värinvalitsin Työkalu on intuitiivinen, helppokäyttöinen sovellus, joka on suunniteltu auttamaan käyttäjiä valitsemaan, visualisoimaan ja muuntamaan värejä eri väri-formaateissa. Olitpa sitten verkkosuunnittelija, joka luo väriteemaa, digitaalinen taiteilija, joka etsii täydellistä sävyä, tai kehittäjä, joka toteuttaa käyttäjäliittymää, tämä värinvalitsin tarjoaa suoraviivaisen tavan työskennellä väreillä RGB-, heksadesimaali-, CMYK- ja HSV-formaateissa. Sen interaktiivisen värispektrin, kirkkaussäätimen ja tarkkojen syöttövaihtoehtojen avulla voit nopeasti löytää, säätää ja kopioida väriarvoja projekteihisi.

Väri-mallien Ymmärtäminen

Ennen kuin sukellamme siihen, miten käyttää värinvalitsinta, on hyödyllistä ymmärtää eri väri-mallit, joita se tukee:

RGB (Punainen, Vihreä, Sininen)

RGB on additiivinen väri-malli, jossa punaista, vihreää ja sinistä valoa yhdistetään eri tavoin laajasti erilaisten värien toistamiseksi. Digitaalisissa sovelluksissa:

• Jokainen komponentti (R, G, B) vaihtelee välillä 0-255
• RGB(255, 0, 0) edustaa puhdasta punaista
• RGB(0, 255, 0) edustaa puhdasta vihreää
• RGB(0, 0, 255) edustaa puhdasta sinistä
• RGB(255, 255, 255) edustaa valkoista
• RGB(0, 0, 0) edustaa mustaa

RGB-malli liittyy suoraan siihen, miten värit näytetään näytöillä, mikä tekee siitä ensisijaisen valinnan digitaaliseen suunnitteluun.

Heksadesimaali (Hex)

Heksadesimaaliset väri-koodit ovat tapa esittää RGB-värejä käyttäen 16-pohjaista numerojärjestelmää:

• Heksadesimaaliväri alkaa #-merkillä (#), jota seuraa kuusi merkkiä
• Ensimmäinen pari edustaa punaista, toinen vihreää ja kolmas sinistä
• Jokainen pari vaihtelee välillä 00-FF (0-255 desimaalina)
• #FF0000 edustaa puhdasta punaista
• #00FF00 edustaa puhdasta vihreää
• #0000FF edustaa puhdasta sinistä
• Lyhennettä voidaan käyttää tietyille väreille (esim. #F00 punaiselle)

Hex-koodit ovat laajalti käytössä verkkokehityksessä (CSS, HTML) ja digitaalisissa suunnittelu-sovelluksissa.

CMYK (Syan, Magenta, Keltainen, Musta)

CMYK on vähentävä väri-malli, jota käytetään pääasiassa väripainamisessa:

• Jokainen komponentti vaihtelee välillä 0%-100%
• CMYK(0, 100, 100, 0) edustaa puhdasta punaista
• CMYK(100, 0, 100, 0) edustaa puhdasta vihreää
• CMYK(100, 100, 0, 0) edustaa puhdasta sinistä
• CMYK(0, 0, 0, 100) edustaa mustaa
• CMYK(0, 0, 0, 0) edustaa valkoista (paperin väri)

Vaikka se on pääasiassa käytössä painatuksessa, CMYK-arvojen ymmärtäminen voi olla hyödyllistä suunniteltaessa sisältöä, joka lopulta painetaan.

HSV (Hue, Saturaatio, Arvo)

HSV esittää värejä seuraavilla tavoilla:

• Hue: Värityyppi (punainen, keltainen, vihreä jne.), mitattuna asteina (0-360°)
• Saturaatio: Värin intensiivisyys tai puhtaus (0-100%)
• Arvo: Värin kirkkaus (0-100%)

HSV on erityisen hyödyllinen väri-valinnassa, koska se erottaa värin valinnan (hue) sen intensiivisyydestä (saturaatio) ja kirkkaudesta (arvo), mikä tekee värien säätämisestä intuitiivisempaa.

Väri-muunnos Kaavat

Värinvalitsin muuntaa automaattisesti eri väri-mallien välillä näiden matemaattisten kaavojen avulla:

RGB:stä Hex:iin Muuntaminen

RGB:n muuntaminen heksadesimaaliseksi:

1. Muunna jokainen RGB-komponentti (0-255) kahden numeron heksadesimaaliseksi luvuksi
2. Liitä kolme heksadesimaaliarvoa yhteen #-etuliitteellä

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

Missä toHex() muuntaa desimaaliluvun sen heksadesimaaliseksi esitykseksi.

RGB:stä CMYK:iin Muuntaminen

Muuntaminen RGB:stä CMYK:iin sisältää seuraavat vaiheet:

1. Normalisoi RGB-arvot välille 0-1
2. Laske musta avain (K) komponentti
3. Laske C, M ja Y K:n perusteella

$R' = R/255, G' = G/255, B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{(1-R'-K)}{(1-K)} \times 100\%$ $M = \frac{(1-G'-K)}{(1-K)} \times 100\%$ $Y = \frac{(1-B'-K)}{(1-K)} \times 100\%$

RGB:stä HSV:iin Muuntaminen

RGB:n muuntaminen HSV:ksi:

$R' = R/255, G' = G/255, B' = B/255$ $C_{max} = \max(R', G', B')$ $C_{min} = \min(R', G', B')$ $\Delta = C_{max} - C_{min}$

Hue (H) varten:

0° & \text{if } \Delta = 0 \\ 60° \times (\frac{G' - B'}{\Delta} \mod 6) & \text{if } C_{max} = R' \\ 60° \times (\frac{B' - R'}{\Delta} + 2) & \text{if } C_{max} = G' \\ 60° \times (\frac{R' - G'}{\Delta} + 4) & \text{if } C_{max} = B' \end{cases}$$ Saturaatio (S) varten: $$S = \begin{cases} 0 & \text{if } C_{max} = 0 \\ \frac{\Delta}{C_{max}} \times 100\% & \text{otherwise} \end{cases}$$ Arvo (V) varten: $$V = C_{max} \times 100\%$$ ## Värinvalitsimen Käyttö Värinvalitsin työkalumme tarjoaa useita tapoja valita ja säätää värejä. Tässä on vaiheittainen opas siitä, miten käyttää kutakin ominaisuutta: ### Värispektrin Käyttäminen 1. **Valitse Perusväri**: Napsauta tai napauta missä tahansa värispektrissä valitaksesi perusvärin. Vaakasuora sijainti määrää sävyn, kun taas pystysuora sijainti vaikuttaa saturaatioon. 2. **Säätö Valinta**: Voit vetää valitsimen ympäri löytääksesi täydellisen värisävyn. 3. **Katso Väri Esikatselu**: Kun siirrät valitsinta, väri-esikatselualue päivittyy reaaliajassa, näyttäen nykyisen valintasi. ### Kirkkauden Säätäminen 1. **Käytä Kirkkaussäätimen**: Värispektrin alapuolella on vaakasuora liukusäädin, joka ohjaa valitsemasi värin kirkkautta (arvoa). 2. **Vedä Vasemmalle tai Oikealle**: Siirrä liukusäädintä vasemmalle tummentaaksesi väriä tai oikealle kirkastaaksesi sitä. 3. **Havaitse Muutokset**: Väri-esikatselu ja kaikki väriarvot päivittyvät välittömästi, kun säädät kirkkautta. ### Tarkkojen Väriarvojen Syöttäminen Tarkan värin valinnan vuoksi voit syöttää suoraan arvoja kaikissa tuetuissa formaateissa: #### Hex Syöttö 1. Syötä kelvollinen heksadesimaalivärikoodi Hex-kenttään (esim. #FF5733) 2. Syöttö validoidaan automaattisesti 3. Paina Enter tai napsauta kentän ulkopuolella soveltaaksesi väriä #### RGB Syöttö 1. Syötä arvot välillä 0-255 jokaiselle RGB-komponentille 2. Kaikki muut väri-formaattikentät päivittyvät automaattisesti 3. Virheelliset arvot (0-255 ulkopuolella) rajoitetaan voimassa olevaan alueeseen #### CMYK Syöttö 1. Syötä prosenttiarvot (0-100) Syanille, Magentalle, Keltaiselle ja Mustalle 2. Muut väri-formaatit päivittyvät CMYK-syöttösi perusteella 3. Arvot, jotka ovat 0-100 alueen ulkopuolella, säädetään automaattisesti ### Väriarvojen Kopioiminen 1. **Napsauta Kopioi-painiketta**: Jokaisen väri-formaatin vieressä on kopio-painike (leikepöydän kuvake) 2. **Välitön Palaute**: Napsauttamisen jälkeen "Kopioitu!" -viesti ilmestyy lyhyesti 3. **Liitä Missä Vain**: Kopioitu arvo voidaan nyt liittää suunnitteluohjelmistoon, koodieditoriin tai mihin tahansa muuhun sovellukseen ## Käyttötapaukset Värinvalitsin työkalu palvelee erilaisia tarkoituksia eri aloilla: ### Verkkokehitys Verkkokehittäjät voivat käyttää värinvalitsinta: - Valitakseen värejä verkkosivuston teemoille ja käyttöliittymäkomponenteille - Löytääkseen esteettömiä väriyhdistelmiä, jotka täyttävät WCAG-ohjeet - Muuntaakseen heksakoodit (käytetään CSS:ssä) ja RGB-arvot - Luodakseen väri-palettia johdonmukaiselle brändäykselle verkkosivustoilla Esimerkkityöprosessi: 1. Käytä värispektriä löytääksesi perusvärin verkkosivuston teemalle 2. Säädä kirkkautta luodaksesi variaatioita hover-tiloille ja taustalle 3. Kopioi heksakoodi suoraan CSS-tyylitiedostoihin 4. Käytä RGB-arvoja rgba()-toiminnoissa, kun läpinäkyvyyttä tarvitaan ### Graafinen Suunnittelu Graafiset suunnittelijat hyötyvät: - Tarkasta värin valinnasta digitaaliseen taiteeseen - Muuntamisesta RGB:stä CMYK:iin (painatusta varten) - Harmoonisten väri-skaalojen luomisesta - Tiettyjen brändivärien vastaamisesta Esimerkkityöprosessi: 1. Syötä tietty brändiväri heksamuodossa 2. Käytä värispektriä löytääksesi täydentäviä värejä 3. Tarkista CMYK-arvot varmistaaksesi painatus-yhteensopivuuden 4. Kopioi arvot suunnitteluohjelmistoihin, kuten Adobe Illustrator tai Photoshop ### UI/UX Suunnittelu UI/UX-suunnittelijat voivat: - Valita värejä, jotka parantavat käytettävyyttä ja luettavuutta - Luoda johdonmukaisia väri-järjestelmiä sovelluksille - Testata nopeasti erilaisia väriyhdistelmiä - Varmistaa riittävän kontrastin tekstin ja taustavärin välillä Esimerkkityöprosessi: 1. Valitse pääväri värispektrin avulla 2. Säädä kirkkautta luodaksesi toissijaisia ja kolmannesväriä 3. Testaa erilaisia yhdistelmiä esikatselualueella 4. Kopioi arvot suunnittelujärjestelmiin tai prototyyppityökaluihin ### Digitaalinen Taide Digitaaliset taiteilijat käyttävät värinvalitsimia: - Löytääkseen täydellisen sävyn digitaalisiin maalauksiin - Luodakseen mukautettuja väri-palettia - Vastaamaan värejä viitekuvista - Kokeillakseen väriteorian käsitteitä Esimerkkityöprosessi: 1. Käytä HSV-ohjaimia valitaksesi tietty sävy 2. Säädä saturaatio ja kirkkaus halutun vaikutuksen saavuttamiseksi 3. Kopioi RGB-arvot digitaaliseen maalausohjelmistoon 4. Luo variaatioita säätämällä hieman sävyä tai saturaatioita ### Koulutus Värinvalitsin toimii koulutustyökaluna: - Opettaa väriteorian käsitteitä - Demonstroi väri-mallien muunnoksia - Selittää digitaalista väri-esitystä - Auttaa opiskelijoita ymmärtämään väri-suhteita Esimerkkityöprosessi: 1. Näytä, kuinka sävyn säätäminen muuttaa väriä säilyttäen kirkkauden 2. Demonstroi, kuinka RGB-arvot liittyvät näkyviin väreihin 3. Selitä, kuinka heksakoodit ja RGB-arvot liittyvät toisiinsa 4. Havainnollista, kuinka CMYK eroaa RGB:stä painatuksen ja digitaalisten sovellusten välillä ### Vaihtoehdot Vaikka värinvalitsimemme tarjoaa kattavan toiminnallisuuden, on olemassa vaihtoehtoisia lähestymistapoja väri-valintaan: #### Väri-Paletti Generaattorit Työkalut kuten Adobe Color, Coolors ja Paletton keskittyvät luomaan harmoonisia väri-skaaloja sen sijaan, että valitsisivat yksittäisiä värejä. Ne ovat ihanteellisia, kun tarvitset kehittää täydellistä väri-palettia väriteorian periaatteiden perusteella. #### Kuvapohjaiset Väri-Extractorit Työkalut kuten ColorZilla ja ImageColorPicker antavat sinun poimia värejä suoraan kuvista tai mistä tahansa näytölläsi. Nämä ovat erityisen hyödyllisiä, kun sinun on vastattava olemassa olevia värejä valokuvista tai suunnitteluista. #### Fyysiset Väri-järjestelmät Painamiseen keskittyvälle työlle fyysiset väri-järjestelmät, kuten Pantone, CMYK-värikartat tai RAL-värikartat tarjoavat standardoituja viittauksia, jotka varmistavat värin tarkkuuden eri painatusprosesseissa. #### Sisäänrakennetut Ohjelmistotyökalut Useimmissa suunnitteluohjelmistoissa (Adobe Photoshop, Illustrator, Figma jne.) on sisäänrakennetut värinvalitsimet. Vaikka ne ovat käteviä, ne ovat usein rajoitettuja sovellukseen eivätkä tarjoa ristiin-muunnosta, jota työkalumme tarjoaa. ## Digitaalisen Värinvalinnan Historia Värinvalintatyökalujen kehitys kulkee käsi kädessä digitaalisen suunnittelun kehityksen kanssa: ### Varhainen Digitaalinen Väri (1970-luku-1980-luku) Ensimmäiset digitaalisen värin järjestelmät olivat vakavasti rajoitettuja laitteistojen rajoitusten vuoksi: - Varhaiset tietokoneen näytöt pystyivät näyttämään vain 16 tai 256 väriä - Värit valittiin ennalta määritellyistä paleteista - Verkkoturvallinen väri-paletti (216 väriä) kehitettiin varmistamaan yhteensopivuus eri selaimien välillä ### RGB ja Hex Standardit (1990-luku) Teknologian kehittyessä: - 24-bittinen väri tuli standardiksi, mikä mahdollisti 16,7 miljoonaa väriä - Heksadesimaalinen merkintä otettiin käyttöön HTML:ssä ja CSS:ssä - Perusvärinvalitsimet alkoivat ilmestyä suunnitteluohjelmistoihin - Verkkosuunnittelijat rajoittuivat nimettyihin väreihin ja heksakoodeihin ### Moderni Värinvalinta (2000-luku-nykyhetki) Nykyajan värinvalintatyökalut heijastavat kehittynyttä ymmärrystämme digitaalisesta väristä: - Reaaliaikaiset värinvalitsimet visuaalisilla käyttöliittymillä - Tuki useille väri-malleille (RGB, HSL, HSV, CMYK) - Väriesteettömyys työkalut tarkistaa kontrastisuhteet - Kehittyneet väri-harmonia-algoritmit - Integraatio suunnittelujärjestelmiin ja komponenttikirjastoihin Värinvalintatyökalujen kehitys jatkuu näyttöteknologian, väriteorian ja suunnittelumenetelmien edistymisen myötä. ## Väriesteettömyyden Huomiot Värejä valitessa on tärkeää ottaa huomioon esteettömyys värinäköhäiriöistä kärsiville käyttäjille: ### Väri-sokeuden Tyypit - **Protanopia**: Vaikeus havaita punaisia värejä - **Deuteranopia**: Vaikeus havaita vihreitä värejä - **Tritanopia**: Vaikeus havaita sinisiä värejä - **Akrhomatopsia**: Täydellinen väri-sokeus (näkee vain harmaasävyissä) ### Esteettömyys Vinkit 1. **Älä luota pelkästään väriin** tiedon välittämisessä 2. **Varmista riittävä kontrasti** tekstin ja taustan välillä (vähintään 4.5:1 normaalille tekstille) 3. **Käytä kuvioita tai tekstuureja** värikartoissa ja kaavioissa lisäksi väreihin 4. **Testaa värivalintasi** väri-sokeuden simulointityökaluilla 5. **Harkitse värisokeuden ystävällisten palettien käyttöä**, jotka välttävät ongelmallisia väriyhdistelmiä ## Usein Kysytyt Kysymykset ### Mikä on ero RGB- ja CMYK-värimallien välillä? RGB (Punainen, Vihreä, Sininen) on additiivinen väri-malli, jota käytetään digitaalisissa näyttöissä, joissa värit luodaan lisäämällä valoa. CMYK (Syan, Magenta, Keltainen, Musta) on vähentävä malli, jota käytetään painamisessa, jossa värit luodaan imemällä (vähentämällä) valoa. RGB tuottaa kirkkaampia, elävämpiä värejä, jotka ovat ihanteellisia digitaaliseen mediaan, kun taas CMYK:llä on tyypillisesti rajoitettu väri-gamut, joka soveltuu paremmin painomateriaaleihin. ### Miksi värit näyttävät erilaisilta näytöllä verrattuna painettuna? Tämä ero johtuu siitä, että näytöt käyttävät RGB-värimallia, joka voi näyttää laajemman värivalikoiman kuin mitä CMYK-painatusmusteen kanssa on mahdollista. Lisäksi näytöt säteilevät valoa, kun taas painetut materiaalit heijastavat sitä. Laitteiden väliin jäävät kalibrointierot, paperin laatu ja musteen vaihtelut vaikuttavat myös tähän eroon. Painamiseen keskittyvissä töissä tarkista aina CMYK-arvot ja harkitse fyysisten todisteiden pyytämistä. ### Miten löydän heksakoodin tietystä väristä, jonka näen verkossa? Voit käyttää selaimen laajennuksia, kuten ColorZilla, tai sisäänrakennettuja kehittäjätyökaluja. Chrome- tai Firefox-selaimessa napsauta hiiren oikealla elementtiä, valitse "Tarkista" ja käytä kehittäjäpaneelin värinvalitsinta. Vaihtoehtoisesti voit ottaa kuvakaappauksen ja ladata sen värinvalitsimeemme, sitten napsauttaa haluamaasi väriä saadaksesi sen heksakoodin. ### Mikä on paras tapa luoda yhtenäinen väri-skaala? Aloita pääväristä, joka edustaa brändiäsi tai projektisi tunnelmaa. Käytä sitten väriteorian periaatteita, kuten täydentäviä (vastakkaisia väripyörällä), analogisia (vierekkäisiä väripyörällä) tai triadisia (tasaisesti ympäri väripyörää) suhteita valitaksesi lisävärit. Säädä saturaatio ja kirkkaus luodaksesi hierarkiaa. Värinvalitsimemme auttaa sinua visualisoimaan näitä suhteita ja hienosäätämään valintojasi. ### Miten voin varmistaa, että valitsemani värit ovat esteettömiä? Tarkista kontrastisuhde tekstin ja taustavärin välillä käyttämällä työkaluja, kuten WebAIM Contrast Checker. Normaalille tekstille pyri vähintään 4.5:1:n suhteeseen ja suurille teksteille 3:1. Vältä ongelmallisia väriyhdistelmiä värisokeille (kuten punainen/vihreä). Testaa suunnitelmasi väri-sokeuden simulointityökaluilla. Muista, että noin 8% miehistä ja 0.5% naisista kärsii jostain värinäön häiriöstä. ### Mitä #-merkki tarkoittaa heksakoodissa? Häntä- tai pound-merkki (#) on etuliite, joka osoittaa, että seuraavat merkit edustavat heksadesimaalista väri-koodia. Se on standardimerkintä HTML:ssä, CSS:ssä ja monissa suunnitteluohjelmissa. Kuusi seuraavaa numeroa edustavat RGB-arvoja 16-pohjaisessa muodossa, ensimmäinen pari edustaa punaista, toinen vihreää ja kolmas sinistä. ### Miten muunnan värin RGB:stä CMYK:iin painamista varten? Värinvalitsin muuntaa automaattisesti RGB-arvot niiden CMYK-vastaaviin. Syötä vain RGB-arvosi, ja vastaavat CMYK-arvot näkyvät. Huomaa kuitenkin, että jotkut RGB-värit ovat CMYK-gamuttasi ulkopuolella, eikä niitä voida toistaa tarkasti painossa. Ammattilaisohjelmisto, kuten Adobe Illustrator tai Photoshop, tarjoaa myös väri-muunnosta, jossa on gamut-varoituksia. ### Miksi on olemassa sekä 3-numeroinen että 6-numeroinen heksakoodi? 3-numeroinen heksakoodi on lyhennysmerkintä, jota voidaan käyttää, kun jokainen komponenttipari sisältää samat numerot. Esimerkiksi #FF0000 voidaan lyhentää muotoon #F00, koska F=FF, 0=00 ja 0=00. Tämä lyhenne toimii vain väreille, joissa jokainen kanava voidaan esittää toistuvilla numeroilla. Se otettiin alun perin käyttöön tiedostokoon säästämiseksi varhaisen verkkosivuston päivinä, mutta se pysyy kätevänä lyhenteenä. ### Kuinka tarkkoja ovat väri-muunnokset eri mallien välillä? Muunnokset RGB:stä heksaksi ovat matemaattisesti tarkkoja, koska ne ovat suoria esityksiä samoista arvoista eri formaateissa. Muunnokset RGB:stä CMYK:iin ovat arvioita, koska valon säteilyyn ja musteen imeytymiseen liittyy perusasioiden eroja. Työkalumme käyttää alan standardikaavoja tarjotakseen mahdollisimman tarkkoja muunnoksia näiden rajoitusten puitteissa. ### Voinko tallentaa tai viedä valitsemani värit? Tällä hetkellä voit kopioida yksittäisiä väriarvoja leikepöydällesi. Suosittelemme luomaan asiakirjan tai käyttämään omistettua väri-palettityökalua tallentaaksesi useita värejä projekteihisi. Tulevissa päivityksissä voi olla ominaisuuksia tallentaa väri-palettia suoraan työkalussa. ## Koodiesimerkkejä Väri-Muunnoksista Tässä on joitakin koodiesimerkkejä, jotka näyttävät, kuinka muuntaa eri väri-formaattien välillä:

1// RGB:stä Hex-muunnos
2function rgbToHex(r, g, b) {
3  const toHex = (c) => {
4    const hex = Math.round(c).toString(16);
5    return hex.length === 1 ? '0' + hex : hex;
6  };
7  
8  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
9}
10
11// Hex:stä RGB-muunnos
12function hexToRgb(hex) {
13  // Poista #, jos se on läsnä
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Käsittele sekä 3-numeroinen että 6-numeroinen heksadesimaali
17  const expandedHex = cleanHex.length === 3 
18    ? cleanHex.split('').map(char => char + char).join('')
19    : cleanHex;
20    
21  const r = parseInt(expandedHex.substring(0, 2), 16);
22  const g = parseInt(expandedHex.substring(2, 4), 16);
23  const b = parseInt(expandedHex.substring(4, 6), 16);
24  
25  return { r, g, b };
26}
27
28// RGB:stä CMYK-muunnos
29function rgbToCmyk(r, g, b) {
30  // Normalisoi RGB-arvot
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Laske K (musta)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Käsittele puhdas musta
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Laske C, M, Y
44  const c = ((1 - normalizedR - k) / (1 - k)) * 100;
45  const m = ((1 - normalizedG - k) / (1 - k)) * 100;
46  const y = ((1 - normalizedB - k) / (1 - k)) * 100;
47  
48  return {
49    c: Math.round(c),
50    m: Math.round(m),
51    y: Math.round(y),
52    k: Math.round(k * 100)
53  };
54}
55
56// Esimerkkikäyttö
57const rgb = { r: 255, g: 0, b: 0 }; // Puhdas punainen
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# RGB:stä Hex-muunnos
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Hex:stä RGB-muunnos
6def hex_to_rgb(hex_color):
7    # Poista #, jos se on läsnä
8    hex_color = hex_color.lstrip('#')
9    
10    # Käsittele sekä 3-numeroinen että 6-numeroinen heksadesimaali
11    if len(hex_color) == 3:
12        hex_color = ''.join([c*2 for c in hex_color])
13    
14    return {
15        'r': int(hex_color[0:2], 16),
16        'g': int(hex_color[2:4], 16),
17        'b': int(hex_color[4:6], 16)
18    }
19
20# RGB:stä CMYK-muunnos
21def rgb_to_cmyk(r, g, b):
22    # Normalisoi RGB-arvot
23    r_norm = r / 255.0
24    g_norm = g / 255.0
25    b_norm = b / 255.0
26    
27    # Laske K (musta)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Käsittele puhdas musta
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Laske C, M, Y
35    c = ((1 - r_norm - k) / (1 - k)) * 100
36    m = ((1 - g_norm - k) / (1 - k)) * 100
37    y = ((1 - b_norm - k) / (1 - k)) * 100
38    
39    return {
40        'c': round(c),
41        'm': round(m),
42        'y': round(y),
43        'k': round(k * 100)
44    }
45
46# Esimerkkikäyttö
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Taivaan sininen
48hex_color = rgb_to_hex(rgb['r'], rgb['g'], rgb['b'])
49cmyk = rgb_to_cmyk(rgb['r'], rgb['g'], rgb['b'])
50
51print(f"Hex: {hex_color}")
52print(f"CMYK: C={cmyk['c']}%, M={cmyk['m']}%, Y={cmyk['y']}%, K={cmyk['k']}%")
53

1public class ColorConverter {
2    // RGB:stä Hex-muunnos
3    public static String rgbToHex(int r, int g, int b) {
4        return String.format("#%02x%02x%02x", r, g, b);
5    }
6    
7    // Hex:stä RGB-muunnos
8    public static int[] hexToRgb(String hexColor) {
9        // Poista #, jos se on läsnä
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Käsittele sekä 3-numeroinen että 6-numeroinen heksadesimaali
15        if (hexColor.length() == 3) {
16            String expandedHex = "";
17            for (char c : hexColor.toCharArray()) {
18                expandedHex += c + String.valueOf(c);
19            }
20            hexColor = expandedHex;
21        }
22        
23        int r = Integer.parseInt(hexColor.substring(0, 2), 16);
24        int g = Integer.parseInt(hexColor.substring(2, 4), 16);
25        int b = Integer.parseInt(hexColor.substring(4, 6), 16);
26        
27        return new int[]{r, g, b};
28    }
29    
30    // RGB:stä CMYK-muunnos
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normalisoi RGB-arvot
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Laske K (musta)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Käsittele puhdas musta
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Laske C, M, Y
46        double c = ((1 - normalizedR - k) / (1 - k)) * 100;
47        double m = ((1 - normalizedG - k) / (1 - k)) * 100;
48        double y = ((1 - normalizedB - k) / (1 - k)) * 100;
49        
50        return new double[]{
51            Math.round(c),
52            Math.round(m),
53            Math.round(y),
54            Math.round(k * 100)
55        };
56    }
57    
58    public static void main(String[] args) {
59        // Esimerkkikäyttö
60        int r = 75, g = 0, b = 130;  // Purppura
61        String hexColor = rgbToHex(r, g, b);
62        double[] cmyk = rgbToCmyk(r, g, b);
63        
64        System.out.println("Hex: " + hexColor);
65        System.out.printf("CMYK: C=%.0f%%, M=%.0f%%, Y=%.0f%%, K=%.0f%%\n", 
66                          cmyk[0], cmyk[1], cmyk[2], cmyk[3]);
67    }
68}
69

Viitteet

1. Agoston, M. K. (2013). Tietokonegrafiikka ja Geometrinen Mallinnus: Toteutus ja Algoritmit. Springer Science & Business Media.

2. Adobe Systems. (2000). Adobe RGB (1998) Värikuvaus. Adobe Systems Incorporated.

3. Fairchild, M. D. (2013). Värinäkömallit. John Wiley & Sons.

4. Hunt, R. W. G., & Pointer, M. R. (2011). Värin Mittaaminen. John Wiley & Sons.

5. Poynton, C. (2012). Digitaalinen Video ja HD: Algoritmit ja Liitännät. Elsevier.

6. W3C. (2018). CSS Värimoduuli Taso 4. W3C Työluonnos. Haettu osoitteesta https://www.w3.org/TR/css-color-4/

7. Verkkosivuston Sisällön Esteettömyysohjeet (WCAG) 2.1. (2018). Haettu osoitteesta https://www.w3.org/TR/WCAG21/

8. Kansainvälinen Värikonsortio. (2004). Erityisjärjestelmä ICC.1:2004-10 (Profiilin versio 4.2.0.0). Haettu osoitteesta http://www.color.org/specification/ICC1v42_2006-05.pdf

Kokeile Värinvalitsinta Tänään!

Valmis löytämään täydellinen väri projektiisi? Käyttäjäystävällinen värinvalitsimemme tekee väriä valitsemisesta, säätämisestä ja muuntamisesta helppoa eri formaatteihin. Olitpa sitten verkkosivustoa suunnittelemassa, digitaalista taidetta luomassa tai painomateriaaleja suunnittelemassa, työkalumme tarjoaa tarkkuuden ja joustavuuden, jota tarvitset.

Aloita värien kokeileminen nyt ja vie suunnitelmasi uudelle tasolle!