Színválasztó eszköz - RGB, Hex, CMYK és HSV színkódok konvertálása

Mit tehetsz ezzel a színválasztóval

Szüksége van a tökéletes árnyalatra a projektjéhez? Ez a színválasztó lehetővé teszi, hogy azonnal kiválasszon, előnézzen és konvertáljon színeket RGB, Hex, CMYK és HSV formátumok között. Akár weboldalt kódol, logót tervez vagy nyomdai fájlokat készít elő, megtalálja a pontos színértékeket – találgatás nélkül, eszközök közötti váltogatás nélkül.

Kattintson bárhová a színspektrumban egy árnyalat kiválasztásához, állítsa be a fényerőt egy csúszkával, vagy adjon meg pontosan értékeket közvetlenül. Minden formátum valós időben frissül, és egy kattintással másolhatja bármely színkódot.

Színmodellek megértése

Különböző projektek különböző színformátumokat igényelnek. Íme, hogy mit csinál mindegyik és mikor érdemes használni:

RGB (Vörös, Zöld, Kék)

Az RGB úgy működik, hogy vörös, zöld és kék fényt kever - ugyanúgy, ahogy a képernyő most megjeleníti a színeket. Minden komponens 0-tól 255-ig terjed:

• RGB(255, 0, 0) = tiszta vörös
• RGB(0, 255, 0) = tiszta zöld
• RGB(0, 0, 255) = tiszta kék
• RGB(255, 255, 255) = fehér
• RGB(0, 0, 0) = fekete

Mikor használjuk az RGB-t: Bármilyen digitális munkánál - weboldalak, mobilalkalmazások, videószerkesztés vagy képernyőalapú grafika. Ez a kijelzők anyanyelve, ezért támogatják az eszközök mint a CSS közvetlenül az rgb() és rgba() funkciókat. A W3C CSS Color Module specifikáció szerint az RGB a webes szabványok alapvető színmodellje.

Hexadecimális (Hex)

A hex kódok egyszerűen RGB értékek, amelyeket 10-es helyett 16-os alapon írunk. Egy hex szín így néz ki: #FF5733, ahol:

• A # szimbólum jelöli, hogy hex kód
• Első két karakter = vörös (00-FF)
• Középső két karakter = zöld (00-FF)
• Utolsó két karakter = kék (00-FF)
• #FF0000 = vörös, #00FF00 = zöld, #0000FF = kék

Néha látni fogsz 3 karakteres rövidítést is, mint #F00 a #FF0000 helyett - ez akkor működik, amikor minden színcsatorna ugyanazt a számjegyet ismétli.

Mikor használjuk a Hex-et: Webfejlesztés a fő felhasználási terület. A CSS mindig támogatta a hex jelölést, és a legtöbb fejlesztő gyorsabbnak találja begépelni, mint az rgb()-t. Egy gyakori buktató: a # szimbólum elfelejtése csendben törhet stílusokat, mivel a böngészők nem ismerik fel érvényes színként.

CMYK (Cián, Magenta, Sárga, Kulcs/Fekete)

A CMYK a nyomtatók által használt színmodell. Az RGB-vel ellentétben (amely fényt ad hozzá), a CMYK levonja azt - festékeket keverve fehér papíron színek létrehozásához:

• Minden komponens 0%-tól 100%-ig terjed
• CMYK(0, 100, 100, 0) = vörös
• CMYK(100, 0, 100, 0) = zöld
• CMYK(0, 0, 0, 100) = tiszta fekete festék
• CMYK(0, 0, 0, 0) = nincs festék (fehér papír látszik át)

Mikor használjuk a CMYK-t: Nyomtatáshoz tervezett anyagoknál - névjegykártyák, szórólapok, magazinok, csomagolás. Íme a valóság: sok élénk RGB szín egyszerűen nem reprodukálható CMYK festékekkel. Az a ragyogó elektromos kék, amit a képernyőn látsz? Nyomtatva halványabb lesz. A profi tervezők mindig előnézik a CMYK konverziókat, mielőtt fájlokat küldenének nyomtatóba, hogy elkerüljék a meglepetéseket.

