Vienkāršs un lietotājam draudzīgs krāsu izvēles rīks

Ievads

Krāsu izvēles rīks ir intuitīva, viegli lietojama lietotne, kas izstrādāta, lai palīdzētu lietotājiem izvēlēties, vizualizēt un konvertēt krāsas dažādos krāsu formātos. Neatkarīgi no tā, vai esat tīmekļa dizainers, kurš izveido krāsu shēmu, digitālais mākslinieks, kurš meklē ideālo toni, vai izstrādātājs, kurš īsteno lietotāja saskarni, šis krāsu izvēles rīks nodrošina vienkāršu veidu, kā strādāt ar krāsām RGB, heksadecimālajā, CMYK un HSV formātos. Ar interaktīvo krāsu spektru, spilgtuma slīdni un precīzām ievades iespējām jūs varat ātri atrast, pielāgot un kopēt krāsu vērtības saviem projektiem.

Krāsu modeļu izpratne

Pirms pievēršanās krāsu izvēles rīka lietošanai, ir noderīgi saprast dažādus krāsu modeļus, kurus tas atbalsta:

RGB (Sarkans, Zaļš, Zils)

RGB ir aditīvs krāsu modelis, kurā sarkana, zaļa un zila gaisma tiek apvienota dažādos veidos, lai reproducētu plašu krāsu spektru. Digitālajās lietojumprogrammās:

Katrs komponents (R, G, B) svārstās no 0 līdz 255
RGB(255, 0, 0) pārstāv tīru sarkano
RGB(0, 255, 0) pārstāv tīro zaļo
RGB(0, 0, 255) pārstāv tīro zilo
RGB(255, 255, 255) pārstāv baltu
RGB(0, 0, 0) pārstāv melnu

RGB modelis ir tieši saistīts ar to, kā krāsas tiek attēlotas ekrānos, padarot to par galveno izvēli digitālajā dizainā.

Heksadecimālais (Hex)

Heksadecimālie krāsu kodi ir veids, kā attēlot RGB krāsas, izmantojot bāzes-16 skaitļu sistēmu:

Heksadecimālā krāsa sākas ar mārciņas zīmi (#), kam seko seši rakstzīmes
Pirmais pāris pārstāv sarkano, otrais zaļo, un trešais zilo
Katrs pāris svārstās no 00 līdz FF (0-255 decimālajā)
#FF0000 pārstāv tīru sarkano
#00FF00 pārstāv tīro zaļo
#0000FF pārstāv tīro zilo
Ir pieejama īsāka notācija noteiktām krāsām (piemēram, #F00 sarkanajam)

Hex kodi ir plaši izmantoti tīmekļa izstrādē (CSS, HTML) un digitālā dizaina lietojumprogrammās.

CMYK (Ciana, Magenta, Dzeltena, Key/Melns)

CMYK ir subtraktīvs krāsu modelis, ko galvenokārt izmanto krāsu drukāšanā:

Katrs komponents svārstās no 0% līdz 100%
CMYK(0, 100, 100, 0) pārstāv tīru sarkano
CMYK(100, 0, 100, 0) pārstāv tīro zaļo
CMYK(100, 100, 0, 0) pārstāv tīro zilo
CMYK(0, 0, 0, 100) pārstāv melnu
CMYK(0, 0, 0, 0) pārstāv baltu (papīra krāsu)

Lai gan galvenokārt tiek izmantots drukāšanai, CMYK vērtību izpratne var būt noderīga, veidojot saturu, kas galu galā tiks drukāts.

HSV (Krāsa, Piesātinājums, Vērtība)

HSV attēlo krāsas šādos aspektos:

Krāsa: Krāsas veids (sarkans, dzeltenais, zaļais utt.), ko mēra grādos (0-360°)
Piesātinājums: Krāsas intensitāte vai tīrība (0-100%)
Vērtība: Krāsas spilgtums (0-100%)

HSV ir īpaši noderīgs krāsu izvēlei, jo tas atdala krāsas izvēli (krāsa) no tās intensitātes (piesātinājums) un spilgtuma (vērtība), padarot krāsu pielāgošanu intuitīvāku.

Krāsu konversijas formulas

Krāsu izvēles rīks automātiski konvertē starp dažādiem krāsu modeļiem, izmantojot šīs matemātiskās formulas:

RGB uz Hex konversija

Lai konvertētu RGB uz heksadecimālo:

Konvertējiet katru RGB komponentu (0-255) uz divciparu heksadecimālo skaitli
Apvienojiet trīs heksadecimālās vērtības ar # prefiksu

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

Kur toHex() konvertē decimālo skaitli uz tā heksadecimālo pārstāvību.

RGB uz CMYK konversija

Konversija no RGB uz CMYK ietver šādas darbības:

Normalizējiet RGB vērtības diapazonā 0-1
Aprēķiniet melno atslēgu (K) komponentu
Aprēķiniet C, M un Y, pamatojoties uz 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 uz HSV konversija

Konvertējot RGB uz 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}$

Krāsas (H) aprēķināšanai:

1// RGB uz Hex konversija
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 uz RGB konversija
12function hexToRgb(hex) {
13  // Noņem # ja klāt
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Apstrādā gan 3 ciparu, gan 6 ciparu 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 uz CMYK konversija
29function rgbToCmyk(r, g, b) {
30  // Normalizēt RGB vērtības
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Aprēķināt K (melno)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Apstrādāt tīru melnu
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Aprēķināt 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// Piemēra izmantošana
57const rgb = { r: 255, g: 0, b: 0 }; // Tīrs sarkanais
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# RGB uz Hex konversija
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Hex uz RGB konversija
6def hex_to_rgb(hex_color):
7    # Noņem # ja klāt
8    hex_color = hex_color.lstrip('#')
9    
10    # Apstrādā gan 3 ciparu, gan 6 ciparu 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 uz CMYK konversija
21def rgb_to_cmyk(r, g, b):
22    # Normalizēt RGB vērtības
23    r_norm = r / 255.0
24    g_norm = g / 255.0
25    b_norm = b / 255.0
26    
27    # Aprēķināt K (melno)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Apstrādāt tīru melnu
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Aprēķināt 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# Piemēra izmantošana
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Debeszils
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 uz Hex konversija
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 uz RGB konversija
8    public static int[] hexToRgb(String hexColor) {
9        // Noņem # ja klāt
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Apstrādā gan 3 ciparu, gan 6 ciparu 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 uz CMYK konversija
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normalizēt RGB vērtības
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Aprēķināt K (melno)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Apstrādāt tīru melnu
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Aprēķināt 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        // Piemēra izmantošana
60        int r = 75, g = 0, b = 130;  // Purpurs
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

Atsauces

Agoston, M. K. (2013). Datorgrafika un ģeometriskā modelēšana: īstenošana un algoritmi. Springer Science & Business Media.
Adobe Systems. (2000). Adobe RGB (1998) krāsu attēlošana. Adobe Systems Incorporated.
Fairchild, M. D. (2013). Krāsu izskata modeļi. John Wiley & Sons.
Hunt, R. W. G., & Pointer, M. R. (2011). Krāsas mērīšana. John Wiley & Sons.
Poynton, C. (2012). Digitālais video un HD: algoritmi un saskarnes. Elsevier.
W3C. (2018). CSS krāsu moduļa līmenis 4. W3C darba projekts. Iegūts no https://www.w3.org/TR/css-color-4/
Tīmekļa satura pieejamības vadlīnijas (WCAG) 2.1. (2018). Iegūts no https://www.w3.org/TR/WCAG21/
Starptautiskā krāsu komisija. (2004). Specifikācija ICC.1:2004-10 (profilu versija 4.2.0.0). Iegūts no http://www.color.org/specification/ICC1v42_2006-05.pdf

Izmēģiniet mūsu krāsu izvēles rīku jau šodien!

Gatavi atrast ideālo krāsu savam projektam? Mūsu lietotājam draudzīgais krāsu izvēles rīks padara vieglu krāsu izvēli, pielāgošanu un konvertēšanu starp dažādiem formātiem. Neatkarīgi no tā, vai jūs projektējat tīmekļa vietni, veidojat digitālo mākslu vai plānojat drukas materiālus, mūsu rīks nodrošina precizitāti un elastību, kas jums nepieciešama.

Sāciet eksperimentēt ar krāsām tagad un paceliet savus dizainus jaunā līmenī!

Whiz Tools

Vienkāršs krāsu izvēlētājs: izvēlieties un kopējiet RGB, Hex, CMYK krāsu vērtības

Krāsu izvēlne

RGB (0-255)

CMYK (0-100)