Vad är skillnaden mellan RGB och CMYK?

RGB är för skärmar, CMYK är för tryck. Skärmar skapar färger genom att utstråla röd, grön och blå ljus (additiv blandning), medan skrivare skapar färger genom att lägga lager av cyan, magenta, gul och svart bläck på papper (subtraktiv blandning). RGB kan producera ljusare, mer levande färger än CMYK eftersom ljus har ett bredare färgomfång än bläck. Därför ser skärmfärgerna ofta blekare ut när de skrivs ut.

Varför ser mina färger annorlunda ut när de skrivs ut?

Skärmar utstrålar ljus, papper reflekterar det—fundamentalt olika processer. Dessutom hanterar RGB miljontals färger som CMYK-bläck helt enkelt inte kan återskapa. Skärmkalibrering, papperskvalitet och bläckvariation tillför ytterligare variabilitet. Kontrollera alltid CMYK-värden innan utskrift och begär fysiska provtryck för kritiskt färgmatchningsarbete.

Hur får jag hex-koder från färger jag ser online?

Använd webbläsarens utvecklarverktyg. I Chrome eller Firefox, högerklicka på vilket element som helst, välj "Inspektera" och klicka sedan på den lilla färgkvadraterna i stilpanelen. Detta öppnar en färgväljare som visar hex-koden. Webbläsartillägg som ColorZilla gör detta ännu snabbare—de låter dig klicka var som helst på en sida för att fånga dess färgvärde.

Vad betyder # -symbolen i hex-koder?

Det är bara ett prefix som talar om för webbläsaren "detta är en hexadecimal färgkod". Standarden kommer från tidiga HTML- och CSS-specifikationer. De sex tecknen efter # representerar RGB-värden i bas-16: två siffror för röd, två för grön, två för blå. Utan # kommer webbläsare inte att känna igen det som en färg.

Varför fungerar 3-siffriga hex-koder?

De är genvägar för när varje färgkanal upprepar sig. #F00 expanderas till #FF0000 (röd), #C9C blir #CC99CC (ljus lila). Denna genväg skapades på 1990-talet för att minska filstorlekar när bandbredden var dyr. Den är fortfarande bekväm idag för enkla färger.

Är färgkonverteringarna exakta?

RGB-till-hex-konverteringar är matematiskt exakta—det är samma värden i olika talbaser. RGB-till-CMYK-konverteringar är approximationer eftersom du konverterar mellan fundamentalt olika färgrum (ljus vs. bläck). Verktyget använder ICC färgprofilstandarder för dessa konverteringar, vilket är samma tillvägagångssätt som professionell designprogramvara använder.

Hur skapar jag tillgängliga färgkombinationer?

Använd en kontrastgranskare som WebAIM:s verktyg efter att ha valt dina färger här. Du behöver ett 4,5:1-förhållande för normal text, 3:1 för stor text. Undvik röd-grön kombinationer (svårast för färgblinda användare). När du är osäker, mörkare text på ljusare bakgrunder eller tvärtom—tillräcklig luminansskillnad är det viktigaste.

Kan jag välja färger från bilder?

Inte direkt i detta verktyg. Använd ett webbläsartillägg som ColorZilla, eller ta en skärmbild och använd operativsystemets färgväljare (Digital Color Meter på macOS, PowerToys Color Picker på Windows). När du har färgvärdet, mata in det här för att konvertera mellan format.

Varför konverteras vissa RGB-färger inte bra till CMYK?

CMYK har ett smalare "gamut" (intervall av reproducerbara färger) än RGB. Ljusa blå, levande gröna och elektriska orangea färger hamnar ofta utanför vad CMYK-bläck fysiskt kan skapa. När detta händer substituerar skrivaren den närmaste möjliga matchningen, vilket vanligtvis ser mindre mättat ut. Professionella tryckdesigners börjar ofta med CMYK-säkra färger för att undvika detta problem.

Färgväljare - Konvertera RGB, Hex, CMYK & HSV färgkoder

Vad Du Kan Göra Med Denna Färgväljare

