Renk Seçici ve Dönüştürücü — HEX, RGB, HSL, CMYK Kodları Online

Renk, her görsel tasarımın temelidir. Web sitesi inşa ediyorsanız, mobil uygulama tasarlıyorsanız, marka kimliği oluşturuyorsanız veya basım için dosya hazırlıyorsanız, her ortamda mükemmel şekilde çevrilebilecek kesin renk kodlarına ihtiyacınız vardır. Gözle renk tahmini yapmak tutarsız sonuçlara yol açar. Ücretsiz Renk Seçici ve Dönüştürücümüz, HEX, RGB, HSL ve CMYK olmak üzere dört profesyonel formatta kesin renk değerlerini sağlar. Ayrıca, saniyeler içinde uyumlu renk şemaları oluşturmak için tam bir paleti tınılar ve tonlarla birlikte sunar.

Tasarımda Doğru Renk Neden Önemlidir

Renk sadece süsleme değildir. Kullanıcı davranışını yönlendirir, marka kimliğini iletir ve erişilebilirliği sağlar. Renk Pazarlama Grubu'nun bir çalışmasına göre, tüketicilerin %85'ine kadar ürün alımının temel nedeni renk olarak belirtilmiştir. Dijital tasarım alanında, yanlış bir mavi tonu bir butonu görünmez hale getirebilirken, doğru bir yeşil renk, güven ve eylem sinyalini vererek dönüşüm oranlarını artırabilir.

Zorluk, renk kullanım alanına göre farklı formatlarda bulunmasındadır. Web geliştiricileri HEX ve RGB ile çalışır. Grafik tasarımcılar genellikle HSL'yi tercih eder çünkü ayarlama kolaydır. Basım uzmanları CMYK'yi ihtiyaç duyar çünkü ekranlar ve basıcılar renk üretimi farklıdır. Güvenilir bir dönüştürücü olmadan, bu formatlar arasında tek bir rengi çevirmek el ile yapılan ve hata yapma ihtimali yüksek bir işlemdir.

Ekranlar, ekranların ışık emmesi için toplamadaki RGB modelini kullanır — kırmızı, yeşil ve maviyi birleştirerek renkler oluşturur. Basıcılar ise, ışığı emerek renk üretmek için kırmızı, yeşil, mavi ve siyah tonu olan CMYK modelini kullanır. Bu süreçler temelde farklı olduğundan, ekranda canlı görünen bir renk kağıtta koyu veya kaymış hale gelebilir. Doğru bir renk dönüştürücüsü, her sistemdeki tam değerleri size göstererek tasarımınıza başlamadan önce ne beklediğinizi bilmenizi sağlar.

Renk Seçici ve Dönüştürücüyü Nasıl Kullanabilirsiniz

Renkleri bulmak ve dönüştürmek saniyeler alır. Görsel bir seçimden, HEX kodundan veya RGB kaydırıcılarından başlayabilirsiniz.

1. Bir renk seçin. Yerel renk girişi kullanarak. Renk swatch'ını tıklayarak sistem renk seçicinizi açın ve herhangi bir tonu görsel olarak seçin. Veya doğrudan girdi alanına bir HEX kodu yazın.
2. RGB kaydırıcılarıyla hassas kontrol sağlayın. Kırmızı, yeşil ve mavi değerlerini bağımsız olarak kaydırıcılarla veya tam sayılar (0–255) yazarak ayarlayın.
3. Tüm dört formatta anlık dönüştürmeleri görün. Renkleri ayarladıkça HEX, RGB, HSL ve CMYK değerleri gerçek zamanlı olarak güncellenir. Her format kendi kopyalama butonuna sahiptir.
4. Herhangi bir kodu tek bir tıklamayla kopyalayın. Herhangi bir formatın yanındaki kopyalama ikonuna tıklayarak o tam değeri kopyalayın. Başarılı kopyalama, bir onay işaretiyle onaylanır.
5. Ana seçici altında tınılar ve tonları keşfedin. Araç, seçtiğiniz renkten daha açık tınılar (beyaz ekleyerek) ve daha koyu tonlar (siyah ekleyerek) oluşturur. Herhangi bir varyasyona tıklayarak onu seçin ve anlık olarak dönüştürülmüş değerlerini görün.

Tamamı görsel ve etkileşimlidir. Renk uzaylarının matematiğini bilmek gerekmez — araç her dönüşümü otomatik olarak yapar.

Renk Formatlarını Anlamak

