HEX, RGB, HSL ve CMYK: Hangi renk formatını ne zaman kullanmalı

Aynı renk, dört farklı dil

Herhangi bir renk seçin, diyelim ki sıcak bir mercan tonu. Şimdi onu dört şekilde tarif edin:

• HEX: #E8635A
• RGB: rgb(232, 99, 90)
• HSL: hsl(4, 75%, 63%)
• CMYK: 0, 57, 61, 9

Dördü de tam olarak aynı rengi tarif ediyor. Bunlar birbiriyle yarışan standartlar değil; farklı bağlamlar için optimize edilmiş farklı renk gösterimleri. Kafa karışıklığı, hangi bağlamın hangi formatı gerektirdiğini bilmemekten doğuyor.

Bu rehber her formatı sade bir dille ele alıyor: nedir, nasıl çalışır, ne zaman kullanılır ve ne zaman yanlış tercihtir. Renkle herhangi bir biçimde çalışıyorsanız (tasarım, geliştirme, baskı, pazarlama) bu yazı projeniz için yanlış formatı seçmenizi engelleyecek.

HEX: Web'in standardı

Nedir

HEX (onaltılık), diyez işaretiyle başlayan altı karakterlik bir koddur: #E8635A. Her karakter çifti kırmızı, yeşil ve mavi kanallarını 16 tabanında (00 ile FF arası) ifade eder.

İşlevsel olarak RGB ile aynıdır, sadece farklı yazılır. #E8635A, rgb(232, 99, 90) ile aynı şeydir. HEX, RGB değerlerini yazmanın daha derli toplu bir yoludur.

HEX'i ne zaman kullanmalı

• CSS ve web geliştirme — HEX, CSS'te varsayılan renk gösterimidir. Her tarayıcı anlar. color: #E8635A; web'de renk belirtmenin en yaygın yoludur.
• Tasarım araçları — Figma, Sketch, Adobe XD ve Canva birincil girdi olarak HEX kullanır. Bir tasarımcı «mavi #3B82F6» dediğinde herkes ne demek istediğini bilir.
• Marka kılavuzları — dijital marka kılavuzları neredeyse her zaman HEX değerleri içerir; kısa, tek anlamlı ve kopyalaması kolaydır.
• Hızlı iletişim — bir Slack mesajında «#333 kullan» demek «rgb(51, 51, 51) kullan» demekten hızlıdır.

HEX'i ne zaman KULLANMAMALI

• Saydamlık gerektiğinde — standart 6 haneli HEX alfa kanalını ve opaklığı desteklemez. Daha az okunaklı olan 8 haneli HEX'e (#E8635A80) ya da RGBA'ya geçmeniz gerekir.
• Renkleri programatik olarak ayarlamanız gerektiğinde — «bunu %20 açık yap» HEX'te zihinden hesaplanamaz. Bunun için HSL çok daha uygundur.
• Baskı üretimi — matbaalar HEX kullanmaz. Asla.

Gerçek bir örnek

Bir açılış sayfası için CSS yazıyorsunuz. Tasarımcı size marka renklerini içeren bir stil kılavuzu veriyor. Şunu yazıyorsunuz:

:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }

HEX burada mükemmel: derli toplu, okunaklı ve her yerde destekleniyor.

RGB: Ekranların renk modeli

Nedir

RGB, Red, Green, Blue (kırmızı, yeşil, mavi) demektir: ekranların gördüğünüz her rengi üretmek için karıştırdığı üç ışık rengi. Her kanal 0 ile 255 arasında değer alır. rgb(232, 99, 90), 232 birim kırmızı, 99 birim yeşil ve 90 birim mavi anlamına gelir.

RGB tüm dijital rengin temelidir. HEX yalnızca farklı yazılmış RGB'dir. HSL ise RGB'nin insana uygun bir dönüşümüdür. Ekranınızdaki her şey nihayetinde piksellere gönderilen RGB değerlerine dönüşür.

RGB'yi ne zaman kullanmalı

