Mikä on ero RGB:n ja CMYK:n välillä?

RGB on tarkoitettu näytöille, CMYK painotuotteille. Näytöt luovat värejä lähettämällä punaista, vihreää ja sinistä valoa (additiivinen sekoitus), kun taas tulostimet luovat värejä kerrostamalla syaania, magentaa, keltaista ja mustaa mustetta paperille (subtraktiivinen sekoitus). RGB voi tuottaa kirkkaampia ja eloisampia värejä kuin CMYK, koska valo sisältää laajemman väriavaruuden kuin muste. Siksi näytön värit näyttävät usein haaleammilta tulostettaessa.

Miksi värit näyttävät erilaisilta tulostettaessa?

Näytöt lähettävät valoa, paperi heijastaa sitä - kyseessä ovat perustavanlaatuisesti erilaiset prosessit. Lisäksi RGB käsittelee miljoonia värejä, joita CMYK-muste ei yksinkertaisesti voi toistaa. Näytön kalibrointi, paperin laatu ja musteen vaihtelut lisäävät muuttuvia tekijöitä. Tarkista aina CMYK-arvot ennen tulostusta ja pyydä fyysisiä näytteitä kriittisiin värinmääritystyöhön.

Miten saan hex-koodit verkossa näkemistäni väreistä?

Käytä selaimen kehittäjätyökaluja. Chromessa tai Firefoxissa napsauta mitä tahansa elementtiä hiiren kakkospainikkeella, valitse "Tarkastele" ja napsauta pientä väriruutua tyylipaneelissa. Tämä avaa värinvalitsimen, joka näyttää hex-koodin. Selainlaajennukset kuten ColorZilla tekevät tästä vieläkin nopeampaa - ne antavat sinun napsauttaa mitä tahansa sivun kohtaa väriarvon poimimiseksi.

Mitä # tarkoittaa hex-koodeissa?

Se on vain etuliite, joka kertoo selaimelle "tämä on heksadesimaalinen värikoodi". Standardi tulee varhaisilta HTML- ja CSS-määrityksiltä. Kuusi merkkiä #:n jälkeen edustavat RGB-arvoja kantaluvussa 16: kaksi numeroa punaiselle, kaksi vihreälle, kaksi siniselle. Ilman #:tä selaimet eivät tunnista sitä väriksi.

Miksi 3-numeroiset hex-koodit toimivat?

Ne ovat pikakirjoitusta tilanteisiin, joissa kukin värikanava toistuu. #F00 laajenee muotoon #FF0000 (punainen), #C9C muuttuu muotoon #CC99CC (vaalea violetti). Tämä pikakirjoitus luotiin 1990-luvulla tiedostokokojen pienentämiseksi, kun kaistanleveys oli kallista. Se on edelleen kätevä yksinkertaisille väreille.

Ovatko värimuunnokset tarkkoja?

RGB-hex-muunnokset ovat matemaattisesti tarkkoja - kyseessä ovat samat arvot eri lukujärjestelmissä. RGB-CMYK-muunnokset ovat arvioita, koska muunnat perustavanlaatuisesti erilaisista väriavaruuksista (valo vs. muste). Työkalu käyttää ICC-väriprofiilien standardeja näissä muunnoksissa, samaa lähestymistapaa kuin ammattimaiset suunnitteluohjelmistot.

Miten luon saavutettavia vähdistelmä?

Käytä kontrastintarkistajaa kuten WebAIM:n työkalua värien valinnan jälkeen. Tarvitset 4,5:1 suhteen normaalille tekstille, 3:1 suurelle tekstille. Vältä punaviher-yhdistelmiä (vaikein värisokaille käyttäjille). Kun olet epävarma, käytä tummempaa tekstiä vaaleammalla taustalla tai päinvastoin - riittävä luminanssiero on tärkein asia.

Voinko poimia värejä kuvista?

Ei suoraan tässä työkalussa. Käytä selaimen laajennusta kuten ColorZilla tai ota kuvakaappaus ja käytä käyttöjärjestelmäsi värinvalitsinta (Digital Color Meter macOS:ssa, PowerToys Color Picker Windowsissa). Kun sinulla on värin arvo, syötä se tähän muuntaaksesi eri muotoihin.

Miksi jotkin RGB-värit eivät muunnu hyvin CMYK:ksi?

CMYK:lla on kapeampi "gamut" (toistettavissa olevien värien alue) kuin RGB:llä. Kirkkaat sinisen sävyt, eloisat vihreät ja sähköiset oranssit jäävät usein CMYK-musteen fyysisen tuotantokyvyn ulkopuolelle. Kun näin tapahtuu, tulostin korvaa lähimmällä mahdollisella värillä, joka yleensä näyttää vähemmän kylläiseltä. Ammattimaiset painosuunnittelijat aloittavat usein CMYK-turvallisilla väreillä välttääkseen tämän ongelman.

Värinvalitsimen työkalu - Muunna RGB, Hex, CMYK ja HSV-värikoodit

Mitä Tällä Värinvalitsimella Voit Tehdä