Behöver du den perfekta nyansen för ditt projekt? Denna färgväljare låter dig välja, förhandsgranska och konvertera färger mellan RGB, Hex, CMYK och HSV-format direkt. Oavsett om du kodar en webbplats, designar en logotyp eller förbereder filer för tryck, kommer du att hitta exakt de färgvärden du behöver—utan gissningar, utan att behöva byta mellan verktyg.

Klicka var som helst på färgspektrumet för att välja en nyans, justera ljusstyrkan med en skjutreglage eller ange exakta värden direkt. Varje format uppdateras i realtid, och du kan kopiera valfri färgkod med ett enda klick.

Förstå färgmodeller

Olika projekt behöver olika färgformat. Här är vad varje format gör och när du ska använda det:

RGB (Röd, Grön, Blå)

RGB fungerar genom att blanda röd, grön och blå ljus—på samma sätt som din skärm visar färger just nu. Varje komponent sträcker sig från 0 till 255:

RGB(255, 0, 0) = ren röd
RGB(0, 255, 0) = ren grön
RGB(0, 0, 255) = ren blå
RGB(255, 255, 255) = vit
RGB(0, 0, 0) = svart

När du ska använda RGB: All digital design—webbplatser, mobilappar, videoredigering eller skärmbaserad grafik. Det är displayernas modersmål, vilket är anledningen till att verktyg som CSS stöder rgb() och rgba() funktioner direkt. Enligt W3C CSS Color Module specification är RGB den grundläggande färgmodellen för webbstandarder.

Hexadecimal (Hex)

Hex-koder är helt enkelt RGB-värden skrivna i bas-16 istället för bas-10. En hex-färg ser ut som #FF5733, där:

#-symbolen markerar att det är en hex-kod
Första två tecknen = röd (00-FF)
Mellansta två = grön (00-FF)
Sista två = blå (00-FF)
#FF0000 = röd, #00FF00 = grön, #0000FF = blå

Ibland ser du en 3-teckens förkortning som #F00 istället för #FF0000—detta fungerar när varje färgkanal upprepar samma siffra.

När du ska använda Hex: Webbutveckling är det primära användningsfallet. CSS har alltid stött hex-notation, och de flesta utvecklare tycker det är snabbare att skriva än rgb(). Ett vanligt misstag: att glömma #-symbolen kommer att tysta bryta dina stilar, eftersom webbläsare inte känner igen det som en giltig färg.

CMYK (Cyan, Magenta, Gul, Svart)

CMYK är färgmodellen som används av skrivare. Till skillnad från RGB (som lägger till ljus), subtraherar CMYK ljus—genom att blanda bläck på vitt papper för att skapa färger:

Varje komponent sträcker sig från 0% till 100%
CMYK(0, 100, 100, 0) = röd
CMYK(100, 0, 100, 0) = grön
CMYK(0, 0, 0, 100) = rent svart bläck
CMYK(0, 0, 0, 0) = inget bläck (vitt papper syns igenom)

När du ska använda CMYK: Design för tryck—visitkort, broschyrer, tidningar, förpackningar. Här är verklighetskontrollen: många levande RGB-färger kan helt enkelt inte reproduceras med CMYK-bläck. Den ljusa elektriska blå färgen du ser på skärmen? Den kommer att se mattare ut när den trycks. Professionella designers förhandsgranskar alltid CMYK-konverteringar innan de skickar filer till tryckeriet för att undvika överraskningar.

HSV (Nyans, Mättnad, Värde)

HSV delar upp färg i tre intuitiva komponenter:

Nyans: Vilken färgfamilj (0-360°)—0° är röd, 120° är grön, 240° är blå
Mättnad: Hur levande eller grå (0-100%)—0% är gråskala, 100% är helt mättad
Värde: Hur ljus eller mörk (0-100%)—0% är svart, 100% är full ljusstyrka

Varför HSV spelar roll: Det matchar hur människor naturligt tänker på färg. Vill du ha en mörkare blå? Sänk värdet. Vill du ha en mindre intensiv blå? Sänk mättnaden. Detta gör HSV idealisk för interaktiva färgväljare som denna, där du väljer en nyans på spektrumet och justerar ljusstyrkan med en skjutreglage.

Färgkonverteringsformler

Färgväljaren konverterar automatiskt mellan olika färgmodeller med hjälp av dessa matematiska formler:

