Online Renk Seçici
Çarkta bir renk seçin, doygunluk tuvalinde ince ayar yapın ve onu projenizin konuştuğu her formatta okuyun — #RRGGBB’den oklch()’e kadar. Bu seçici, diğer araçların atladığı kısımları da yapar: ressamların RYB çarkı dahil üç farklı çark geometrisi, sizin için bir palet oluşturan uyum katmanları, bir alfa kanalı ve tüm paletin CSS değişkenleri, SCSS veya JSON olarak tek tıkla dışa aktarımı. Hepsi tarayıcınızda, yerel olarak hesaplanır.
Bir değil, üç çark
Çark Modu seçici, çarkın geometrisini değiştirir:
- HSV ve HSL dijital çarklardır — tonlar, RGB ekranların ışığı karıştırma biçimine göre dizilir. İkisi arasındaki fark, kare tuvalin davranışındadır: HSV’de en parlak köşe saf tondur, HSL ise saf tonları üstte beyazın bulunduğu %50 açıklıkta konumlandırır.
- RYB (ressam çarkı), tonları ressamların öğrendiği şekilde dizer: birincil renkler olarak kırmızı, sarı ve mavi; aralarında turuncu, yeşil ve mor. Pratik değeri uyumlarda ortaya çıkar — RYB çarkında kırmızının tamamlayıcısı yeşil, mavinin tamamlayıcısı ise turuncudur; bunlar klasik pigment eşleridir, oysa dijital bir çark kırmızıyı camgöbeğiyle eşleştirir. Sıradan bir seçicideki “tamamlayıcı” bir palet gözünüze hiç yanlış geldiyse, sebebi budur.
Sizin için paleti kuran uyumlar
Renk Uyumu altından bir kural seçin, çark eşlik eden renkleri işaretlesin — bunlar hazır bir palet olarak belirir:
- Tamamlayıcı — tek bir karşıt renk. En güçlü kontrast; baskın bir marka rengine karşı tek bir vurgu için kullanın.
- Ayrık Tamamlayıcı — tamamlayıcının iki komşusu. Neredeyse aynı kontrast, ama dengelemesi çok daha kolay.
- Üçlü (Triadik) — eşit aralıklı üç ton. Canlı ama dengeli; birinin baskın olmasına izin verip diğer ikisini az kullanın.
- Dörtlü (Kare) — dört ton. İllüstrasyonlar ve veri görselleştirmeleri için zengin şemalar; arayüz çalışmasında dengelemesi zor.
- Analog — hemen bitişik tonlar. Düşük gerilim, arka planlar ve degradeler için uygun.
- Tek Renkli (Monokromatik) — kademeli açıklıkta tek bir ton. Arayüz durumları (üzerine gelme, aktif, devre dışı) için en güvenli seçim.
Palet paneli tüm seti seçtiğiniz formatta tek tıkla kopyalar: sade HEX, RGB, HSL, OKLCH, doğrudan yapıştırılabilir CSS özel özellikleri (--color-1: …), SCSS değişkenleri veya kodunuza aktarmak için JSON.
Her şeyi yapıştırın, her şeyi okuyun
Giriş alanları neredeyse her renk gösterimini kabul eder: #f80, #ff8800, alfa içeren 8 haneli hex, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 veya rebeccapurple gibi CSS renk isimleri. Ne girerseniz girin, her biri kendi kopyalama düğmesiyle yedi eşzamanlı çıktı geri gelir: HEX, RGB, HSL, HSV, LCH, OKLCH ve CMYK.
Önizlemenin altındaki iki yardımcı etiket, rengi sizin için adlandırır: en yakın CSS renk adı (hızlı prototipler ve renk hakkında konuşmak için kullanışlı) ve en yakın Tailwind token’ı (örn. orange-500), böylece tek seferlik değerler uydurmak yerine tasarım sisteminizin içinde kalabilirsiniz.
Önizlemenin altındaki alfa kaydırıcısını sürükleyin, çıktılar saydam biçimlerine geçsin — #RRGGBBAA, rgba(), hsla() — önizleme de saydamlığı değerlendirebilmeniz için bir dama tahtası üzerinde gösterilir.
Hangi formatı kullanmalısınız?
| Format | Tam Adı | Ne Zaman Kullanmalı? |
|---|---|---|
| HEX | Onaltılık | Web standardı. Kompakt, evrensel olarak desteklenir, kopyalaması kolay. 8 hane alfa ekler. |
| RGB | Kırmızı, Yeşil, Mavi | Ekranların düşünme biçimi. Üç ışık kanalı, 0–255 arası. Çoğu API’nin ve canvas kodunun beklediği format. |
| HSL | Ton, Doygunluk, Açıklık | Elle düzenleyen insanlar için. “Biraz daha açık” veya “daha az doygun” tek bir sayı değişikliğidir. |
| HSV | Ton, Doygunluk, Değer | Grafik yazılımları. Photoshop ve GIMP’teki seçicilerin arkasındaki model. |
| LCH | Açıklık, Renk Doygunluğu, Ton | Algısal olarak tekdüze. Eşit sayısal adımlar eşit görsel adımlar gibi görünür — HSL’nin olduğunu iddia ettiği şey aslında budur. |
| OKLCH | OK Açıklık, Renk Doygunluğu, Ton | Modern CSS tercihi. LCH’nin mavilerdeki ton kaymasını düzeltir; tüm güncel tarayıcılarda desteklenir ve tasarım-token sistemleri için idealdir. |
| CMYK | Camgöbeği, Macenta, Sarı, Siyah (Key) | Baskı odaklı. Baskı tasarımcılarıyla konuşmak için yaklaşık bir dönüşüm — nihai değerler her zaman yazıcının renk profilinden gelir. |
Zaman kazandıran küçük ayrıntılar
- Geçmiş kendini korur. Üzerinde çalıştığınız son 24 renk, sayfa yenilendiğinde de kalır — yalnızca tarayıcınızın yerel deposunda saklanır, hiçbir yere yüklenmez.
- Damlalık (Eyedropper). EyeDropper API’sini destekleyen tarayıcılarda (Chrome ve Edge) ekranın herhangi bir yerinden, hatta tarayıcı penceresinin dışından bile bir renk seçebilirsiniz.
- Klavye kontrolü. Çark ve doygunluk tuvali, piksel hassasiyetinde ayarlar için ok tuşlarına yanıt verir.
- Hazır Ayarlar, hızlı bir başlangıç noktasına ihtiyaç duyduğunuzda yaygın temel renkleri kapsar.
Sıkça Sorulan Sorular (SSS)
oklch() üretim CSS'inde kullanmak güvenli mi?
Evet. Chrome, Edge, Firefox ve Safari'nin tüm güncel sürümlerioklch()'i destekler ve bu, tasarım tokenları için tercih edilen gösterim haline gelmiştir (Tailwind CSS 4 tüm paletini bu formatla tanımlar). Çok eski tarayıcılar için bir önceki satıra bir HEX yedeği koyun — bu araç size her iki değeri de verir.