Basit ve Kullanıcı Dostu Renk Seçici Aracı

Giriş

Renk Seçici Aracı, kullanıcıların renkleri seçmelerine, görselleştirmelerine ve çoklu renk formatları arasında dönüştürmelerine yardımcı olmak için tasarlanmış sezgisel, kullanımı kolay bir uygulamadır. İster bir web tasarımcısı olun, ister dijital sanatçı, ister bir geliştirici, bu renk seçici, RGB, Altıgen, CMYK ve HSV formatlarında renklerle çalışmanın basit bir yolunu sunar. Etkileşimli renk spektrumu, parlaklık kaydırıcı ve hassas giriş seçenekleri ile projeleriniz için renk değerlerini hızlı bir şekilde bulabilir, ayarlayabilir ve kopyalayabilirsiniz.

Renk Modellerini Anlamak

Renk seçiciyi nasıl kullanacağınıza dalmadan önce, desteklediği farklı renk modellerini anlamak faydalı olacaktır:

RGB (Kırmızı, Yeşil, Mavi)

RGB, kırmızı, yeşil ve mavi ışığın çeşitli şekillerde bir araya getirildiği eklemeli bir renk modelidir ve geniş bir renk yelpazesini yeniden üretir. Dijital uygulamalarda:

Her bileşen (R, G, B) 0 ile 255 arasında değişir
RGB(255, 0, 0) saf kırmızıyı temsil eder
RGB(0, 255, 0) saf yeşili temsil eder
RGB(0, 0, 255) saf maviyi temsil eder
RGB(255, 255, 255) beyazı temsil eder
RGB(0, 0, 0) siyahı temsil eder

RGB modeli, renklerin ekranlarda nasıl görüntülendiği ile doğrudan ilişkilidir ve dijital tasarım için birincil seçimdir.

Altıgen (Hex)

Altıgen renk kodları, RGB renklerini onaltılık sayı sistemi kullanarak temsil etmenin bir yoludur:

