Renk seçici

Çarkta bir renk seçin, doygunluk ve parlaklık düzleminde ince ayar yapın, ardından onu projenizin kullandığı her formatta okuyun: #RRGGBB’den oklch()’e kadar. Bu araç diğer renk seçicilerin atladığı şeyleri de sunar: ressamların geleneksel RYB çarkı dahil üç farklı çark düzeni, sizin yerinize paleti kuran hazır uyum kuralları, bir opaklık kanalı ve tüm paletin CSS değişkenleri, SCSS veya JSON olarak tek tıkla dışa aktarımı. Her şey tarayıcınızda hesaplanır.

RYB mi, RGB mi? Bir değil, üç renk çarkı

Çark Modu seçeneği, tonların çark üzerindeki dizilişini değiştirir:

• HSV ve HSL dijital çarklardır. Tonlar, ekranda ışığın karıştığı biçimde dizilir. Aralarındaki fark kare düzlemde görülür: HSV’de en parlak köşe saf tondur, HSL ise saf tonları orta açıklıkta, üstünde beyaz olacak şekilde konumlandırır.
• RYB (ressam çarkı), tonları ressamların öğrendiği sırayla dizer: kırmızı, sarı ve mavi ana renkler, aralarında turuncu, yeşil ve mor (RYB renk modeli, Vikipedi). Farkı en çok uyumlarda fark edersiniz. RYB çarkında kırmızının tamamlayıcısı yeşil, mavinin tamamlayıcısı ise turuncudur; bunlar resim derslerinden bilinen klasik çiftlerdir. Dijital çark ise kırmızıyı camgöbeğiyle eşleştirir. Sıradan bir renk seçicideki “tamamlayıcı” palet size hep yanlış görünüyorsa, sebebi budur.

Paleti sizin yerinize kuran renk uyumları

Renk Uyumu alanından bir kural seçin. Çark eşlik eden renkleri işaretler, altında da hazır bir palet belirir:

• Tamamlayıcı: tek bir karşıt renk. En güçlü kontrast, baskın bir marka rengi yanında tek bir vurgu için uygundur.
• Ayrık Tamamlayıcı: tamamlayıcının iki komşusu. Neredeyse aynı kontrast, ama dengelemesi çok daha kolay.
• Üçlü (Triadik): çark üzerinde eşit aralıklı üç ton. Biri baskınken diğer ikisi ölçülü kullanıldığında canlı ama dengeli durur.
• Dörtlü (Kare): dört ton. İllüstrasyon ve grafikler için zengin şemalar sunar, uygulama arayüzünde dengelemesi zordur.
• Analog: en yakın komşu tonlar. Arka plan ve geçişler için sakin bir kombinasyon.
• Tek Renkli (Monokromatik): birkaç açıklık seviyesinde tek bir ton. Buton durumları (üzerine gelme, aktif, devre dışı) için en güvenli seçim.

Tüm paleti istediğiniz formatta tek tıkla kopyalayın: sade HEX, RGB, HSL, OKLCH, doğrudan yapıştırılabilir CSS özel özellikleri (--color-1: …), SCSS değişkenleri veya kod için JSON. Paletin, renkleri ayırt etmekte zorlanan kişiler için de kontrastı koruyup korumadığını görmek isterseniz bir ekran görüntüsü alıp gri tonlamaya dönüştürün.

HEX, RGB, HSL, OKLCH ve CMYK dönüştürün: ne yapıştırırsanız yapıştırın, hepsini okuyun

Giriş alanları hemen hemen her renk gösterimini kabul eder: #f80, #ff8800, opaklıklı sekiz haneli hex, rgb() ve rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 ve rebeccapurple gibi adlandırılmış CSS renkleri. Ne girerseniz girin, her birinin kendi kopyalama düğmesi olduğu yedi eşleşen çıktı elde edersiniz: HEX, RGB, HSL, HSV, LCH, OKLCH ve CMYK.

Önizlemenin altındaki Opaklık (alfa) kaydırıcısı çıktıları saydam biçimlerine çevirir: #RRGGBBAA, rgba() ve hsla(). Önizleme bir dama tahtası üzerinde çizilir, böylece saydamlığı bir bakışta görürsünüz.

En yakın Tailwind CSS tokenini bulun

Önizlemenin altındaki iki etiket rengi sizin için adlandırır: en yakın adlandırılmış CSS rengi (hızlı prototipler için kullanışlı) ve en yakın Tailwind tokeni, örneğin orange-500. Böylece tek seferlik değerler uydurmak yerine tasarım sisteminizin içinde kalırsınız. Etikete tıklayarak kopyalayabilirsiniz.

Bu, her tasarım teslimatında karşınıza çıkan soruyu yanıtlar: tasarımcı size bir hex kod gönderdi, hangi Tailwind sınıfı ona en yakın? Eşleşme, varsayılan Tailwind CSS 4 paletine göre hesaplanır (bkz. Tailwind renk dokümantasyonu, İngilizce), yani tokeni doğrudan sınıf adında kullanabilirsiniz.

Hangi renk formatını kullanmalısınız?

