Alat Pemilih Warna yang Sederhana dan Ramah Pengguna

Pendahuluan

Alat Pemilih Warna adalah aplikasi intuitif yang mudah digunakan yang dirancang untuk membantu pengguna memilih, memvisualisasikan, dan mengonversi warna di berbagai format warna. Apakah Anda seorang desainer web yang membuat skema warna, seorang seniman digital yang mencari nuansa yang sempurna, atau seorang pengembang yang menerapkan antarmuka pengguna, pemilih warna ini memberikan cara yang sederhana untuk bekerja dengan warna dalam format RGB, Hexadesimal, CMYK, dan HSV. Dengan spektrum warna interaktif, penggeser kecerahan, dan opsi input yang tepat, Anda dapat dengan cepat menemukan, menyesuaikan, dan menyalin nilai warna untuk proyek Anda.

Memahami Model Warna

Sebelum menyelami cara menggunakan pemilih warna, ada baiknya untuk memahami berbagai model warna yang didukungnya:

RGB (Merah, Hijau, Biru)

RGB adalah model warna aditif di mana cahaya merah, hijau, dan biru digabungkan dengan berbagai cara untuk mereproduksi berbagai warna. Dalam aplikasi digital:

Setiap komponen (R, G, B) berkisar dari 0 hingga 255
RGB(255, 0, 0) mewakili merah murni
RGB(0, 255, 0) mewakili hijau murni
RGB(0, 0, 255) mewakili biru murni
RGB(255, 255, 255) mewakili putih
RGB(0, 0, 0) mewakili hitam

Model RGB terkait langsung dengan bagaimana warna ditampilkan di layar, menjadikannya pilihan utama untuk desain digital.

Hexadesimal (Hex)

Kode warna hexadesimal adalah cara untuk merepresentasikan warna RGB menggunakan sistem penomoran basis-16:

