RGB, HEX, HSL ve CMYK: En İyi Renk Formatı Kılavuzu

Bir web sitesi tasarlamayı, logo oluşturmayı veya kartvizit yazdırmayı denediyseniz, hemen renk kodlarından oluşan kafa karıştırıcı alfabe çorbasıyla karşılaşırsınız: HEX, RGB, HSL ve CMYK. Mavinin basit bir tonunu tanımlamanın neden bu kadar çok yolu var?

Gerçek şu ki, bilgisayarlar ve yazıcılar ışığı temelde farklı şekillerde "görürler". Dahası, bilgisayarların ışığı nasıl işlediği, insan beyninin renkleri nasıl yorumladığı anlamına gelmez. Bu formatları anlamak sadece teori değildir; sizi erişilemeyen kontrast oranlarına sahip web sitelerini dağıtmaktan veya çıktıları çamurlu ve karanlık görünen pazarlama broşürleri için binlerce dolar ödemekten kurtaracaktır.

Katkı ve Çıkarıcı Işık

Koda dalmadan önce ekranlarla kağıt arasındaki fiziksel farkı belirlememiz gerekiyor.

• Ekranlar ışık yayar (Katkı maddesi). Tüm pikselleri kapatırsanız ekran siyah olur. Beyaz yapmak için bir ekran Kırmızı, Yeşil ve Mavi ışığı maksimum yoğunlukta yayar.
• Kağıt ışığı yansıtır (Çıkarıcı). Boş bir kağıt parçası zaten beyazdır (tüm ışığı yansıtır). Siyah yapmak için, yazıcı tüm ışığı absorbe edecek şekilde Camgöbeği, Macenta ve Sarı mürekkebi üst üste katlar.

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

RGB, bilgisayar monitörünüzün ana dilidir. Ekrana tam olarak ne kadar Kırmızı, Yeşil ve Mavi ışık yayılacağını söyleyerek bir rengi tanımlar. Her kanal, 0 (kapalı) ila 255 (maksimum yoğunluk) arasında bir tamsayı ile temsil edilir.

Örneğin saf kırmızı rgb(255, 0, 0)'dır. Saf beyaz rgb(255, 255, 255)'tir.

En iyisi: Resim düzenleme (Photoshop) ve dijital fotoğrafçılık. Donanım piksellerini doğrudan yönetir.

2. HEX (Onaltılı)

#FF5733 gibi HEX kodları RGB ile tamamen aynı şeydir. Tek fark matematik. 10 tabanlı sayıları (0-255) kullanmak yerine, 16 tabanlı onaltılık sayıları (00'dan FF'ye) kullanır. İlk iki harf Kırmızıyı, ortadaki iki harf Yeşili ve son iki harf Maviyi belirtir.

Web geliştiricileri neden HEX kullanıyor? Çünkü daha kısa. #FFF yazmak, bir CSS geliştiricisi için rgb(255, 255, 255) yazmaktan çok daha hızlıdır.

En iyisi: Marka renklerini CSS'de sabit kodlama. Figma gibi tasarım araçları ve kod editörleri arasında kısa ve kolayca kopyalanıp yapıştırılabilir.

3. HSL (Ton, Doygunluk, Açıklık)

RGB ve HEX insanlar için korkunçtur. Size #4A90E2 kodunu göstersem ne renk olduğunu kolayca tahmin edemezsiniz. Sizden "maviyi %20 daha koyu yapmanızı" istersem, HEX'te matematik yapmak neredeyse imkansızdır.

HSL insan beyni için tasarlandı. Rengi 360 derecelik bir renk tekerleğinde tanımlar.

• Ton (0-360): Gerçek renk. 0 Kırmızı, 120 Yeşil, 240 Mavidir.
• Doygunluk (%0-100): Rengin ne kadar yoğun olduğu. %0 gri, %100 canlıdır.
• Açıklık (%0-100): Ne kadar karanlık veya parlak. %0 siyah, %100 beyazdır.

Markanızın mavisi hsl(210, 100%, 50%) ise ve düğmeyle üzerine gelme efekti için daha koyu bir gölge istiyorsanız, son sayıyı değiştirmeniz yeterlidir: hsl(210, 100%, 40%). CSS mimarisi için sihirdir.

4. CMYK (Cyan, Macenta, Sarı, Anahtar/Siyah)

CMYK tamamen fiziksel dünyaya yöneliktir. Bir yazıcının fiziksel mürekkebi nasıl karıştıracağını belirler. Mürekkep ışığı emdiği için renk alanı fiziksel olarak RGB'den daha küçüktür. Bir yazıcının fiziksel olarak yazdıramadığı (CMYK'de) bir ekranın yayabileceği (RGB'de) canlı neon yeşilleri vardır.

Altın Kural: RGB dosyasını asla ticari bir yazıcıya göndermeyin. Yazıcı bunu zorla CMYK'ye dönüştürecek ve bu da canlı renklerinizin çamurlu ve soluk görünmesine neden olacaktır. Tasarımlarınızı matbaaya göndermeden önce daima CMYK'ye dönüştürün.

Karşılaştırma Matrisi

Format	Environment	Readability	Primary Use Case
HEX	Digital	Low	Standard web design, copying from Figma
RGB	Digital	Medium	Manipulating alpha transparency (rgba)
HSL	Digital	High	Dynamic CSS theming, Dark Modes
CMYK	Physical Print	N/A	Business cards, flyers, packaging

Sıkça Sorulan Sorular (SSS)