• Saydamlık gerektiğinde — RGBA bir alfa kanalı ekler: %50 opaklık için rgba(232, 99, 90, 0.5). Bu, 8 haneli HEX'ten daha temizdir ve CSS'te, tasarım araçlarında ve programlamada yaygın olarak desteklenir.
• Programlama ve uygulama geliştirme — Swift, Kotlin, Flutter, React Native; uygulama çatıları içeride genellikle RGB/RGBA değerleriyle çalışır.
• LED ve aydınlatma — akıllı ampuller (Philips Hue, LED şeritler) RGB değerleri kullanır. Fiziksel ışık düzenlemeleri tasarlıyorsanız RGB doğal formattır.
• Renk matematiği — renk karıştırmak, degradeleri ara değerlemek veya rengi kodla üretmek RGB'de kolaydır.

RGB'yi ne zaman KULLANMAMALI

• Baskı — ekranlar ışık yayar (toplamsal karışım), kâğıt ise onu yansıtır (çıkarmalı karışım). RGB, matbaadan çıkacak sonucu doğru şekilde temsil edemez.
• Açıklık veya doygunluk ayarlamak — «bu rengin doygunluğunu %30 azalt» RGB'de sezgisel değildir. Önce HSL'ye çevirmeniz gerekir.

Gerçek bir örnek

React Native ile bir uygulama geliştiriyorsunuz ve yarı saydam bir katman gerekiyor:

backgroundColor: 'rgba(0, 0, 0, 0.6)'

Alfa kanallı RGB doğal tercihtir: doğrudan, okunaklı ve render motoruna özgü.

HSL: Tasarımcının formatı

Nedir

HSL, Hue, Saturation, Lightness (ton, doygunluk, açıklık) anlamına gelir:

• Ton (0°–360°) — rengin kendisi, renk çemberindeki konum olarak. 0° kırmızı, 120° yeşil, 240° mavidir.
• Doygunluk (%0–%100) — rengin ne kadar canlı olduğu. %0 gri, %100 tonun en saf halidir.
• Açıklık (%0–%100) — ne kadar açık ya da koyu olduğu. %0 siyah, %100 beyaz, %50 ise rengin «gerçek» halidir.

hsl(4, 75%, 63%) şu demektir: kırmızıya çalan bir ton (4°), çok canlı (%75 doygunluk) ve hafif açık (%63).

HSL'yi ne zaman kullanmalı

• Tasarım sistemleri ve temalar — tutarlı renk skalaları oluşturmak için en iyi format HSL'dir. Ana renginizin 10 tonunu mu istiyorsunuz? Tonu sabit tutup açıklığı %10'dan %95'e değiştirin. Daha soluk bir sürüm mü lazım? Doygunluğu düşürün. Bunu HEX veya RGB'de sezgisel olarak yapmak neredeyse imkânsızdır.
• Koyu mod / açık mod — tema değiştirmek açıklık ve doygunluğu ayarlamak demektir, bu da doğrudan HSL parametrelerine karşılık gelir. Tailwind CSS, Radix Colors ve pek çok modern tasarım sistemi HSL üzerine kuruludur.
• Programatik renk üretimi — tek bir temel renkten üzerine gelme durumları, devre dışı durumlar, arka planlar ve kenarlıklar türetmek HSL'de çok basittir: daha açık bir varyant için hsl(4, 75%, 73%), daha koyusu için hsl(4, 75%, 43%).
• Erişilebilirlik — açıklığı doğrudan görüp ayarlayabildiğinizde kontrast oranı denetimleri daha sezgisel hale gelir.

HSL'yi ne zaman KULLANMAMALI

• Ekipler arası iletişim — çoğu insan derece ve yüzdeyle düşünmez. Tasarım teslimatında «düğme hsl(4, 75%, 63%)» demek «düğme #E8635A» demekten daha az anlaşılırdır.
• Baskı — RGB gibi HSL de bir ekran renk modelidir.

Gerçek bir örnek

Tailwind CSS ile bir tasarım sistemi kuruyorsunuz ve tutarlı bir renk skalası gerekiyor:

--brand-50: hsl(4, 75%, 95%);
--brand-100: hsl(4, 75%, 90%);
--brand-200: hsl(4, 75%, 80%);
--brand-500: hsl(4, 75%, 63%);
--brand-700: hsl(4, 75%, 43%);
--brand-900: hsl(4, 75%, 25%);

Aynı ton, aynı doygunluk, farklı açıklık. 30 saniyede kusursuz bir skala. Bunu bir de HEX'te deneyin.

CMYK: Baskı formatı

Nedir

CMYK, Cyan, Magenta, Yellow, Key (camgöbeği, macenta, sarı, siyah) demektir. Rengi, beyaz kâğıda uygulanan mürekkep karışımı olarak tanımlar. Her değer %0 ile %100 arasındadır: 0, 57, 61, 9, %0 camgöbeği, %57 macenta, %61 sarı ve %9 siyah anlamına gelir.

Renk üretmek için ışık ekleyen RGB'nin aksine CMYK, beyaz kâğıttan ışık çıkarır. Daha fazla mürekkep = daha koyu renk. Bu yüzden ona çıkarmalı renk modeli denir.

CMYK'yi ne zaman kullanmalı

• Baskı tasarımı — kartvizitler, broşürler, ambalajlar, afişler, dergiler. Ticari bir matbaaya gönderilen her dosya CMYK renk modunda olmalıdır.
• InDesign ve Illustrator'da baskıya hazırlık — bu araçlar CMYK modunda çalışmanıza izin vererek renklerin kâğıtta nasıl görüneceğini (ekrandakinden her zaman daha sönük) önceden göstermenizi sağlar.
• Renk provası — tasarımınızdaki renklerin CMYK'de çoğaltılabilir olup olmadığını denetlemek. Bazı çok canlı RGB renkleri (özellikle neon yeşiller ve elektrik mavileri) CMYK'de fiziksel olarak basılamaz; «renk gamının dışında» kalır.

CMYK'yi ne zaman KULLANMAMALI

• Ekranda görünen her şey — web siteleri, uygulamalar, sosyal medya, sunumlar, e-postalar. Ekranlar RGB kullanır. Bir web sitesi için CMYK belirtmek, yol tarifini deniz miliyle vermek gibidir: teknik olarak bir mesafedir ama yolculuk için işe yaramaz.
• Fotoğraf düzenleme — RGB'de düzenleyin, CMYK'ye yalnızca baskı için son dışa aktarma aşamasında dönüştürün.

Gerçek bir örnek

Illustrator'da bir afiş tasarladınız. Matbaaya göndermeden önce belgeyi CMYK renk moduna çeviriyorsunuz (File → Document Color Mode → CMYK Color), gam dışı uyarılarını kontrol ediyor ve bulanık bir turkuaza kayan elektrik mavilerini düzeltiyorsunuz. Nihai PDF, matbaanın ICC profiliyle CMYK olarak kaydediliyor.

Hızlı başvuru tablosu

Kopya kâğıdı: Hangi iş için hangi format

Aralarında dönüşüm yapılabilir mi?

Evet — bazı kayıtlarla.

• HEX ↔ RGB — kayıpsız, aynı verinin farklı yazımı.
• RGB ↔ HSL — kayıpsız, matematiksel bir dönüşüm.
• RGB → CMYK — kayıplı. Bazı RGB renkleri (canlı maviler, neonlar, parlak yeşiller) CMYK'de üretilemez. Dönüşüm onları en yakın basılabilir karşılığa kaydırır ve sonuç genellikle daha sönük görünür.
• CMYK → RGB — teknik olarak mümkün, ancak sonuç kullanılan ICC profiline bağlıdır. İki farklı dönüştürücü, aynı CMYK girdisi için biraz farklı RGB değerleri verebilir.

Sahada hızlı dönüşümler için dört formatı aynı anda gösteren bir telefon renk seçici en hızlı yöntemdir. Color Picker Camera: HEX RGB tam olarak bunu yapıyor: kamerayı herhangi bir renge doğrultun, HEX, RGB, HSL ve CMYK değerlerini yan yana görün. Tek dokunuşla istediğiniz değeri kopyalayın. iPhone ve Android için mevcut.

