Τι Μπορείτε να Κάνετε με Αυτό το Επιλογέα Χρωμάτων

Χρειάζεστε την τέλεια απόχρωση για το έργο σας; Αυτός ο επιλογέας χρωμάτων σάς επιτρέπει να επιλέγετε, να προεπισκοπείτε και να μετατρέπετε χρώματα μεταξύ RGB, Hex, CMYK και HSV μορφών αμέσως. Είτε κωδικοποιείτε μια ιστοσελίδα, σχεδιάζετε ένα λογότυπο ή προετοιμάζετε αρχεία για εκτύπωση, θα βρείτε τις ακριβείς τιμές χρωμάτων που χρειάζεστε - χωρίς μαντέματα, χωρίς εναλλαγή μεταξύ εργαλείων.

Κάντε κλικ οπουδήποτε στο φάσμα χρωμάτων για να επιλέξετε μια απόχρωση, προσαρμόστε τη φωτεινότητα με ένα ολίσθημα ή εισάγετε ακριβείς τιμές απευθείας. Κάθε μορφή ενημερώνεται σε πραγματικό χρόνο, και μπορείτε να αντιγράψετε οποιονδήποτε κωδικό χρώματος με ένα κλικ.

Κατανόηση Χρωματικών Μοντέλων

Διαφορετικά έργα χρειάζονται διαφορετικές χρωματικές μορφές. Δείτε τι κάνει το καθένα και πότε να το χρησιμοποιήσετε:

RGB (Κόκκινο, Πράσινο, Μπλε)

Το RGB λειτουργεί αναμειγνύοντας κόκκινο, πράσινο και μπλε φως—με τον ίδιο τρόπο που η οθόνη σας εμφανίζει χρώματα αυτή τη στιγμή. Κάθε συστατικό κυμαίνεται από 0 έως 255:

RGB(255, 0, 0) = καθαρό κόκκινο
RGB(0, 255, 0) = καθαρό πράσινο
RGB(0, 0, 255) = καθαρό μπλε
RGB(255, 255, 255) = λευκό
RGB(0, 0, 0) = μαύρο

Πότε να χρησιμοποιείτε το RGB: Σε οποιαδήποτε ψηφιακή εργασία—ιστότοποι, εφαρμογές για κινητά, επεξεργασία βίντεο ή γραφικά με βάση την οθόνη. Είναι η εγγενής γλώσσα των οθονών, γι' αυτό εργαλεία όπως το CSS υποστηρίζουν απευθείας τις συναρτήσεις rgb() και rgba(). Σύμφωνα με την προδιαγραφή του W3C CSS Color Module, το RGB είναι το θεμελιώδες χρωματικό μοντέλο για τα πρότυπα του διαδικτύου.

Δεκαεξαδικό (Hex)

Οι κωδικοί Hex είναι απλώς τιμές RGB γραμμένες στο δεκαεξαδικό σύστημα αντί του δεκαδικού. Ένα χρώμα hex μοιάζει με #FF5733, όπου:

Το σύμβολο # το σημαδεύει ως κωδικό hex
Πρώτοι δύο χαρακτήρες = κόκκινο (00-FF)
Μεσαίοι δύο = πράσινο (00-FF)
Τελευταίοι δύο = μπλε (00-FF)
#FF0000 = κόκκινο, #00FF00 = πράσινο, #0000FF = μπλε

Μερικές φορές θα δείτε συντόμευση 3 χαρακτήρων όπως #F00 αντί του #FF0000—αυτό λειτουργεί όταν κάθε κανάλι χρώματος επαναλαμβάνει το ίδιο ψηφίο.

Πότε να χρησιμοποιείτε το Hex: Η ανάπτυξη ιστού είναι η κύρια περίπτωση χρήσης. Το CSS πάντα υποστήριζε την δεκαεξαδική σημείωση, και οι περισσότεροι προγραμματιστές βρίσκουν ότι είναι πιο γρήγορο να πληκτρολογήσουν από το rgb(). Μια κοινή παγίδα: να ξεχάσετε το σύμβολο # θα σπάσει τα στυλ σας σιωπηλά, καθώς οι φυλλομετρητές δεν θα το αναγνωρίσουν ως έγκυρο χρώμα.

CMYK (Κυανό, Ματζέντα, Κίτρινο, Κλειδί/Μαύρο)

Το CMYK είναι το χρωματικό μοντέλο που χρησιμοποιούν οι εκτυπωτές. Σε αντίθεση με το RGB (που προσθέτει φως), το CMYK το αφαιρεί—αναμειγνύοντας μελάνια σε λευκό χαρτί για να δημιουργήσει χρώματα:

Κάθε συστατικό κυμαίνεται από 0% έως 100%
CMYK(0, 100, 100, 0) = κόκκινο
CMYK(100, 0, 100, 0) = πράσινο
CMYK(0, 0, 0, 100) = καθαρό μαύρο μελάνι
CMYK(0, 0, 0, 0) = καθόλου μελάνι (φαίνεται το λευκό χαρτί)

Πότε να χρησιμοποιείτε το CMYK: Σχεδιάζοντας για εκτύπωση—επαγγελματικές κάρτες, φυλλάδια, περιοδικά, συσκευασίες. Η πραγματικότητα είναι ότι πολλά ζωντανά χρώματα RGB απλά δεν μπορούν να αναπαραχθούν με μελάνια CMYK. Εκείνο το λαμπρό ηλεκτρικό μπλε που βλέπετε στην οθόνη; Θα φαίνεται πιο θαμπό όταν εκτυπωθεί. Οι επαγγελματίες σχεδιαστές πάντα προεπισκοπούν τις μετατροπές CMYK πριν στείλουν αρχεία στον εκτυπωτή για να αποφύγουν εκπλήξεις.

