Värvivalija tööriist - RGB, Hex, CMYK ja HSV värvikoodide teisendamine

Mida saad selle värvivalijaga teha

Vajad projekti jaoks täpset tooni? See värvivalija võimaldab sul valida, eelvaadata ja teisendada värve RGB, Hex, CMYK ja HSV vormingute vahel koheselt. Olgu sul vaja veebilehte kodeerida, logo kujundada või faile trükiks ette valmistada, leiad sa kindlasti täpsed värviväärtused – ilma arvamise ja erinevate tööriistade vahel liikumiseta.

Klõpsa värvispektril, et valida toon, reguleeri heledust liuguri abil või sisesta täpsed väärtused otse. Iga vorming uueneb reaalajas ning saad värvikoodi kopeerida ühe klõpsuga.

Värvimudelite mõistmine

Erinevad projektid vajavad erinevaid värviformaate. Siin on selgitus, mida iga mudel teeb ja millal seda kasutada:

RGB (Punane, Roheline, Sinine)

RGB toimib punase, rohelise ja sinise valguse segamisel - samal viisil nagu teie ekraan praegu värve kuvab. Iga komponent ulatub 0-st 255-ni:

RGB(255, 0, 0) = puhas punane
RGB(0, 255, 0) = puhas roheline
RGB(0, 0, 255) = puhas sinine
RGB(255, 255, 255) = valge
RGB(0, 0, 0) = must

Millal kasutada RGB-d: Mis tahes digitaalses töös - veebilehed, mobiilirakendused, videotöötlus või ekraanipõhised graafika. See on ekraanide põhikeel, mispärast tööriistad nagu CSS toetavad otse rgb() ja rgba() funktsioone. Vastavalt W3C CSS värvimoduli spetsifikatsioonile, on RGB veebi standardite aluseks olev värvimudeL.

Kuueteistkümnendsüsteem (Hex)

Hex-koodid on lihtsalt RGB väärtused, kirjutatud baasis 16 asemel baasis 10. Hex-värv näeb välja nagu #FF5733, kus:

# sümbol tähistab seda hex-koodina
Esimesed kaks märki = punane (00-FF)
Keskmised kaks = roheline (00-FF)
Viimased kaks = sinine (00-FF)
#FF0000 = punane, #00FF00 = roheline, #0000FF = sinine

Mõnikord näete 3-märgilist lühikest versiooni nagu #F00 asemel #FF0000 - see toimib, kui iga värvi kanal kordab sama numbrit.

Millal kasutada Hex-i: Peamine kasutuskoht on veebiarendus. CSS on alati toetanud hex-notatsiooni ja enamik arendajaid leiab selle olevat kiiremini sisestatava kui rgb(). Levinud komistuskivi: # sümboli unustamine võib stiilid vaikselt rikkuda, kuna brauserid ei tunne seda värvi kehtiva värvina.

CMYK (Tsüaan, Magenta, Kollane, Key/Must)

CMYK on värvimudeL, mida kasutavad printerid. Erinevalt RGB-st (mis lisab valgust), CMYK seda lahutab - segades tinte valgel paberil värve luues:

Iga komponent ulatub 0%-st 100%-ni
CMYK(0, 100, 100, 0) = punane
CMYK(100, 0, 100, 0) = roheline
CMYK(0, 0, 0, 100) = puhas must tint
CMYK(0, 0, 0, 0) = tinti pole (valge paber paistab läbi)

Millal kasutada CMYK-d: Trükiste kujundamisel - visiitkaardid, brošüürid, ajakirjad, pakendid. Tegelikkus on selline: paljud eredad RGB värvid lihtsalt ei ole CMYK tintidega reprodutseeritavad. See ere elektrisinine, mida ekraanil näete? See näeb trükituna tuhmim välja. Professionaalsed disainerid alati eelvaatavad CMYK konversioone enne failide printerisse saatmist, et vältida üllatusi.

HSV (Toon, Küllastus, Väärtus)

HSV jagab värvi kolmeks intuitiivseks komponendiks:

Toon: Milline värvi perekond (0-360°) - 0° on punane, 120° on roheline, 240° on sinine
Küllastus: Kui elav või hall (0-100%) - 0% on hallskaala, 100% on täielikult küllastunud
Väärtus: Kui hele või tume (0-100%) - 0% on must, 100% on täielik heledus

Miks HSV oluline: See vastab sellele, kuidas inimesed loomulikult värvimõtlemist tajuvad. Tahate tumemat sinist? Vähendage väärtust. Tahate vähem intensiivset sinist? Vähendage küllastust. See teebki HSV ideaalseks interaktiivseks värviValijaks, kus valite spektrist tooni ja reguleerite heledust liuguri abil.

Värvikonversiooni valemid

Värvivalija teisendab automaatselt erinevate värvimudeli vahel, kasutades neid matemaatilisi valemeid:

RGB-st heksadetsimaaliks teisendamine

RGB-väärtuste heksadetsimaaliks teisendamiseks:

Teisendage iga RGB-komponent (0-255) kahekohalise heksadetsimaalarvuks
Ühendage kolm heksadetsimaalväärtust # eesliitega