Sık yapılan hatalar

1. Baskı için RGB'de tasarlamak

Klasik acemi hatası. Photoshop'ta RGB modunda capcanlı bir afiş tasarlıyorsunuz, matbaaya gönderiyorsunuz ve çıktı soluk görünüyor; özellikle yeşiller ve maviler. Baskı için dışa aktarmadan önce mutlaka CMYK'ye çevirin ve gam uyarılarını kontrol edin.

2. Saydamlık gerekirken HEX kullanmak

Tasarımınız yarı saydam katmanlar, gölgeler veya cam efektleri gerektiriyorsa RGBA ya da HSLA'ya geçin. Standart 6 haneli HEX opaklık bilgisi taşımaz; 8 haneli HEX ise okunması zor olduğu için nadiren kullanılır.

3. Tasarım sistemini HEX üzerine kurmak

«#3B82F6 ama %20 daha açık» dönüştürme, hesaplama ve yeniden dönüştürme gerektirir. HSL'de: açıklığı %20 artırın. Tasarım token'ları, tema üreticileri ve modern CSS özel özellikleri HSL'de belirgin biçimde daha iyi çalışır.

4. CMYK'yi web için HEX'e çevirip aynı rengi beklemek

Baskı için CMYK'de tanımlanmış bir marka, web için düşünmeden HEX'e çevrildiğinde farklı görünecektir. Doğru yaklaşım: ekrandaki rengi basılı sürüme görsel olarak eşitleyin, sonra dijital kullanım için ayrı HEX değerleri tanımlayın. Marka kılavuzu ikisini de içermelidir.

Sık sorulan sorular

HEX ile RGB arasındaki fark nedir?

Renk açısından fark yok, yalnızca yazım farklı. HEX aynı kırmızı/yeşil/mavi değerlerini 16 tabanında yazar. #FF0000, rgb(255, 0, 0) ile aynıdır. HEX yazması daha kısadır; RGB ise programatik olarak değiştirmesi daha kolaydır ve alfa kanalını (RGBA) destekler.

RGB yerine ne zaman CMYK kullanmalıyım?

Nihai çıktı fiziksel bir malzemeye basıldığında: kâğıt, karton, kumaş, plastik. Ekranda kalıyorsa RGB (ya da HEX/HSL) kullanın. Basılacaksa dışa aktarma aşamasında CMYK'ye geçin.

HSL, HEX'ten daha mı iyi?

Tasarım sistemleri, temalar ve renk üzerinde oynamalar için evet. Hızlı iletişim ve araçlara kopyalayıp yapıştırmak için HEX daha pratiktir. İkisi de aynı renkleri tanımlar; HSL yalnızca bilgiyi insanların renk hakkında düşünme biçimine göre düzenler (ton → canlılık → parlaklık).

Telefonum dört formatı aynı anda gösterebilir mi?

Evet. Color Picker Camera: HEX RGB, kameranızdan veya bir fotoğraftan renk yakalar ve HEX, RGB, HSL ile CMYK'yi aynı anda gösterir. Kopyalamak için herhangi bir değere dokunun. Gerçek dünya için bir renk formatı hesaplayıcısı gibi çalışır: tek çekim, dört format.

Özetle

Web ve hızlı iletişim için HEX. Uygulama geliştirme ve saydamlık için RGB. Tasarım sistemleri ve renk üzerinde oynamalar için HSL. Baskı için CMYK.

Birini seçmek zorunda değilsiniz; her bağlamda doğru olanı kullanmanız gerekiyor. Aralarında dönüşüm yapmanız ya da gerçek dünyadaki bir rengi dört formatta birden yakalamanız gerektiğinde ise telefondaki bir renk seçici en hızlı araçtır.

Color Picker Camera'yı iPhone için indirin | Android için indirin

PDF indir

Diğer biçimler: Markdown · Text · JSON · EPUB · JATS XML · BibTeX · RIS · CSL-JSON

Lisans: CC BY 4.0