Bu Renk Seçici Ne Yapabilir
- Görüntülerden* renk örnekleyin veya hassas bir renk çarkı veya HEX/RGB girişi ile başlayın
- Zengin dönüşümler: HEX, HEX8, RGB/A, HSL/A, HSV, CMYK, XYZ, LAB, LCH
- Göreceli parlaklık kullanarak #000000 ve #FFFFFF'e karşı yerleşik WCAG kontrast denetleyicisi
- Uygun olduğunda web güvenli ve kısa HEX önerileri
- Renk uyumları: tamamlayıcı, üçlü, dörtlü, benzer, tek renkli (ton döndürme ile hesaplanır)
- Kontrast sorunlarını öngörmek için parlaklık ve algılanan parlaklık önizlemesi
- En yakın RGB mesafesine dayalı yaklaşık Pantone benzeri eşleştirme (önbelleklenmiş veri seti ile)
- Analiz istemci tarafında çalışır; yalnızca isteğe bağlı Pantone araması etkinleştirildiğinde minimum veri kullanılır
🔧 Renk Seçici Nasıl Kullanılır for color-picker
1. Bir temel renk seçin veya alın
HEX değeri yapıştırın, RGB/HSL yazın veya seçiciyi kullanarak bir görüntüden veya çarktan renk alın. Araç bunu dahili olarak güvenli bir HEX değerine normalleştirir.
2. Ton ve parlaklığı hassas ayarlayın
Renk örneği doğru görünene kadar ton, doygunluk ve parlaklığı ayarlayın. Büyük bir önizleme, rengi açık ve koyu yüzeylerde bağlam için gösterir.
3. İhtiyacınız olan formatları okuyun ve kopyalayın
HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, XYZ, LAB ve LCH'yi tek tıklamayla kopyalayın. Bunları CSS değişkenleri, tasarım token'ları veya devir notları için kullanın.
4. WCAG kontrastını kontrol edin
sRGB parlaklığına dayalı olarak #000000 ve #FFFFFF'e karşı kontrast oranlarını görün. Sonuçları bir rengin gövde metni, büyük başlıklar veya UI öğeleri için çalışıp çalışmadığına hızlıca karar vermek için kullanın.
5. Uyumlar oluşturun ve bir palet oluşturun
Ton döndürme ile oluşturulan tamamlayıcı, üçlü, dörtlü, benzer ve tek renkli renkleri keşfedin. Favorilerinizi bir palete/geçmişe ekleyin ve bunları token olarak dışa aktarın.
Teknik Detaylar
Giriş İşleme & Normalleştirme
Araç onaltılık renk kodlarını kabul eder ve bunları dahili referans olarak normalleştirilmiş 6 haneli HEX'e dönüştürür.
| Yön | Davranış | Notlar |
|---|---|---|
| HEX normalizasyonu | 3 haneli ve 6 haneli HEX, isteğe bağlı baştaki # | Kısa HEX (örn. #0f8) #00ff88'e genişletilir; HEX olmayan karakterler çıkarılır. |
| HEX8 desteği | RGBA #RRGGBBAA ile | Alfa kanalı 0–255'e dönüştürülür ve 4. bayt olarak eklenir. |
| Web güvenli önerisi | Kanal başına en yakın 51 adıma yuvarla | Değerler en yakın 51 katına yuvarlanır (0, 51, 102, 153, 204, 255). |
| Kısa HEX önerisi | Yalnızca sıkıştırılabilir olduğunda | Her HEX hane çifti tekrarlandığında gösterilir (örn. #112233 → #123). |
Renk Uzayları & Dönüşümler
Tüm hesaplamalar D65 referans beyazına sahip sRGB temellidir.
| Uzay | Hesaplama | Kullanım |
|---|---|---|
| RGB | Normalize edilmiş HEX'ten (kanal başına 0–255) | Dönüşümler için temel temsil. |
| HSL / HSV | sRGB'den standart silindirik dönüşümler | Sezgisel düzenlemeler ve uyum hesaplamaları için kullanılır. |
| CMYK | Cihazdan bağımsız yaklaşım | 1−maks(R,G,B) olarak %0–100 bileşenlerle hesaplanır; ICC profillerine bağlı değildir. |
| XYZ | Doğrusallaştırılmış sRGB → D65 matrisi kullanılarak XYZ | LAB/LCH ve derin analiz için ara uzay. |
| LAB | XYZ'den CIE L*a*b* | Algısal olarak daha düzgün metrik uzay. |
| LCH | LAB'dan CIE L*C*h° | Ton/doygunluk/açıklık ayarlamaları ve algısal palet tasarımı için kullanışlıdır. |
Parlaklık & WCAG Kontrast
Kontrast, standart WCAG bağıl parlaklık formülü kullanılarak hesaplanır.
| Yön | Detaylar | Notlar |
|---|---|---|
| Göreli parlaklık | Doğrusallaştırılmış sRGB'den hesaplanır (Y bileşeni) | 0.2126R + 0.7152G + 0.0722B katsayıları kullanılır. |
| Kontrast oranı | (L1 + 0.05) / (L2 + 0.05) | Araç, #000000 ve #FFFFFF ile kontrastı raporlar. |
| WCAG eşikleri | Normal ve büyük metin için AA/AAA | Tipik eşikler: 4.5:1 (AA normal), 3:1 (AA büyük), 7:1 (AAA normal), 4.5:1 (AAA büyük). |
Armoniler & Türetilmiş Renkler
Armoniler, HSL'de doygunluk ve parlaklık korunarak basit renk tonu döndürmeleri olarak oluşturulur.
| Armoni | Kural | Örnek |
|---|---|---|
| Tamamlayıcı | +180° renk tonu | Renk tekerleğinde zıt nokta. |
| Triadik | ±120° renk tonu | Eşit aralıklı üç renk. |
| Tetradik | +90°, +180°, +270° renk tonu | Tekerlek üzerinde dikdörtgen oluşturan dört renk. |
| Analog | −30° / +30° renk tonu | Temel renk etrafındaki komşular. |
| Monokrom | L'de aydınlatma/koyulaştırma | Aynı renk tonunun daha açık ve koyu versiyonları. |
Pantone Benzeri Eşleştirme (Yaklaşık)
Pantone veri seti mevcut olduğunda, araç RGB uzayında en yakın eşleşmeyi hesaplar.
| Yön | Davranış | Notlar |
|---|---|---|
| Veri seti yükleme | getPantoneColors / getPantoneColorsCached ile önbelleğe alınmış + asenkron yükleme | Kullanıcı arayüzü, önbellek sıcakken anında bir eşleşme gösterebilir veya kısa bir asenkron yüklemeden sonra gösterebilir. |
| Eşleşme metriği | RGB (0–255) üzerinde karesel Öklid mesafesi | Hızlı, basit yaklaşım; algısal ΔE* metriği değildir. |
| Çıktı | Pantone benzeri ID ve isim | Yalnızca rehberlik amacıyla gösterilir; resmi bir Pantone eşlemesi değildir. |
Performans & Gizlilik
Dönüşümler, parlaklık, kontrast ve uyumlar tamamen istemci tarafında hesaplanır. Pantone araması yapılandırmaya bağlı olarak yerel veya uzak bir veri kümesine danışabilir, ancak ham renkler açıkça paylaşmadığınız veya dışa aktarmadığınız sürece basit HEX dizeleri olarak kalır.
Popüler Kullanım Senaryoları
UI/UX & Ön Yüz
- Düğmeler, bağlantılar ve metinler için erişilebilir ön plan/arka plan çiftleri oluşturun.
- Seçilen renklerden doğrudan CSS değişkenleri ve tasarım belirteçleri dışa aktarın.
- Tema değiştirici uygulamadan önce açık/koyu modlar için kontrastı kontrol edin.
/* CSS renk belirteçleri */
:root {
--brand: #4caf50;
--brand-rgb: 76, 175, 80;
--on-brand: #0b0b0b;
}
.button-primary {
background-color: var(--brand);
color: var(--on-brand);
}Markalaşma & Görsel Kimlik
- Tek bir ana renkten birincil/ikincil/vurgu paleti türetin.
- Bir logo veya ürün hattı için tamamlayıcı veya üçlü seçenekleri keşfedin.
- Marka kılavuzu hazırlamadan önce yaklaşık Pantone benzeri isimlendirme alın.
Veri Görselleştirme & Kontrol Panelleri
- Hem açık hem koyu arka planlarda ayırt edilebilir kalan seri renkleri tanımlayın.
- Kontrollü algısal adımlarla paletler tasarlamak için LAB/LCH kullanın.
- Grafik renklerinin lejant ve etiketlerde kontrast beklentilerini karşılayıp karşılamadığını hızla kontrol edin.
❓ Frequently Asked Questions
HEX, RGB, HSL ve HSV arasındaki fark nedir?
CMYK değerleri neden yaklaşık görünüyor?
LAB ve LCH ne için kullanışlıdır?
Kontrast nasıl hesaplanır?
Pantone isimleri kesin mi?
Görsellerimi veya renklerimi saklıyor musunuz?
Pro Tips
Renkleri her zaman hem açık hem de koyu yüzeylerde önizleyin; algılanan doygunluk ve kontrast bağlama göre büyük ölçüde değişebilir.
Ton ve gölgeler oluştururken, parlaklık değişimleri insan gözüne daha eşit görünsün diye LAB veya LCH kullanın.
Sadece varsayılan buton rengi için değil, tüm etkileşimli durumlar (üzerine gelme, aktif, devre dışı) için AA/AAA kontrastını kontrol edin.
CSS değişkenlerini veya tasarım token'larını formatlar sekmesinden dışa aktararak bileşenlerinizde renklerin tutarlı kalmasını sağlayın.
Görüntülerden örnekleme yaparken, sıkıştırma ve kenar yumuşatma gürültüsünü azaltmak için tek bir piksel yerine küçük bir alanın ortalamasını alın.
Additional Resources
Other Tools
- CSS Güzelleştirici
- HTML Güzelleştirici
- JavaScript Güzelleştirici
- PHP Güzelleştirici
- Sprite Çıkarıcı
- Base64 Çözücü
- Base64 Kodlayıcı
- C# Biçimlendirici
- CSV Biçimlendirici
- Dockerfile Formatter
- Elm Biçimlendirici
- ENV Biçimlendirici
- Go Biçimlendirici
- GraphQL Biçimlendirici
- HCL Biçimlendirici
- INI Biçimlendirici
- JSON Biçimlendirici
- Latex Biçimlendirici
- Markdown Biçimlendirici
- ObjectiveC Biçimlendirici
- Php Formatter
- Proto Biçimlendirici
- Python Biçimlendirici
- Ruby Biçimlendirici
- Rust Biçimlendirici
- Scala Biçimlendirici
- Shell Script Biçimlendirici
- SQL Biçimlendirici
- SVG Biçimlendirici
- Swift Biçimlendirici
- TOML Biçimlendirici
- Typescript Formatter
- XML Biçimlendirici
- YAML Biçimlendirici
- Yarn Biçimlendirici
- CSS Küçültücü
- Html Minifier
- Javascript Minifier
- JSON Küçültücü
- XML Küçültücü
- HTTP Başlıkları Görüntüleyici
- PDF'den Metne
- Regex Test Edici
- SERP Sıra Kontrolü
- Whois Sorgulama