Sebuah warna hex dimulai dengan tanda pagar (#) diikuti oleh enam karakter
Pasangan pertama mewakili merah, pasangan kedua hijau, dan pasangan ketiga biru
Setiap pasangan berkisar dari 00 hingga FF (0-255 dalam desimal)
#FF0000 mewakili merah murni
#00FF00 mewakili hijau murni
#0000FF mewakili biru murni
Notasi singkat tersedia untuk warna tertentu (misalnya, #F00 untuk merah)

Kode hex banyak digunakan dalam pengembangan web (CSS, HTML) dan aplikasi desain digital.

CMYK (Sian, Magenta, Kuning, Kunci/Hitam)

CMYK adalah model warna subtraktif yang terutama digunakan dalam pencetakan warna:

Setiap komponen berkisar dari 0% hingga 100%
CMYK(0, 100, 100, 0) mewakili merah murni
CMYK(100, 0, 100, 0) mewakili hijau murni
CMYK(100, 100, 0, 0) mewakili biru murni
CMYK(0, 0, 0, 100) mewakili hitam
CMYK(0, 0, 0, 0) mewakili putih (warna kertas)

Meskipun terutama digunakan untuk cetakan, memahami nilai CMYK dapat membantu saat merancang konten yang pada akhirnya akan dicetak.

HSV (Hue, Saturasi, Nilai)

HSV mewakili warna dalam hal:

Hue: Jenis warna (merah, kuning, hijau, dll.), diukur dalam derajat (0-360°)
Saturasi: Intensitas atau kemurnian warna (0-100%)
Nilai: Kecerahan warna (0-100%)

HSV sangat berguna untuk pemilihan warna karena memisahkan pilihan warna (hue) dari intensitasnya (saturasi) dan kecerahan (nilai), sehingga lebih intuitif untuk menyesuaikan warna.

Rumus Konversi Warna

Pemilih warna secara otomatis mengonversi antara berbagai model warna menggunakan rumus matematis ini:

Konversi RGB ke Hex

Untuk mengonversi RGB ke heksadesimal:

Konversi setiap komponen RGB (0-255) menjadi angka heksadesimal dua digit
Gabungkan tiga nilai heksadesimal dengan awalan #

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

Di mana toHex() mengonversi angka desimal menjadi representasi heksadesimalnya.

Konversi RGB ke CMYK

Konversi dari RGB ke CMYK melibatkan langkah-langkah berikut:

Normalisasi nilai RGB ke rentang 0-1
Hitung komponen kunci hitam (K)
Hitung C, M, dan Y berdasarkan 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\%$

Konversi RGB ke HSV

Mengonversi RGB ke 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}$

Untuk Hue (H):

1// Konversi RGB ke 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// Konversi Hex ke RGB
12function hexToRgb(hex) {
13  // Hapus # jika ada
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Tangani hex 3-digit dan 6-digit
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// Konversi RGB ke CMYK
29function rgbToCmyk(r, g, b) {
30  // Normalisasi nilai RGB
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Hitung K (hitam)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Tangani hitam murni
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Hitung 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// Contoh penggunaan
57const rgb = { r: 255, g: 0, b: 0 }; // Merah murni
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# Konversi RGB ke Hex
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Konversi Hex ke RGB
6def hex_to_rgb(hex_color):
7    # Hapus # jika ada
8    hex_color = hex_color.lstrip('#')
9    
10    # Tangani hex 3-digit dan 6-digit
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# Konversi RGB ke CMYK
21def rgb_to_cmyk(r, g, b):
22    # Normalisasi nilai RGB
23    r_norm = r / 255.0
24    g_norm = g / 255.0
25    b_norm = b / 255.0
26    
27    # Hitung K (hitam)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Tangani hitam murni
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Hitung 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# Contoh penggunaan
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Biru langit
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    // Konversi RGB ke 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    // Konversi Hex ke RGB
8    public static int[] hexToRgb(String hexColor) {
9        // Hapus # jika ada
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Tangani hex 3-digit dan 6-digit
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    // Konversi RGB ke CMYK
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normalisasi nilai RGB
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Hitung K (hitam)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Tangani hitam murni
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Hitung 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        // Contoh penggunaan
60        int r = 75, g = 0, b = 130;  // Ungu
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

Referensi

Agoston, M. K. (2013). Grafika Komputer dan Pemodelan Geometrik: Implementasi dan Algoritma. Springer Science & Business Media.
Adobe Systems. (2000). Adobe RGB (1998) Encoding Gambar Warna. Adobe Systems Incorporated.
Fairchild, M. D. (2013). Model Penampilan Warna. John Wiley & Sons.
Hunt, R. W. G., & Pointer, M. R. (2011). Mengukur Warna. John Wiley & Sons.
Poynton, C. (2012). Video Digital dan HD: Algoritma dan Antarmuka. Elsevier.
W3C. (2018). Modul Warna CSS Level 4. Draf Kerja W3C. Diambil dari https://www.w3.org/TR/css-color-4/
Pedoman Aksesibilitas Konten Web (WCAG) 2.1. (2018). Diambil dari https://www.w3.org/TR/WCAG21/
Konsorsium Warna Internasional. (2004). Spesifikasi ICC.1:2004-10 (Versi profil 4.2.0.0). Diambil dari http://www.color.org/specification/ICC1v42_2006-05.pdf

Coba Pemilih Warna Kami Hari Ini!

Siap untuk menemukan warna yang sempurna untuk proyek Anda? Pemilih warna kami yang ramah pengguna memudahkan Anda memilih, menyesuaikan, dan mengonversi warna antara berbagai format. Apakah Anda merancang situs web, membuat seni digital, atau merencanakan materi cetak, alat kami memberikan ketepatan dan fleksibilitas yang Anda butuhkan.

Mulailah bereksperimen dengan warna sekarang dan tingkatkan desain Anda ke level berikutnya!

Whiz Tools

Pemilih Warna Sederhana: Pilih & Salin Nilai Warna RGB, Hex, CMYK

Pemilih Warna

RGB (0-255)

CMYK (0-100)