$\text{Heks} = \text{\#} + \text{teisendaHeks}(R) + \text{teisendaHeks}(G) + \text{teisendaHeks}(B)$

Kus teisendaHeks() teisendab kümnendmärgi tema heksadetsimaalvasteks.

RGB-st CMYK-sse teisendamine

Teisendamine RGB-st CMYK-sse hõlmab järgmisi samme:

Normaliseerige RGB-väärtused vahemikku 0-1
Arvutage must võti (K)
Arvutage C, M ja Y vastavalt K-le

$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-sse teisendamine

RGB-väärtuste teisendamine HSV-sse:

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

Toonile (H):

1// RGB-st heksadetsimaalseks teisendamine
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// Heksadetsimaalsest RGB-sse teisendamine
12function hexToRgb(hex) {
13  // Eemalda # kui see on olemas
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Käsitle nii 3-kohalisi kui 6-kohalisi heksadetsimaalväärtusi
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-sse teisendamine
29function rgbToCmyk(r, g, b) {
30  // Normaliseeri RGB väärtused
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Arvuta K (must)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Käsitle puhast musta
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Arvuta 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// Näidiskasutus
57const rgb = { r: 255, g: 0, b: 0 }; // Puhas punane
58console.log(`Heks: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# RGB-st heksadetsimaalseks teisendamine
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Heksadetsimaalsest RGB-sse teisendamine
6def hex_to_rgb(hex_color):
7    # Eemalda # kui see on olemas
8    hex_color = hex_color.lstrip('#')
9    
10    # Käsitle nii 3-kohalisi kui 6-kohalisi heksadetsimaalväärtusi
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-sse teisendamine
21def rgb_to_cmyk(r, g, b):
22    # Normaliseeri RGB väärtused
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # Arvuta K (must)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Käsitle puhast musta
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Arvuta 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# Näidiskasutus
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Taevassinine
48hex_color = rgb_to_hex(rgb['r'], rgb['g'], rgb['b'])
49cmyk = rgb_to_cmyk(rgb['r'], rgb['g'], rgb['b'])
50
51print(f"Heks: {hex_color}")
52print(f"CMYK: C={cmyk['c']}%, M={cmyk['m']}%, Y={cmyk['y']}%, K={cmyk['k']}%")
53

1public class VärviTeisendaja {
2    // RGB-st heksadetsimaalseks teisendamine
3    public static String rgbToHex(int r, int g, int b) {
4        return String.format("#%02x%02x%02x", r, g, b);
5    }
6    
7    // Heksadetsimaalsest RGB-sse teisendamine
8    public static int[] hexToRgb(String hexColor) {
9        // Eemalda # kui see on olemas
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Käsitle nii 3-kohalisi kui 6-kohalisi heksadetsimaalväärtusi
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-sse teisendamine
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normaliseeri RGB väärtused
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Arvuta K (must)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Käsitle puhast musta
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Arvuta 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        // Näidiskasutus
60        int r = 75, g = 0, b = 130;  // Lilla
61        String hexColor = rgbToHex(r, g, b);
62        double[] cmyk = rgbToCmyk(r, g, b);
63        
64        System.out.println("Heks: " + 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

Viited ja edasine lugemine

W3C CSS värvi moodul tase 4 - Ametlik veebivärvi spetsifikatsioon
WCAG 2.1 kontrastsuse juhised - Ligipääsetavuse standardid värvi kontrastsusele
WebAIM kontrastsuse kontroller - Testrige värvi kontrastsuse suhteid
ICC värviprofiili standardid - Tehniline spetsifikatsioon värvikonversioonideks
MDN veebidokumendid: CSS värvi väärtused - Põhjalik juhend veebivärvi vormingutele

Värvivalija tööriist - RGB, Hex, CMYK ja HSV värvikoodide teisendamine

Värvi Valija

RGB (0-255)

CMYK (0-100)

Värvi Valija

Dokumentatsioon

Mida saad selle värvivalijaga teha

Värvimudelite mõistmine

RGB (Punane, Roheline, Sinine)

Kuueteistkümnendsüsteem (Hex)

CMYK (Tsüaan, Magenta, Kollane, Key/Must)

HSV (Toon, Küllastus, Väärtus)

Värvikonversiooni valemid

RGB-st heksadetsimaaliks teisendamine

RGB-st CMYK-sse teisendamine

RGB-st HSV-sse teisendamine

Viited ja edasine lugemine

Seotud tööriistad

Värvivaliku Generaator - Looge Harmoonilised Värvikomplektid

CSS-omaduste generaator - Gradiendid, Varjud & Ääred

Tasuta QR-koodi generaator - Loo skaneeritavad QR-koodid koheselt

Arvusüsteemi teisendaja: Kahendsüsteem, Kuueteistkümnendsüsteem, Kümnendik & Kaheksandsüsteem

Küüliku Värvi Ennustaja – Arvutage Vastsündinud Küüliku Kasukat

Kahendsüsteemist kümnendarvuks teisendaja | Tasuta veebiriist

PX-st REM-i ja EM-i teisendaja – Tasuta CSS-i ühikute kalkulaator

Base64 pildi dekodeerija | Dekodeeri ja eelvaata pilte veebis

Pleegitusaine lahjendamise kalkulaator: Täpsed suhted ohutuks puhastamiseks

Piksli kuni tolli teisendaja - Tasuta DPI kalkulaator (2025)

Biti ja baidi pikkuse kalkulaator - Tasuta andmemahu tööriist

Tasuta Koodi Vormindaja: Kaunista JavaScript, Python, HTML ja muud