Format	Ne Temsil Eder	En İyi Kullanım Alanı	Örnek
HEX	Altı haneli onaltılık kod, RGB değerlerini temsil eder	Web tasarımı, CSS, HTML, dijital grafikler	#3B82F6
RGB	0 ile 255 arasında kırmızı, yeşil ve mavi ışık değerleri	Ekran görüntüleri, CSS, resim düzenleme, video	rgb(59, 130, 246)
HSL	Ton (0–360°), doygunluk (0–100%), parlaklık (0–100%)	Renkleri sezgisel olarak ayarlama, temalama, erişilebilirlik	hsl(217, 91%, 60%)
CMYK	0 ile 100 arasında siyan, magenta, sarı ve ana (siyah) yüzdesi	Profesyonel basım, ambalaj, yayınlar	cmyk(76%, 47%, 0%, 4%)

HEX Kodları

HEX, web geliştirme alanında en yaygın formattır. Kırmızı, yeşil ve maviyi iki haneli onaltılık sayılarla temsil eder ve tek bir altı karakterli dizeye bir hash ile öne eklenir. #FF0000 saf kırmızıdır, #00FF00 saf yeşil, #0000FF saf mavidir. Kompakt format, CSS dosyalarına, tasarım tokenlarına ve yapılandırma dosyalarına kolayca yapıştırılmasını sağlar.

RGB Değerleri

RGB, kırmızı, yeşil ve mavi ışığının 0 ile 255 arasında yoğunluğuna göre renkleri tanımlar. Bu, bilgisayar monitörleri, televizyon ekranları ve akıllı telefon ekranları için doğrudan dildir. RGB, HEX kodlarının temelidir — her HEX değeri doğrudan RGB'ye ve tersine çevrilebilir.

HSL Değerleri

HSL, Ton, Doygunluk ve Parlaklık anlamına gelir. Tasarımcılar genellikle HSL'yi tercih eder çünkü insanlar renkleri düşünme şekillerine eşlik eder. Ton, spektrumda gerçek renktir (0° kırmızı, 120° yeşil, 240° mavi). Doygunluk, renk ne kadar canlı ya da bastırılmış olduğunu kontrol eder. Parlaklık, ne kadar parlak ya da koyu olduğunu kontrol eder. Mavi tonunun daha açık bir versiyonu istiyorsanız, parlaklık değerini artırın. Daha bastırılmış bir versiyonu istiyorsanız, doygunluğu azaltın. Bu sezgisel yapı, renk paletleri ve tasarım sistemleri oluşturmak için HSL'yi ideal kılar.

CMYK Değerleri