RGB till Hex-konvertering

För att konvertera RGB till hexadecimal:

Konvertera varje RGB-komponent (0-255) till ett tvåsiffrigt hexadecimalt tal
Sammanfoga de tre hexadecimala värdena med ett # prefix

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

Där toHex() konverterar ett decimalt tal till dess hexadecimala representation.

RGB till CMYK-konvertering

Konverteringen från RGB till CMYK innebär följande steg:

Normalisera RGB-värden till intervallet 0-1
Beräkna den svarta nyckelkomponenten (K)
Beräkna C, M och Y baserat på K

$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 till HSV-konvertering

Konvertera RGB till HSV:

$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}$

För Hue (H):

1// RGB till Hex-konvertering
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 till RGB-konvertering
12function hexToRgb(hex) {
13  // Ta bort # om den finns
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Hantera både 3-siffriga och 6-siffriga hex
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 till CMYK-konvertering
29function rgbToCmyk(r, g, b) {
30  // Normalisera RGB-värden
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Beräkna K (svart)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Hantera ren svart
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Beräkna 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// Exempelanvändning
57const rgb = { r: 255, g: 0, b: 0 }; // Ren röd
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# RGB till Hex-konvertering
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Hex till RGB-konvertering
6def hex_to_rgb(hex_color):
7    # Ta bort # om den finns
8    hex_color = hex_color.lstrip('#')
9    
10    # Hantera både 3-siffriga och 6-siffriga hex
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 till CMYK-konvertering
21def rgb_to_cmyk(r, g, b):
22    # Normalisera RGB-värden
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # Beräkna K (svart)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Hantera ren svart
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Beräkna 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# Exempelanvändning
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Himmelsblå
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 till Hex-konvertering
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 till RGB-konvertering
8    public static int[] hexToRgb(String hexColor) {
9        // Ta bort # om den finns
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Hantera både 3-siffriga och 6-siffriga hex
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 till CMYK-konvertering
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normalisera RGB-värden
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Beräkna K (svart)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Hantera ren svart
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Beräkna 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        // Exempelanvändning
60        int r = 75, g = 0, b = 130;  // Lila
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

Referenser och vidare läsning

W3C CSS Color Module Level 4 - Officiell webbfärgspecifikation
WCAG 2.1 Kontrastiktlinjer - Tillgänglighetsstandarder för färgkontrast
WebAIM Kontrastkontroll - Testa färgkontrastförhållanden
ICC Färgprofilstandarder - Teknisk specifikation för färgkonverteringar
MDN Web Docs: CSS Färgvärden - Omfattande guide till webbfärgformat

Färgväljare - Konvertera RGB, Hex, CMYK & HSV färgkoder

Färgväljare

RGB (0-255)

CMYK (0-100)

Färgväljare

Dokumentation

Vad Du Kan Göra Med Denna Färgväljare

Förstå färgmodeller

RGB (Röd, Grön, Blå)

Hexadecimal (Hex)

CMYK (Cyan, Magenta, Gul, Svart)

HSV (Nyans, Mättnad, Värde)

Färgkonverteringsformler

RGB till Hex-konvertering

RGB till CMYK-konvertering

RGB till HSV-konvertering

Referenser och vidare läsning

Färgpalettgenerator - Skapa harmoniska färgscheman

CSS-egenskapsgenerator - Gradienter, Skuggor & Kanter

Gratis QR-kodgenerator - Skapa skanningsbara QR-koder direkt

Talbasskonverterare: Binär, Hex, Decimal & Oktal

Kaninfärgsprediktor – Beräkna Baby Kanins Pälsfärger

Binär till Decimal Omvandlare | Gratis Online Verktyg

PX till REM till EM-omvandlare – Gratis CSS-enhetsräknare

Base64 bildavkodare | Avkoda & Förhandsgranska bilder online

Blekmedelsutspädningsräknare: Exakta proportioner för säker rengöring

Pixel till tum-konverterare - Gratis DPI-kalkylator (2025)

Bit- och bytlängdskalkylator - Gratis verktyg för datastorlek

Gratis Kodformaterare: Förbättra JavaScript, Python, HTML och mer