Tarvitsetko täydellisen sävyn projektiisi? Tämä värinvalitsin antaa sinun valita, esikatsella ja muuntaa värejä RGB-, Hex-, CMYK- ja HSV-muotojen välillä heti. Olitpa sitten kehittämässä verkkosivustoa, suunnittelemassa logoa tai valmistelemassa tiedostoja painatukseen, löydät tarkalleen tarvitsemasi väriarvot – ilman arvailuja ja ilman työkalujen välillä vaihtamista.

Klikkaa missä tahansa värisspektrissä valitaksesi sävyn, säädä kirkkautta liukusäätimellä tai syötä tarkat arvot suoraan. Jokainen muoto päivittyy reaaliajassa, ja voit kopioida minkä tahansa värikoodin yhdellä klikkauksella.

Värimallien ymmärtäminen

Eri projektit tarvitsevat erilaisia värimuotoja. Tässä on kuvaus siitä, mitä kukin tekee ja milloin sitä käytetään:

RGB (Punainen, Vihreä, Sininen)

RGB toimii sekoittamalla punaista, vihreää ja sinistä valoa - samalla tavalla kuin näyttösi näyttää värit juuri nyt. Jokainen komponentti vaihtelee välillä 0-255:

RGB(255, 0, 0) = puhdas punainen
RGB(0, 255, 0) = puhdas vihreä
RGB(0, 0, 255) = puhdas sininen
RGB(255, 255, 255) = valkoinen
RGB(0, 0, 0) = musta

Milloin käyttää RGB:tä: Kaikessa digitaalisessa työssä - verkkosivuilla, mobiilisovelluksissa, videoeditoinneissa tai näyttöpohjaisissa grafiikassa. Se on näyttöjen alkuperäinen kieli, minkä vuoksi työkalut kuten CSS tukevat suoraan rgb()- ja rgba()-funktioita. W3C CSS Color Module -määrityksen mukaan RGB on verkkostandardien perusvärimalli.

Heksadesimaalinen (Hex)

Heksadesimaalikoodit ovat vain RGB-arvoja kirjoitettuna kantaluvussa 16 kantaluvun 10 sijaan. Heksaväri näyttää tältä #FF5733, jossa:

#-symboli merkitsee sen heksadesimaalivärikoodiksi
Ensimmäiset kaksi merkkiä = punainen (00-FF)
Keskimmäiset kaksi = vihreä (00-FF)
Viimeiset kaksi = sininen (00-FF)
#FF0000 = punainen, #00FF00 = vihreä, #0000FF = sininen

Joskus näet 3-merkkisen pikaversion kuten #F00 muodon #FF0000 sijaan - tämä toimii, kun jokainen värikomponentti toistaa saman numeron.

Milloin käyttää Hex:iä: Ensisijainen käyttötapaus on web-kehitys. CSS on aina tukenut heksanotaatiota, ja useimmat kehittäjät kokevat sen nopeammaksi kirjoittaa kuin rgb(). Yleinen sudenkuoppa: #-symbolin unohtaminen rikkoo tyylit hiljaisesti, koska selaimet eivät tunnista sitä kelvolliseksi väriksi.

CMYK (Syaani, Magenta, Keltainen, Avain/Musta)

CMYK on värimalli, jota tulostimet käyttävät. Toisin kuin RGB (joka lisää valoa), CMYK vähentää sitä - sekoittaen mustetta valkoiselle paperille värien luomiseksi:

Jokainen komponentti vaihtelee 0%:sta 100%:iin
CMYK(0, 100, 100, 0) = punainen
CMYK(100, 0, 100, 0) = vihreä
CMYK(0, 0, 0, 100) = puhdas musta muste
CMYK(0, 0, 0, 0) = ei mustetta (valkoinen paperi näkyy läpi)

Milloin käyttää CMYK:tä: Painotuotteissa - käyntikortit, esitteet, lehdet, pakkaukset. Todellisuudessa monet kirkkaat RGB-värit eivät yksinkertaisesti ole toistettavissa CMYK-musteilla. Se kirkas sähköinen sininen, jonka näet näytöllä? Se näyttää haaleammalta tulostettuna. Ammattimaiset suunnittelijat aina esikatsovat CMYK-muunnokset ennen tiedostojen lähettämistä painoon yllättävyyksien välttämiseksi.

HSV (Värisävy, Kylläisyys, Arvo)

HSV jakaa värin kolmeen intuitiiviseen komponenttiin:

Värisävy: Mikä väriperhe (0-360°) - 0° on punainen, 120° on vihreä, 240° on sininen
Kylläisyys: Kuinka eloisa tai harmaa (0-100%) - 0% on harmaasävy, 100% on täysin kylläinen
Arvo: Kuinka kirkas tai tumma (0-100%) - 0% on musta, 100% on täysi kirkkaus

Miksi HSV on tärkeä: Se vastaa sitä, miten ihmiset luonnostaan ajattelevat väriä. Haluatko tummemman sinisen? Laske arvoa. Haluatko vähemmän intensiivisen sinisen? Laske kylläisyyttä. Tämä tekee HSV:stä ihanteellisen interaktiivisille värinvalitsimille, joissa valitset värisävyn spektristä ja säädät kirkkautta liukusäätimellä.