HSV (Árnyalat, Telítettség, Érték)

A HSV a színt három intuitív komponensre bontja:

• Árnyalat: Melyik színcsalád (0-360°) - 0° a vörös, 120° a zöld, 240° a kék
• Telítettség: Mennyire élénk vagy szürke (0-100%) - 0% szürkeárnyalatos, 100% teljesen telített
• Érték: Mennyire világos vagy sötét (0-100%) - 0% fekete, 100% teljes fényerősség

Miért fontos a HSV: Úgy illeszkedik, ahogy az emberek természetesen gondolkodnak a színekről. Sötétebb kéket akarsz? Csökkentsd az értéket. Kevésbé intenzív kéket akarsz? Csökkentsd a telítettséget. Ez teszi a HSV-t ideálissá az interaktív színválasztókhoz, ahol kiválasztasz egy árnyalatot a spektrumon és fényerősséget állítasz csúszkával.

Színkonverziós képletek

A színválasztó automatikusan konvertál különböző színmodelleket ezeknek a matematikai képleteknek a segítségével:

RGB-ből Hex konverzió

RGB-ből hexadecimálisra konvertáláshoz:

1. Konvertálja mindhárom RGB komponenst (0-255) kétjegyű hexadecimális számmá
2. Fűzze össze a három hexadecimális értéket # előtaggal

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

Ahol toHex() decimális számot konvertál hexadecimális ábrázolássá.

RGB-ből CMYK konverzió

Az RGB-ből CMYK-ba konvertálás ezeket a lépéseket foglalja magában:

1. RGB értékek normalizálása 0-1 tartományba
2. Fekete kulcs (K) komponens kiszámítása
3. C, M és Y kiszámítása K alapján

$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-ből HSV konverzió

RGB konvertálása HSV-be:

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

Árnyalat (H) esetén:

undefined

1// RGB-ből Hex-be konvertálás
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-ből RGB-be konvertálás
12function hexToRgb(hex) {
13  // # eltávolítása, ha jelen van
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // 3 és 6 jegyű hex kezelése
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-ből CMYK-ba konvertálás
29function rgbToCmyk(r, g, b) {
30  // RGB értékek normalizálása
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // K (fekete) kiszámítása
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Teljesen fekete kezelése
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // C, M, Y kiszámítása
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// Példa használat
57const rgb = { r: 255, g: 0, b: 0 }; // Tiszta piros
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# RGB-ből Hex-be konvertálás
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Hex-ből RGB-be konvertálás
6def hex_to_rgb(hex_color):
7    # # eltávolítása, ha jelen van
8    hex_color = hex_color.lstrip('#')
9    
10    # 3 és 6 jegyű hex kezelése
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-ből CMYK-ba konvertálás
21def rgb_to_cmyk(r, g, b):
22    # RGB értékek normalizálása
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # K (fekete) kiszámítása
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Teljesen fekete kezelése
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # C, M, Y kiszámítása
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# Példa használat
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Égszínkék
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-ből Hex-be konvertálás
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-ből RGB-be konvertálás
8    public static int[] hexToRgb(String hexColor) {
9        // # eltávolítása, ha jelen van
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // 3 és 6 jegyű hex kezelése
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-ből CMYK-ba konvertálás
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // RGB értékek normalizálása
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // K (fekete) kiszámítása
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Teljesen fekete kezelése
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // C, M, Y kiszámítása
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        // Példa használat
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

Hivatkozások és további olvasmányok

• W3C CSS Szín Modul 4. szint - Hivatalos webes színspecifikáció
• WCAG 2.1 Kontraszt Irányelvek - Hozzáférhetőségi szabványok színkontraszthoz
• WebAIM Kontraszt Ellenőrző - Színkontraszt arányok tesztelése
• ICC Színprofil Szabványok - Technikai specifikáció színátalakításokhoz
• MDN Web Docs: CSS Színértékek - Átfogó útmutató webes színformátumokhoz