HSV (Απόχρωση, Κορεσμός, Τιμή)

Το HSV διασπά το χρώμα σε τρία διαισθητικά συστατικά:

Απόχρωση: Ποια οικογένεια χρωμάτων (0-360°)—0° είναι κόκκινο, 120° είναι πράσινο, 240° είναι μπλε
Κορεσμός: Πόσο ζωντανό ή γκρι (0-100%)—0% είναι κλίμακα του γκρι, 100% είναι πλήρως κορεσμένο
Τιμή: Πόσο φωτεινό ή σκούρο (0-100%)—0% είναι μαύρο, 100% είναι πλήρης φωτεινότητα

Γιατί το HSV έχει σημασία: Ταιριάζει με τον τρόπο που οι άνθρωποι σκέφτονται φυσικά το χρώμα. Θέλετε ένα πιο σκούρο μπλε; Μειώστε την τιμή. Θέλετε ένα λιγότερο έντονο μπλε; Μειώστε τον κορεσμό. Αυτό κάνει το HSV ιδανικό για διαδραστικές επιλογές χρωμάτων όπως αυτή, όπου επιλέγετε μια απόχρωση στο φάσμα και προσαρμόζετε τη φωτεινότητα με ένα ρυθμιστικό.

Μετατροπή Χρωμάτων

Το εργαλείο επιλογής χρωμάτων μετατρέπει αυτόματα μεταξύ διαφορετικών μοντέλων χρωμάτων χρησιμοποιώντας αυτούς τους μαθηματικούς τύπους:

Μετατροπή RGB σε Hex

Για να μετατρέψετε 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 σε Hex
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 σε RGB
12function hexToRgb(hex) {
13  // Αφαίρεση # εάν υπάρχει
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Χειρισμός hex 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 σε Hex
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Μετατροπή Hex σε RGB
6def hex_to_rgb(hex_color):
7    # Αφαίρεση # εάν υπάρχει
8    hex_color = hex_color.lstrip('#')
9    
10    # Χειρισμός hex 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
24    g_norm = g / 255
25    b_norm = b / 255
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 σε Hex
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 σε RGB
8    public static int[] hexToRgb(String hexColor) {
9        // Αφαίρεση # εάν υπάρχει
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Χειρισμός hex 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

Αναφορές και Περαιτέρω Ανάγνωση

Ενότητα Χρωμάτων CSS του W3C Επίπεδο 4 - Επίσημη προδιαγραφή χρωμάτων ιστού
Κατευθυντήριες Γραμμές Αντίθεσης WCAG 2.1 - Πρότυπα προσβασιμότητας για την αντίθεση χρωμάτων
Έλεγχος Αντίθεσης WebAIM - Δοκιμή αναλογιών αντίθεσης χρωμάτων
Πρότυπα Χρωματικού Προφίλ ICC - Τεχνική προδιαγραφή για μετατροπές χρωμάτων
MDN Web Docs: Τιμές Χρωμάτων CSS - Περεκτική οδηγός για μορφές χρωμάτων ιστού

Εργαλείο Επιλογής Χρωμάτων - Μετατροπή RGB, Hex, CMYK & HSV Κωδικών Χρωμάτων

Επιλογέας Χρωμάτων

RGB (0-255)

CMYK (0-100)

Επιλογέας Χρωμάτων

Τεκμηρίωση

Τι Μπορείτε να Κάνετε με Αυτό το Επιλογέα Χρωμάτων

Κατανόηση Χρωματικών Μοντέλων

RGB (Κόκκινο, Πράσινο, Μπλε)

Δεκαεξαδικό (Hex)

CMYK (Κυανό, Ματζέντα, Κίτρινο, Κλειδί/Μαύρο)

HSV (Απόχρωση, Κορεσμός, Τιμή)

Μετατροπή Χρωμάτων

Μετατροπή RGB σε Hex

Μετατροπή RGB σε CMYK

Μετατροπή RGB σε HSV

Αναφορές και Περαιτέρω Ανάγνωση

Δημιουργός Χρωματικής Παλέτας - Δημιουργία Αρμονικών Χρωματικών Συνδυασμών

Γεννήτρια Ιδιοτήτων CSS - Διαβαθμίσεις, Σκιές & Περιγράμματα

Δωρεάν Δημιουργός QR Code - Δημιουργήστε Σαρώσιμους Κωδικούς QR Άμεσα

Μετατροπέας Αριθμητικών Βάσεων: Δυαδικό, Δεκαεξαδικό, Δεκαδικό & Οκταδικό

Προβλεπτικό Χρώματος Κουνελιού – Υπολογισμός Χρωμάτων Γούνας Μωρών Κουνελιών

Μετατροπέας Δυαδικού σε Δεκαδικό | Δωρεάν Online Εργαλείο

Μετατροπέας PX σε REM σε EM – Δωρεάν Υπολογιστής Μονάδων CSS

Αποκωδικοποιητής Base64 Εικόνων | Αποκωδικοποίηση & Προεπισκόπηση Εικόνων Online

Αριθμομηχανή Αραίωσης Χλωρίνης: Ακριβείς Αναλογίες για Ασφαλή Καθαρισμό

Μετατροπέας Pixel σε Ίντσες - Δωρεάν Υπολογιστής DPI (2025)

Υπολογιστής Μήκους Bit και Byte - Δωρεάν Εργαλείο Μεγέθους Δεδομένων

Δωρεάν Μορφοποιητής Κώδικα: Εξωραΐστε JavaScript, Python, HTML & Περισσότερα