Värinmuunnoskaavat

Värinvalitsin muuntaa automaattisesti eri värimalleja käyttäen näitä matemaattisia kaavoja:

RGB:stä heksadesimaaleiksi muuntaminen

RGB:n muuntamiseksi heksadesimaaleiksi:

Muunna jokainen RGB-komponentti (0-255) kahden numeron heksadesimaaliseksi luvuksi
Yhdistä kolme heksadesimaaliarvoa # -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

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

Normalisoi RGB-arvot välille 0-1
Laske musta avainkomponentti (K)
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}$

Värisävylle (H):

1// RGB:stä heksadesimaaliksi
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// Heksadesimaalista RGB:ksi
12function hexToRgb(hex) {
13  // Poista # jos läsnä
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Käsittele sekä 3- että 6-merkkiset heksadesimaalit
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:ksi
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// Käyttöesimerkki
57const rgb = { r: 255, g: 0, b: 0 }; // Puhdas punainen
58console.log(`Heksa: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# RGB:stä heksadesimaaliksi
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Heksadesimaalista RGB:ksi
6def hex_to_rgb(hex_color):
7    # Poista # jos läsnä
8    hex_color = hex_color.lstrip('#')
9    
10    # Käsittele sekä 3- että 6-merkkiset heksadesimaalit
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:ksi
21def rgb_to_cmyk(r, g, b):
22    # Normalisoi RGB-arvot
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
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# Käyttöesimerkki
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Taivaansini
48hex_color = rgb_to_hex(rgb['r'], rgb['g'], rgb['b'])
49cmyk = rgb_to_cmyk(rgb['r'], rgb['g'], rgb['b'])
50
51print(f"Heksa: {hex_color}")
52print(f"CMYK: C={cmyk['c']}%, M={cmyk['m']}%, Y={cmyk['y']}%, K={cmyk['k']}%")
53

1public class VärinMuunnin {
2    // RGB:stä heksadesimaaliksi
3    public static String rgbToHex(int r, int g, int b) {
4        return String.format("#%02x%02x%02x", r, g, b);
5    }
6    
7    // Heksadesimaalista RGB:ksi
8    public static int[] hexToRgb(String hexColor) {
9        // Poista # jos läsnä
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Käsittele sekä 3- että 6-merkkiset heksadesimaalit
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:ksi
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        // Käyttöesimerkki
60        int r = 75, g = 0, b = 130;  // Violetti
61        String hexColor = rgbToHex(r, g, b);
62        double[] cmyk = rgbToCmyk(r, g, b);
63        
64        System.out.println("Heksa: " + 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 ja lisälukemisto

W3C CSS Color Module Level 4 - Virallinen verkkovärimääritelmä
WCAG 2.1 Kontrastisuositukset - Esteettömyysstandardit värikontrastille
WebAIM Kontrastintarkistus - Testaa värikontrastisuhteet
ICC-väriprofiilien standardit - Tekninen määritelmä värimuunnoksille
MDN Web Docs: CSS-väriarvot - Kattava opas verkkovärimuodoille

Värinvalitsimen työkalu - Muunna RGB, Hex, CMYK ja HSV-värikoodit

Värinvalitsin

RGB (0-255)

CMYK (0-100)

Värinvalitsin

Dokumentaatio

Mitä Tällä Värinvalitsimella Voit Tehdä

Värimallien ymmärtäminen

RGB (Punainen, Vihreä, Sininen)

Heksadesimaalinen (Hex)

CMYK (Syaani, Magenta, Keltainen, Avain/Musta)

HSV (Värisävy, Kylläisyys, Arvo)

Värinmuunnoskaavat

RGB:stä heksadesimaaleiksi muuntaminen

RGB:stä CMYK:iin muuntaminen

RGB:stä HSV:iin muuntaminen

Viitteet ja lisälukemisto

Väripalettien Generaattori - Luo Harmonisia Värikokonaisuuksia

CSS-ominaisuuksien generaattori - Liukuvärit, Varjostukset & Reunat

Ilmainen QR-koodin luoja - Luo skannattavat QR-koodit välittömästi

Numerojärjestelmän muunnin: Binääri, Heksadesimaali, Desimaali & Oktaali

Kaniinien Värin Ennustaja – Laske Pentujen Turkinvärit

Binääri-desimaalilaskuri | Ilmainen Online-työkalu

PX-REM-EM-muunnin – Ilmainen CSS-yksikkömuunnin

Base64-kuvan purkaja | Pura ja esikatsele kuvia verkossa

Valkaisuaineen laimennuslaskuri: Tarkat suhteet turvalliseen puhdistukseen

Pikseli tuumiksi -muunnin - Ilmainen DPI-laskuri (2025)

Bitti- ja tavupituuden laskuri - Ilmainen tietokokotyökalu

Ilmainen Koodin Muotoilija: Kaunista JavaScript, Python, HTML ja Paljon Muuta