Lihtne ja kasutajasõbralik värvivalija tööriist

Sissejuhatus

Värvivalija tööriist on intuitiivne, lihtne kasutada rakendus, mis on loodud aitama kasutajatel valida, visualiseerida ja konverteerida värve erinevates värvi formaatides. Olgu need veebidisainerid, kes loovad värviskeemi, digitaalsed kunstnikud, kes otsivad täiuslikku tooni, või arendajad, kes rakendavad kasutajaliidest, see värvivalija pakub otsekohe võimalust töötada värvidega RGB, heksadesimaalses, CMYK ja HSV formaatides. Oma interaktiivse värvispektri, heledusliuguri ja täpsete sisestusvalikute abil saate kiiresti leida, kohandada ja kopeerida värviväärtusi oma projektide jaoks.

Värvimudelite mõistmine

Enne kui sukelduda värvivalija kasutamise üksikasjadesse, on kasulik mõista erinevaid värvimudeleid, mida see toetab:

RGB (Punane, Roheline, Sinine)

RGB on liitvärvimudel, kus punane, roheline ja sinine valgus segunevad erinevates kombinatsioonides, et toota laia värvide spektrit. Digitaalses rakenduses:

Iga komponent (R, G, B) ulatub vahemikku 0 kuni 255
RGB(255, 0, 0) tähistab puhtaid punaseid
RGB(0, 255, 0) tähistab puhtaid rohelisi
RGB(0, 0, 255) tähistab puhtaid siniseid
RGB(255, 255, 255) tähistab valget
RGB(0, 0, 0) tähistab musta

RGB mudel on otseselt seotud sellega, kuidas värve ekraanidel kuvatakse, muutes selle digitaalse disaini peamiseks valikuks.

Heksadesimaalne (Hex)

Heksadesimaalsed värvikoodid on viis esitada RGB värve, kasutades alusel 16 numbrilist süsteemi:

Heksavärv algab räsimärgiga (#), millele järgneb kuus tähte
Esimene paar tähistab punast, teine roheline ja kolmas sinine
Iga paar ulatub vahemikku 00 kuni FF (0-255 kümnendsüsteemis)
#FF0000 tähistab puhtaid punaseid
#00FF00 tähistab puhtaid rohelisi
#0000FF tähistab puhtaid siniseid
Lühendatud notatsioon on saadaval teatud värvide jaoks (nt #F00 punase jaoks)

Heksakoodid on laialdaselt kasutusel veebiarenduses (CSS, HTML) ja digitaalsetes disainirakendustes.

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

CMYK on alandav värvimudel, mida kasutatakse peamiselt värvilisel printimisel:

Iga komponent ulatub vahemikku 0% kuni 100%
CMYK(0, 100, 100, 0) tähistab puhtaid punaseid
CMYK(100, 0, 100, 0) tähistab puhtaid rohelisi
CMYK(100, 100, 0, 0) tähistab puhtaid siniseid
CMYK(0, 0, 0, 100) tähistab musta
CMYK(0, 0, 0, 0) tähistab valget (paberivärv)

Kuigi seda kasutatakse peamiselt printimiseks, võib CMYK väärtuste mõistmine olla kasulik, kui disainite sisu, mis lõpuks trükitakse.

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

HSV esindab värve järgmiste parameetrite kaudu:

Hue: Värvi tüüp (punane, kollane, roheline jne), mõõdetuna kraadides (0-360°)
Küllastus: Värvi intensiivsus või puhtus (0-100%)
Väärtus: Värvi heledus (0-100%)

HSV on eriti kasulik värvi valimiseks, kuna see eraldab värvi valiku (hue) selle intensiivsusest (küllastus) ja heledusest (väärtus), muutes värvide kohandamise intuitiivsemaks.

Värvide konverteerimise valemid

Värvivalija konverteerib automaatselt erinevate värvimudelite vahel nende matemaatiliste valemite abil:

RGB heksadesimaalseks konverteerimine

RGB heksadesimaalseks konverteerimiseks:

Muutke iga RGB komponent (0-255) kaheks numbriliseks heksadesimaalseks numbriks
Koonduge kolm heksadesimaalset väärtust räsimärgi (#) ees

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

Kus toHex() konverteerib kümnendsüsteemi numbri tema heksadesimaalsele esitusele.

RGB CMYK-ks konverteerimine

RGB-st CMYK-ks konverteerimine hõlmab järgmisi samme:

Normaliseerige RGB väärtused vahemikus 0-1
Arvutage musta võtme (K) komponent
Arvutage C, M ja Y K põhjal

$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 HSV-ks konverteerimine

RGB-st HSV-ks konverteerimine:

$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) jaoks:

1// RGB heksadesimaalseks konverteerimine
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// Heksast RGB-ks konverteerimine
12function hexToRgb(hex) {
13  // Eemaldage # kui see on olemas
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Käsitlege nii 3-kohalisi kui ka 6-kohalisi heksaid
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 CMYK-ks konverteerimine
29function rgbToCmyk(r, g, b) {
30  // Normaliseerige RGB väärtused
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Arvutage K (must)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Käsitlege puhta musta
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Arvutage 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äidis kasutamine
57const rgb = { r: 255, g: 0, b: 0 }; // Puhtad punased
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# RGB heksadesimaalseks konverteerimine
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Heksast RGB-ks konverteerimine
6def hex_to_rgb(hex_color):
7    # Eemaldage # kui see on olemas
8    hex_color = hex_color.lstrip('#')
9    
10    # Käsitlege nii 3-kohalisi kui ka 6-kohalisi heksaid
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 CMYK-ks konverteerimine
21def rgb_to_cmyk(r, g, b):
22    # Normaliseerige RGB väärtused
23    r_norm = r / 255.0
24    g_norm = g / 255.0
25    b_norm = b / 255.0
26    
27    # Arvutage K (must)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Käsitlege puhta musta
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Arvutage 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äidis kasutamine
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Taevasinine
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 heksadesimaalseks konverteerimine
3    public static String rgbToHex(int r, int g, int b) {
4        return String.format("#%02x%02x%02x", r, g, b);
5    }
6    
7    // Heksast RGB-ks konverteerimine
8    public static int[] hexToRgb(String hexColor) {
9        // Eemaldage # kui see on olemas
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Käsitlege nii 3-kohalisi kui ka 6-kohalisi heksaid
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 CMYK-ks konverteerimine
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normaliseerige RGB väärtused
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Arvutage K (must)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Käsitlege puhta musta
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Arvutage 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äidis kasutamine
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("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

Viidatud allikad

Agoston, M. K. (2013). Arvutigraafika ja geomeetrilise modelleerimise: rakendused ja algoritmid. Springer Science & Business Media.
Adobe Systems. (2000). Adobe RGB (1998) värvipiltide kodeerimine. Adobe Systems Incorporated.
Fairchild, M. D. (2013). Värvi välimuse mudelid. John Wiley & Sons.
Hunt, R. W. G., & Pointer, M. R. (2011). Värvi mõõtmine. John Wiley & Sons.
Poynton, C. (2012). Digitaalne video ja HD: algoritmid ja liidesed. Elsevier.
W3C. (2018). CSS Värvi mooduli tase 4. W3C tööversioon. Saadud aadressilt https://www.w3.org/TR/css-color-4/
Veebisisu ligipääsetavuse suunised (WCAG) 2.1. (2018). Saadud aadressilt https://www.w3.org/TR/WCAG21/
Rahvusvaheline värvikonsortsium. (2004). Spetsifikatsioon ICC.1:2004-10 (profiili versioon 4.2.0.0). Saadud aadressilt http://www.color.org/specification/ICC1v42_2006-05.pdf

Proovige meie värvivalijat täna!

Kas olete valmis leidma oma projekti jaoks täiuslikku värvi? Meie kasutajasõbralik värvivalija muudab värvide valimise, kohandamise ja konverteerimise lihtsaks. Olgu need veebisaidi disain, digitaalne kunst või trükimaterjalide planeerimine, meie tööriist pakub vajalikke täpsust ja paindlikkust.

Alustage värvide katsetamist kohe ja viige oma disainid järgmisele tasemele!

Whiz Tools

Lihtne värvivalija: vali ja kopeeri RGB, Hex, CMYK värvikoode

Värvivalija

RGB (0-255)

CMYK (0-100)