Format	Tam adı	Ne zaman kullanılır
HEX	Hexadecimal	Web için varsayılan. Kısa, her yerde desteklenir, kopyalaması kolay. Sekiz hane opaklık ekler.
RGB	Red, Green, Blue	Ekranların düşünme biçimi. 0 ile 255 arasında üç ışık kanalı. Çoğu API’nin ve canvas kodunun beklediği format.
HSL	Hue, Saturation, Lightness	Göz kararıyla düzenlemek için. “Biraz daha açık” veya “daha az doygun” tek bir sayıyı değiştirmek demektir.
HSV	Hue, Saturation, Value	Grafik programları. Photoshop ve GIMP’teki renk seçicilerin dayandığı model.
LCH	Lightness, Chroma, Hue	Algısal olarak tekdüze. Eşit sayısal adımlar eşit görsel adımlar gibi görünür; HSL bunu yalnızca taklit eder.
OKLCH	OK Lightness, Chroma, Hue	Modern CSS tercihi. LCH’yi rahatsız eden mavi tonlardaki kaymayı düzeltir. Tüm güncel tarayıcılarda desteklenir ve tasarım tokenleri için idealdir.
CMYK	Cyan, Magenta, Yellow, Key	Baskı için yön gösterir. Matbaayla konuşmak için yaklaşık bir dönüşüm, nihai değerleri matbaanın renk profili belirler.

OKLCH’nin eski modellerden neden daha algısal tekdüze olduğunu Oklab uzayını tasarlayan Björn Ottosson orijinal makalesinde (İngilizce) anlatıyor. Sözdizimini ve tarayıcı desteğini MDN (İngilizce) özetliyor. Baskı modelinin nasıl çalıştığını Vikipedi’nin CMYK maddesi anlatıyor.

Zaman kazandıran küçük ayrıntılar

• Geçmiş kendiliğinden saklanır. Son 24 renk, sayfa yenilendiğinde de kalır. Yalnızca tarayıcınızın deposunda durur ve hiçbir yere gönderilmez.
• Damlalık. EyeDropper API’sini destekleyen tarayıcılarda (Chrome ve Edge) ekranın herhangi bir yerinden, hatta tarayıcı penceresinin dışından bile renk seçebilirsiniz. Bir fotoğraftan veya logo dosyasından renk almak isterseniz online damlalığı kullanın.
• Klavye kontrolü. Çark ve doygunluk-parlaklık düzlemi ok tuşlarına yanıt verir, böylece rengi küçük adımlarla ayarlayabilirsiniz.
• Hazır Ayarlar, yalnızca hızlı bir başlangıç noktasına ihtiyacınız olduğunda yaygın temel renkleri sunar.

Sıkça Sorulan Sorular

OKLCH'yi HEX'e nasıl dönüştürürüm?

oklch() değerini OKLCH alanına yapıştırın, HEX dahil diğer tüm çıktılar hemen güncellenir. Tersi de çalışır: bir HEX kodu girin ve karşılık gelen oklch() değerini okuyun. Tek bir uyarı var: OKLCH, sRGB aralığı dışındaki renkleri de tanımlayabilir ve bunlar sRGB'nin gösterebildiği değere kırpılır. Bu yüzden çok doygun bir oklch(), geniş gamutlu bir ekranda HEX karşılığıyla aynı görünmeyebilir.

oklch() üretim CSS'inde kullanılabilir mi?

Evet. Chrome, Edge, Firefox ve Safari'nin tüm güncel sürümleri oklch()'i destekler ve tasarım tokenleri için popüler bir gösterim haline gelmiştir (Tailwind CSS 4 tüm paletini bu formatta tanımlar). Çok eski tarayıcılar için bir satır önce HEX yedeği ekleyin. Bu araç size her iki değeri de verir.

RYB çarkına geçtiğimde uyumlar neden değişiyor?

Çünkü "karşıt" olan şey, tonların çember üzerinde nasıl dizildiğine bağlıdır. RYB çarkı pigment ana renklerini eşit aralıklarla dizer, bu yüzden tamamlayıcı çiftler ressamların bildiği çiftlerle örtüşür: kırmızı ve yeşil, mavi ve turuncu, sarı ve mor. HSV ve HSL çarkları tonları ışığın karışım biçimine göre dizer, bu yüzden kırmızıyı camgöbeğiyle eşleştirir. İkisi de yanlış değildir: RYB geleneksel sanat eğitimine, HSV ve HSL ise ekranların yaptığına uyar.

Baskı için CMYK değerlerine güvenebilir miyim?

Bunları yönlendirme olarak görün. Gerçek baskı dönüşümü, yazıcının, kağıdın ve mürekkebin ICC profiline (İngilizce) bağlıdır. Aynı RGB rengi kuşeli ve kuşesiz kağıtta farklı çıkar. Buradaki değerler standart bir formülle hesaplanır ve sizi yaklaştırır, ama son baskı matbaanın işidir.

Damlalık düğmesi Firefox veya Safari'de neden yok?

Bu kasıtlı bir eksiklik. Düğmenin dayandığı EyeDropper API (MDN, İngilizce), şu an yalnızca Chromium tabanlı tarayıcılarda (Chrome, Edge, Opera) çalışıyor. Aracın diğer tüm özellikleri her yerde çalışır, yalnızca ekrandan renk seçme eksiktir. Bir görselden renk almanız gerekiyorsa, tüm tarayıcılarda çalışan online damlalığı kullanın.

Renk geçmişim özel mi kalıyor?

Evet. Geçmiş, cihazınızdaki tarayıcının localStorage'ında saklanır. Seçtiğiniz, yapıştırdığınız veya kopyaladığınız hiçbir şey herhangi bir yere gönderilmez. Araç tamamen tarayıcıda JavaScript olarak çalışır; bunu geliştirici araçlarındaki Ağ sekmesinden kendiniz doğrulayabilirsiniz.