Color Converter & Palette
HEX, RGB, HSL, HSV, CMYK anında dönüştürün.
Palet oluşturucu ve kontrast kontrolü içerir.
Renk Seçici
Renk Kodları
/* CSS Variables */ --color-primary: #3b82f6; --color-primary-rgb: 59, 130, 246; --color-primary-hsl: 217, 90%, 60%;
Renk Paleti
Kontrast Oranı
Beyaz Metin Aa
Ratio: -
Siyah Metin Aa
Ratio: -
Kaydedilen Renkler
Renkleri ⭐ kullanarak kaydedin (Maks 20)
Bunu da beğenebilirsiniz
Dönüştürücü Hakkında
Renk Kodu Dönüştürücü ve Palet Oluşturucu, beş ana renk formatı arasında anında dönüştürme yapan ücretsiz bir çevrimiçi araçtır: HEX, RGB, HSL, HSV ve CMYK. Sezgisel bir renk seçiciye sahiptir ve seçiminize göre tamamlayıcı ve benzer renkler gibi renk paletlerini otomatik olarak oluşturur.
Ayrıca, web erişilebilirliği için önemli bir standart olan yerleşik bir WCAG kontrast oranı denetleyicisi içerir, böylece seçtiğiniz arka plan rengi için beyaz veya siyah metnin uygun olup olmadığını anında belirleyebilirsiniz. Oluşturulan kodlar tek tıklamayla kopyalanabilir ve ayrıca web tasarımcıları ve front-end geliştiricileri için geliştirme verimliliğini önemli ölçüde artıran CSS değişkenleri olarak dışa aktarılabilir.
Nasıl Kullanılır
Renk Seçin veya Girin
Bir renk seçmek için renk seçicinin gradyan alanına tıklayın veya Ton ve Alfa kaydırıcılarını ayarlayın. Alternatif olarak, doğrudan HEX veya RGB alanlarına bir renk kodu girebilirsiniz.
Dönüştürme Kodlarını Kopyalayın
Rengi herhangi bir yöntemle değiştirdiğinizde, tüm renk formatları (HEX, RGB, HSL, HSV, CMYK) gerçek zamanlı olarak güncellenir. Pano kaydetmek için her öğenin yanındaki "Kopyala" düğmesine tıklayın. CSS değişkenlerini de aynı anda kopyalayabilirsiniz.
Palet ve Kontrastı Kontrol Edin
Tamamlayıcı ve monokromatik gibi renk varyasyonlarını görmek için alt kısımdaki "Renk Paleti" sekmesini değiştirin. "Kontrast Oranı" bölümünde, seçilen arka plan renginde beyaz/siyah metnin okunabilirliği otomatik olarak belirlenir.
Renk Sözlüğü
- HEX (Onaltılı Renk Kodu)
- Web tasarımında en yaygın kullanılan renk belirtim formatı. Kırmızı (R), Yeşil (G) ve Mavi (B) yoğunluğunu onaltılık (00-FF) olarak belirterek "#RRGGBB" (veya 3 haneli "#RGB") olarak 6 basamaklı ifade edilir. Saydamlık eklenirken, "#RRGGBBAA" olarak 8 basamaklı yazılır ve CSS ve HTML'de geniş çapta desteklenir.
- RGB / RGBA
- Işığın ana renklerine (Kırmızı, Yeşil, Mavi) dayalı toplamalı bir renk modeli. Ekranların renk oluşturma prensibine dayanarak, her renk 0'dan 255'e kadar bir değerle temsil edilir. CSS'de "rgb(255, 0, 0)" şeklinde yazılır ve "rgba" ile sonuna 0.0 ile 1.0 arasında bir alfa değeri (saydamlık) eklenebilir.
- HSL
- Rengi üç özellikle temsil eden bir model: Ton (Hue), Doygunluk (Saturation) ve Parlaklık (Lightness). "Renk tonunu değiştirme" veya "daha koyu yapma" gibi sezgisel olarak ayarlamak kolay olduğundan, CSS (hsl işlevi) ve dinamik tema değişiklikleri kullanarak tasarım sistemleri oluşturmak için son derece uygundur.
- CMYK
- Dört renk kullanan çıkarmalı bir renk modeli: Camgöbeği, Macenta, Sarı ve Anahtar (Siyah). Esas olarak baskı endüstrisinde kullanılan bir mürekkep formatıdır ve bir tarayıcıdaki CMYK değerleri yaklaşık teorik değerlerdir, bu nedenle gerçek baskı için profiller aracılığıyla ayarlamalar gereklidir.
- Kontrast Oranı (WCAG)
- Web Erişilebilirlik Yönergeleri tarafından tanımlanan, arka plan rengi ile metin rengi arasındaki bağıl parlaklığın oranı. Tüm kullanıcıların metni okuyabilmesini sağlamak için, normal metin için "4.5:1 (AA seviyesi)" veya daha yüksek, büyük metin için "3:1" veya daha yüksek bir oran önerilir.
Sık Sorulan Sorular
- Q.Baskı için CMYK dönüşüm sonuçları doğru mu?
- Tarayıcıda hesaplanan CMYK değerleri yaklaşık teorik değerlerdir. Gerçek basılı renkler, yazıcınızın ICC profiline ve mürekkep özelliklerine bağlı olarak değişebilir. Baskı için doğru CMYK verileri elde etmek için, Adobe Illustrator veya Photoshop gibi renk yönetimi yazılımlarını kullanarak dönüştürün ve doğrulayın.
- Q.Araç alfa (saydamlık) dönüşümünü destekliyor mu?
- Evet, destekliyor. Renk seçicideki "Alfa" kaydırıcısını ayarlayarak veya alfa değerini doğrudan koda girerek, HEX (#RRGGBBAA), RGBA ve HSLA kodları doğru bir şekilde üretilecektir. Bu, saydamlık gerektiren modern Web UI uygulamaları için idealdir.
- Q."CSS Değişkenlerini Kopyala" özelliği nedir?
- Bu özellik, seçilen rengi CSS özel özellikleri (CSS Değişkenleri) olarak çıkarır. RGB ve HSL için virgülle ayrılmış değerlerle birlikte --color-primary: #3b82f6; gibi biçimler oluşturarak Tailwind CSS yapılandırmalarını veya dinamik temaları kurmayı son derece kolaylaştırır.
- Q.Girdiğim renk verileri bir sunucuya kaydediliyor mu?
- Hayır. Bu araç tamamen istemci tarafında (tarayıcınızın içinde) çalışır. Renk kodlarınızın veya oluşturulan paletlerinizin hiçbiri harici sunuculara iletilmez veya kaydedilmez. "Favoriler" özelliği de renkleri yalnızca tarayıcınızın yerel depolama alanına kaydederek gizliliğinizi sağlar.
Kullanım Senaryoları
Web Tasarımı ve Kodlama
Figma veya XD gibi tasarım araçlarında belirtilen HEX kodlarını geliştirme için toplu olarak RGB veya HSL formatlarına dönüştürün. CSS değişkenlerini kullanarak modern tema oluşturmayı kolaylaştırın.
Erişilebilirlik İyileştirmesi
Kodlama sırasında site arka plan rengi ile metin rengi kombinasyonunun WCAG kontrast oranı standartlarını (AA/AAA) karşılayıp karşılamadığını anında kontrol ederek daha okunaklı bir UI elde edin.
Sunum Renk Düzeni İncelemesi
Kurumsal marka renklerine göre tamamlayıcı veya benzer renkler gibi ilgili paletleri otomatik olarak oluşturun. Uyumlu sunumlar ve grafik tasarımların renk düzenlerini düşünmek için kullanışlıdır.
Baskı Verileri için Dönüşüm Kılavuzu
Web'de kullanılan renkleri CMYK değerlerine dönüştürerek, broşürler ve kartvizitler gibi basılı materyalleri dağıtırken yaklaşık değerler için bir referans olarak kullanın.
Geri Bildirim Gönder
Aracı geliştirmemize yardımcı olmak için lütfen düşüncelerinizi bize bildirin.
Geri bildirim geçici olarak askıya alındı
Sunucu meşgul veya spam koruması etkin. Lütfen daha sonra tekrar deneyin.