CMYK, fiziksel mürekkep ışık üretmez çünkü nedeniyle basım için standarttır. Ekranlar kırmızı, yeşil ve mavi ışık yayarken, basım malzemeleri ışığı emer. Siyan kırmızıyı, magenta yeşili, sarı mavyi emer. Siyah mürekkep (CMYK'teki "K") eklenir çünkü siyan, magenta ve sarının birleşimi genellikle derin, zengin bir siyah üretmez. RGB veya HEX bir rengi CMYK'ye dönüştürdüğünüzde, ekran ışığı değerlerini basıcıların anlayabileceği mürekkep kaplama yüzdesine çeviriyorsunuz.

Ana Özellikler

Özellik	Ne Yapar	Neden Önemlidir
Yerel Renk Seçici	Görsel seçim için sistem renk seçicisini açar	Görsel olarak seçmeden önce doğal bir şekilde renk seçmenizi sağlar
Manuel HEX Girişi	Herhangi bir geçerli HEX kodunu doğrudan yazın	Marka rehberi veya tasarım dosyasından bir renk varsa idealdir
RGB Kaydırıcı Kontrolü	Kırmızı, yeşil ve mavi için bağımsız kaydırıcılar	Kesin ayarlar yapmak için
Gerçek Zamanlı Dönüştürme	Renkleri ayarladıkça tüm dört format anlık olarak güncellenir	Tahmin yapmaya gerek kalmadan her değeri aynı anda görebilirsiniz
Tek Tıklamalı Kopyalama	Her format için kopyalama butonu ve görsel onay	Manuel seçim yapmadan tam kodu almak için
Tını Paleti	Beyaz ekleyerek renklerin daha açık versiyonları	Hover durumları, arka planlar ve ince vurgular oluşturmak için
Tone Paleti	Siyah ekleyerek renklerin daha koyu versiyonları	Kenarlar, aktif durumlar ve tasarımınızda derinlik oluşturmak için
Tıklama ile Seçim	Herhangi bir tını veya tonu tıklayarak seçin	Palet seçeneklerini tekrar yazmadan dolaşmak için

Tek bir format çıktısı veren bağımsız renk seçicilerinden farklı olarak, bu araç dijital ve basım tasarımı arasında boşluğu kapatır. Web geliştiricisi bir renk seçebilir, CSS için HEX kodunu kopyalayabilir ve aynı anda basım tasarımcısıyla paylaşmak için CMYK değerlerini görebilir. Grafik sanatçı, basım özetinden bir CMYK değerinden başlayabilir ve dijital tasarımlar için eşdeğer RGB değerini anında alabilir.

Gerçek Hayat Uygulama Alanları

Web Geliştiricileri CSS Yazarken Web sitesi inşa ederken, geliştiricilerin onlarca CSS kuralında tutarlı renk değerlerine ihtiyacı vardır. Birincil marka rengini seçin, butonlar ve başlıklar için HEX kodunu kopyalayın, ardından hover durumları için daha açık bir tını ve aktif durumlar için daha koyu bir ton alın. Tüm değerler matematiksel olarak tutarlıdır çünkü aynı temel rengin türevleridir.

UI/UX Tasarımcıları Bileşen Kütüphaneleri Oluştururken Tasarım sistemleri, dikkatlice yapılandırılmış renk paletlerini gerektirir. Bir tasarımcı, birincil maviyi tanımlayabilir, ardından arka planlar, kenarlar, metin ve etkileşimli durumlar için tam bir ölçek oluşturmak için beş tını ve beş ton oluşturabilir. HSL formatı, bu işlemi özellikle kolay kılar çünkü parlaklık değerini ayarlamak öngörülebilir adımlar oluşturur.

Grafik Tasarımcılar Basım Malzemeleri Hazırlarken Bir iş kartı veya broşür yapan bir tasarımcı, ekran önizlemesiyle mümkün olduğu kadar yakın olan CMYK değerlerine ihtiyaç duyar. Markanın HEX rengini CMYK'ye dönüştürerek, tasarımcı basıcıya tam mürekkep yüzdesini sağlayabilir ve fiziksel kanıt geldiğinde sürprizlerden kaçınabilir.

Dijital Sanatçılar ve İllüstratörler Dijital sanatta renk uyumu çok önemlidir. Bir sanatçı, bir temel rengi seçebilir, ardından tınılar ve tonlarla derinlik, gölgeler ve vurgular oluşturabilir. Varyasyonlar arasında tıklamak yaratıcı sürecini hızlandırır ve paletin tutarlılığını korur.

Pazarlama Ekibi Marka Uyumluluğunu Korurken Marka rehberleri genellikle bir formatta renkleri belirtir, ancak farklı platformlar farklı kodlar gerektirir. Web sitesi için tanımlanmış bir marka mavi, PowerPoint şablonu için RGB eşdeğeri ve basılı broşür için CMYK versiyonu gerekebilir. Dönüştürücü, her ekibin üyenin kullandığı renk aynı kalmasını sağlar.

Erişilebilirlik Uzmanları Kontrast Kontrolü Yaparken Metnin bir arka plana karşı okunabilirliğini değerlendirmek için uzmanlar kesin renk değerlerine ihtiyaç duyar. Dönüştürücü, kontrast oranı hesaplayıcılarına doğrudan takılabilen kesin HEX ve RGB kodlarını sağlar ve WCAG uyumluluğunu doğrulamak için kullanılır.

İpuçları ve En İyi Uygulamalar

• Palet oluşturma için HSL ile başlayın. Eğer sıfırdan bir renk şeması oluşturuyorsanız, HSL kullanın. Tonu sabit tutun ve doygunluğu ve parlaklığı ayarlayarak uyumlu varyasyonlar oluşturun. Bu, RGB değerlerini doğrudan ayarlamaktan daha görsel olarak tutarlı paletler oluşturur.
• Basım yapmadan önce CMYK'ye dönüştürün. RGB ve HEX renkleri ışık yayan ekranlar için tasarlanmıştır. Ekranlarda parlak ve doygun görünen renkler — özellikle mavi ve yeşil — basıldığında kayabilir. Erken CMYK'ye dönüştürmek, renklerin mürekkepte nasıl görüneceğini görebilmenizi sağlar.
• Arka planlar için tınılar, metin için tonlar kullanın. Açık tınılar, içerikle rekabet etmeyen ince arka planlar için harikadır. Koyu tonlar, beyaz veya açık arka planlara karşı yeterli kontrast sağladığı için metin ve kenarlar için iyi çalışır.
• Platformunuzun beklediği formatı kopyalayın. CSS, HEX, RGB ve HSL'yi doğrudan kabul eder. JavaScript canvas RGB kullanır. Basım atölyeleri CMYK ihtiyaç duyar. Figma ve Sketch gibi tasarım yazılımları HEX kabul eder. Doğru formatı kopyalayarak dönüşüm hatalarını önleyin.
• Gerçek cihazlarda renkleri test edin. Monitörler, telefonlar ve tabletler arasında ekran kalibrasyonu değişir. Bilgisayarınızda mükemmel görünen bir renk, mobil cihazda farklı görünebilir. Tasarımları sonlandırmadan önce birkaç ekran üzerinde önizleme yapın.
• Renk körlüğüne dikkat edin. Yaklaşık %8 erkek ve %0.5 kadında renk algısı eksikliği vardır. Dönüştürücüyü kullanarak renk seçimlerinizin parlaklık farkları, sadece ton farklarından değil, ayırt edilebilir olmaları için yeterli olduğundan emin olun.
• Temel renklerinizi kaydedin. İdeal renk bulduğunuzda, tasarım sisteminizde veya stil rehberinizde HEX kodunu kaydedin. Projeler büyüdükçe ve daha fazla ekip üyesi katkıda bulundukça tek bir kaynak noktası, kaymaları önlemeye yardımcı olur.

Sıkça Sorulan Sorular

Renk Seçici ücretsiz mi?

Evet. Renk Seçici ve Dönüştürücü tamamen ücretsizdir, kullanım sınırlaması, kayıt veya reklam yoktur. Gerekirse renkleri seçin, dönüştürün ve kopyalayın.

Herhangi bir renk formatını herhangi bir diğerine dönüştürebilir miyim?

Evet. Araç, HEX, RGB, HSL ve CMYK arasında tam iki yönlü dönüşüm destekler. Herhangi bir formatta bir değer girin, diğer üçü gerçek zamanlı olarak otomatik olarak güncellenir.

Tınılar ve tonlar ne demektir?

Tınılar, temel renge beyaz ekleyerek daha açık hale getirilir. Tonlar, siyah ekleyerek daha koyu hale getirilir. Araç, seçtiğiniz renkten tını ve tonlar oluşturur, tasarım işleriniz için tam bir monokrom palet sunar.

Neden RGB renkleri basıldığında farklı görünür?

RGB, ışık yayan ekranlar için toplamadaki bir renk modelidir. CMYK, ışığı emen basıcılar için çıkarılan bir modeldir. Bazı RGB renkleri — özellikle parlak mavi, yeşil ve morlar — CMYK mürekkeplerinin ürettiği aralığın dışında kalabilir. CMYK'ye dönüştürmek, basılabilecek en yakın eşleşmeyi gösterir.

Bu araç mobil cihazlarda çalışır mı?

Evet. Renk Seçici tamamen yanıt verir ve akıllı telefonlar ve tabletlerde çalışır. Mobil cihazlarda yerel renk seçicisi masaüstü gibi açılır ve kopyalama butonları dokunmatik ekranlara uygun hale getirilmiştir.

Web geliştirme için hangi renk formatını kullanmalıyım?

HEX, en yaygın tercihtir çünkü kompakt ve CSS'de evrensel olarak desteklenir. RGBA ile şeffaflık ayarlamak gerektiğinde RGB kullanışlıdır. HSL, varyasyonlar ve animasyonlar oluşturmak için giderek daha popüler hale gelmiştir. Üçü modern tarayıcılarda çalışır.

HSL ve HSV arasındaki fark nedir?

HSL ve HSV (HSB olarak da bilinir) renkleri ton ve doygunlukla tanımlar, ancak üçüncü bileşeni farklı şekilde tanımlar. HSL, parlaklık kullanır, burada 0% siyah, 50% saf renk, 100% beyazdır. HSV, değer kullanır, burada 0% siyah, 100% renk en parlak versiyonudur. Web tasarımı için genellikle HSL tercih edilir çünkü parlaklık ölçeği erişilebilir paletler oluşturmak için daha sezgiseldir.