Bir altıgen renk, bir pound işareti (#) ile başlar ve ardından altı karakter gelir
İlk çift kırmızıyı, ikinci çift yeşili ve üçüncü çift maviyi temsil eder
Her çift 00 ile FF (ondalıkta 0-255) arasında değişir
#FF0000 saf kırmızıyı temsil eder
#00FF00 saf yeşili temsil eder
#0000FF saf maviyi temsil eder
Belirli renkler için kısayazım notasyonu mevcuttur (örneğin, #F00 kırmızı için)

Altıgen kodları, web geliştirme (CSS, HTML) ve dijital tasarım uygulamalarında yaygın olarak kullanılır.

CMYK (Siyan, Macenta, Sarı, Anahtar/Siyah)

CMYK, renkli baskıda esas olarak kullanılan çıkarıcı bir renk modelidir:

Her bileşen %0 ile %100 arasında değişir
CMYK(0, 100, 100, 0) saf kırmızıyı temsil eder
CMYK(100, 0, 100, 0) saf yeşili temsil eder
CMYK(100, 100, 0, 0) saf maviyi temsil eder
CMYK(0, 0, 0, 100) siyahı temsil eder
CMYK(0, 0, 0, 0) beyazı (kağıt rengi) temsil eder

CMYK, esas olarak baskı için kullanılır, ancak baskı için tasarlanan içeriklerde CMYK değerlerini anlamak faydalı olabilir.

HSV (Hue, Doygunluk, Değer)

HSV, renkleri şu şekilde temsil eder:

Hue: Renk türü (kırmızı, sarı, yeşil, vb.), derecelerle ölçülür (0-360°)
Doygunluk: Rengin yoğunluğu veya saflığı (%0-100)
Değer: Rengin parlaklığı (%0-100)

HSV, renk seçimini daha sezgisel hale getirdiği için özellikle kullanışlıdır, çünkü renk seçimini (hue) yoğunluktan (doygunluk) ve parlaklıktan (değer) ayırır.

Renk Dönüşüm Formülleri

Renk seçici, bu matematiksel formülleri kullanarak farklı renk modelleri arasında otomatik olarak dönüştürme yapar:

RGB'den Hex Dönüşümü

RGB'den altıgen koda dönüştürmek için:

Her RGB bileşenini (0-255) iki basamaklı onaltılık bir sayıya çevirin
Üç onaltılık değeri # ön eki ile birleştirin

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

Burada toHex() ondalık bir sayıyı onaltılık temsiline dönüştürür.

RGB'den CMYK Dönüşümü

RGB'den CMYK'ya dönüşüm şu adımları içerir:

RGB değerlerini 0-1 aralığına normalize edin
Siyah anahtar (K) bileşenini hesaplayın
C, M ve Y'yi K'ya göre hesaplayın

$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'den HSV Dönüşümü

RGB'den HSV'ye dönüşüm:

$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) için:

1// RGB'den Hex dönüşümü
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'den RGB dönüşümü
12function hexToRgb(hex) {
13  // Eğer mevcutsa # işaretini kaldır
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Hem 3 basamaklı hem de 6 basamaklı hex'i işleyin
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'den CMYK dönüşümü
29function rgbToCmyk(r, g, b) {
30  // RGB değerlerini normalize et
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // K (siyah) değerini hesapla
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Tam siyah durumu
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // C, M, Y'yi hesapla
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// Örnek kullanım
57const rgb = { r: 255, g: 0, b: 0 }; // Saf kırmızı
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# RGB'den Hex dönüşümü
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Hex'den RGB dönüşümü
6def hex_to_rgb(hex_color):
7    # Eğer mevcutsa # işaretini kaldır
8    hex_color = hex_color.lstrip('#')
9    
10    # Hem 3 basamaklı hem de 6 basamaklı hex'i işleyin
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'den CMYK dönüşümü
21def rgb_to_cmyk(r, g, b):
22    # RGB değerlerini normalize et
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # K (siyah) değerini hesapla
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Tam siyah durumu
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # C, M, Y'yi hesapla
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# Örnek kullanım
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Gökyüzü mavi
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'den Hex dönüşümü
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'den RGB dönüşümü
8    public static int[] hexToRgb(String hexColor) {
9        // Eğer mevcutsa # işaretini kaldır
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Hem 3 basamaklı hem de 6 basamaklı hex'i işleyin
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'den CMYK dönüşümü
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // RGB değerlerini normalize et
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // K (siyah) değerini hesapla
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Tam siyah durumu
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // C, M, Y'yi hesapla
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        // Örnek kullanım
60        int r = 75, g = 0, b = 130;  // Mor
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

Referanslar

Agoston, M. K. (2013). Bilgisayar Grafikleri ve Geometrik Modelleme: Uygulama ve Algoritmalar. Springer Science & Business Media.
Adobe Systems. (2000). Adobe RGB (1998) Renk Görüntüleme. Adobe Systems Incorporated.
Fairchild, M. D. (2013). Renk Görünüm Modelleri. John Wiley & Sons.
Hunt, R. W. G., & Pointer, M. R. (2011). Renk Ölçümü. John Wiley & Sons.
Poynton, C. (2012). Dijital Video ve HD: Algoritmalar ve Arayüzler. Elsevier.
W3C. (2018). CSS Renk Modülü Seviye 4. W3C Çalışma Taslağı. Erişim adresi: https://www.w3.org/TR/css-color-4/
Web İçeriği Erişilebilirlik Yönergeleri (WCAG) 2.1. (2018). Erişim adresi: https://www.w3.org/TR/WCAG21/
Uluslararası Renk Konsorsiyumu. (2004). Spesifikasyon ICC.1:2004-10 (Profil versiyonu 4.2.0.0). Erişim adresi: http://www.color.org/specification/ICC1v42_2006-05.pdf

Renk Seçicimizi Bugün Deneyin!

Projeniz için mükemmel rengi bulmaya hazır mısınız? Kullanıcı dostu renk seçicimiz, renkleri seçmeyi, ayarlamayı ve farklı formatlar arasında dönüştürmeyi kolaylaştırır. İster bir web tasarlıyor olun, ister dijital sanat yaratıyor olun, ister baskı materyalleri planlıyor olun, aracımız ihtiyaç duyduğunuz hassasiyet ve esnekliği sağlar.

Şimdi renklerle denemelere başlayın ve tasarımlarınızı bir üst seviyeye taşıyın!

Whiz Tools

Basit Renk Seçici: RGB, Hex, CMYK Renk Değerlerini Seçin ve Kopyalayın

Renk Seçici

RGB (0-255)

CMYK (0-100)