כלי בורר צבעים פשוט וידידותי למשתמש

מבוא

כלי בורר הצבעים הוא יישום אינטואיטיבי וקל לשימוש, שנועד לסייע למשתמשים לבחור, להמחיש ולהמיר צבעים במגוון פורמטים. בין אם אתה מעצב אתרים יוצר סכמת צבעים, אמן דיגיטלי המחפש את הגוון המושלם, או מפתח המיישם ממשק משתמש, בורר הצבעים הזה מספק דרך פשוטה לעבוד עם צבעים בפורמטים RGB, הקסדצימלי, CMYK ו-HSV. עם ספקטרום הצבעים האינטראקטיבי שלו, מחוון הבהירות ואופציות הקלט המדויקות, תוכל במהירות למצוא, להתאים ולשכפל ערכי צבע עבור הפרויקטים שלך.

הבנת מודלי צבע

לפני שנ dive לתוך איך להשתמש בבורר הצבעים, מועיל להבין את מודלי הצבע השונים שהוא תומך בהם:

RGB (אדום, ירוק, כחול)

RGB הוא מודל צבעים מצטבר שבו אור אדום, ירוק וכחול משולבים בדרכים שונות כדי לשחזר מגוון רחב של צבעים. ביישומים דיגיטליים:

כל רכיב (R, G, B) נע בין 0 ל-255
RGB(255, 0, 0) מייצג אדום טהור
RGB(0, 255, 0) מייצג ירוק טהור
RGB(0, 0, 255) מייצג כחול טהור
RGB(255, 255, 255) מייצג לבן
RGB(0, 0, 0) מייצג שחור

מודל ה-RGB קשור ישירות לאופן שבו צבעים מוצגים על מסכים, מה שהופך אותו לבחירה העיקרית בעיצוב דיגיטלי.

הקסדצימלי (Hex)

קודי צבע הקסדצימליים הם דרך לייצג צבעי RGB באמצעות מערכת מספרים בסיס 16:

צבע הקסדצימלי מתחיל בסימן פאוּנד (#) ואחריו שישה תווים
הזוג הראשון מייצג אדום, השני ירוק, והשלישי כחול
כל זוג נע בין 00 ל-FF (0-255 בעשרוני)
#FF0000 מייצג אדום טהור
#00FF00 מייצג ירוק טהור
#0000FF מייצג כחול טהור
ישנה אפשרות לכתיב מקוצר עבור צבעים מסוימים (למשל, #F00 עבור אדום)

קודי הקסדצימליים בשימוש נרחב בפיתוח אתרים (CSS, HTML) וביישומי עיצוב דיגיטליים.

CMYK (ציאן, מגנטה, צהוב, מפתח/שחור)

CMYK הוא מודל צבעים סופג המשמש בעיקר בהדפסה צבעונית:

כל רכיב נע בין 0% ל-100%
CMYK(0, 100, 100, 0) מייצג אדום טהור
CMYK(100, 0, 100, 0) מייצג ירוק טהור
CMYK(100, 100, 0, 0) מייצג כחול טהור
CMYK(0, 0, 0, 100) מייצג שחור
CMYK(0, 0, 0, 0) מייצג לבן (צבע הנייר)

בעוד שהוא משמש בעיקר להדפסה, הבנת ערכי CMYK יכולה להיות מועילה כאשר מעצבים תוכן שיתפסו בסופו של דבר.

HSV (גוֹן, רוֹוַח, ערך)

HSV מייצג צבעים במונחים של:

גוון: סוג הצבע (אדום, צהוב, ירוק וכו'), נמדד במעלות (0-360°)
רוֹוַח: עוצמת או טוהר הצבע (0-100%)
ערך: בהירות הצבע (0-100%)

HSV שימושי במיוחד לבחירת צבעים שכן הוא מפריד בין בחירת צבע (גוֹן) מעוצמתו (רוֹוַח) ובהירות (ערך), מה שמקל יותר על התאמת צבעים.

נוסחאות המרת צבעים

הבורר צבעים ממיר אוטומטית בין מודלי צבע שונים באמצעות נוסחאות מתמטיות אלו:

המרת RGB להקסדצימלי

כדי להמיר RGB להקסדצימלי:

המרת כל רכיב RGB (0-255) למספר הקסדצימלי בן שני תווים
חיבור שלושת הערכים ההקסדצימליים עם קידומת #

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

כאשר toHex() ממיר מספר עשרוני לייצוג ההקסדצימלי שלו.

המרת RGB ל-CMYK

ההמרה מ-RGB ל-CMYK כוללת את הצעדים הבאים:

נורמליזציה של ערכי RGB לטווח 0-1
חישוב רכיב המפתח (K)
חישוב C, M ו-Y בהתבסס על 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 ל-HSV

המרת RGB ל-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}$

לגוֹן (H):

1// המרת RGB להקסדצימלי
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// המרת הקסדצימלי ל-RGB
12function hexToRgb(hex) {
13  // הסרת # אם קיים
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // טיפול גם בהקסדצימליים של 3 תווים וגם של 6 תווים
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
29function rgbToCmyk(r, g, b) {
30  // נורמליזציה של ערכי RGB
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // חישוב K (שחור)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // טיפול בשחור טהור
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // חישוב 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// דוגמת שימוש
57const rgb = { r: 255, g: 0, b: 0 }; // אדום טהור
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# המרת RGB להקסדצימלי
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# המרת הקסדצימלי ל-RGB
6def hex_to_rgb(hex_color):
7    # הסרת # אם קיים
8    hex_color = hex_color.lstrip('#')
9    
10    # טיפול גם בהקסדצימליים של 3 תווים וגם של 6 תווים
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
21def rgb_to_cmyk(r, g, b):
22    # נורמליזציה של ערכי RGB
23    r_norm = r / 255.0
24    g_norm = g / 255.0
25    b_norm = b / 255.0
26    
27    # חישוב K (שחור)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # טיפול בשחור טהור
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # חישוב 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# דוגמת שימוש
47rgb = {'r': 0, 'g': 128, 'b': 255}  # כחול שמיים
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 להקסדצימלי
3    public static String rgbToHex(int r, int g, int b) {
4        return String.format("#%02x%02x%02x", r, g, b);
5    }
6    
7    // המרת הקסדצימלי ל-RGB
8    public static int[] hexToRgb(String hexColor) {
9        // הסרת # אם קיים
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // טיפול גם בהקסדצימליים של 3 תווים וגם של 6 תווים
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
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // נורמליזציה של ערכי RGB
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // חישוב K (שחור)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // טיפול בשחור טהור
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // חישוב 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        // דוגמת שימוש
60        int r = 75, g = 0, b = 130;  // סגול
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

מקורות

אגוסטון, מ. ק. (2013). גרפיקה ממוחשבת ודוגמנות גיאומטרית: יישום ואלגוריתמים. הוצאת ספרים של ספרינגר מדע ועסקים.
Adobe Systems. (2000). הצבע Adobe RGB (1998) בהצגת תמונות. Adobe Systems Incorporated.
פיירצ'יילד, מ. ד. (2013). מודלים להופעת צבעים. ג'ון ויילי ובניו.
האנט, ר. ו. ג., ופוינטר, מ. ר. (2011). מדידת צבע. ג'ון ויילי ובניו.
פוינטון, ק. (2012). וידאו דיגיטלי ו-HD: אלגוריתמים וממשקים. Elsevier.
W3C. (2018). מודול צבע CSS רמה 4. טיוטת עבודה של W3C. נלקח מ https://www.w3.org/TR/css-color-4/
הנחיות נגישות לתוכן האינטרנט (WCAG) 2.1. (2018). נלקח מ https://www.w3.org/TR/WCAG21/
הקונסורציום הבינלאומי לצבעים. (2004). מפרט ICC.1:2004-10 (גרסה 4.2.0.0 של פרופיל). נלקח מ http://www.color.org/specification/ICC1v42_2006-05.pdf

נסה את בורר הצבעים שלנו היום!

מוכן למצוא את הצבע המושלם עבור הפרויקט שלך? בורר הצבעים הידידותי למשתמש שלנו מקל עליך לבחור, להתאים ולהמיר צבעים בין פורמטים שונים. בין אם אתה מעצב אתר, יוצר אמנות דיגיטלית או מתכנן חומרים להדפסה, הכלי שלנו מספק את הדיוק והגמישות שאתה צריך.

התחל להתנסות עם צבעים עכשיו והקח את העיצובים שלך לרמה הבאה!

Whiz Tools

בוחר צבעים פשוט: בחר והעתק ערכי צבע RGB, Hex, CMYK

בוחר צבע

RGB (0-255)

CMYK (0-100)