ToolDeck'in renk araçları, renk formatları arasında dönüşüm yapmanıza, erişilebilirlik kontrast oranlarını kontrol etmenize, palet oluşturmanıza, CSS gradyanları derlemenize ve renk adlarını ya da Tailwind sınıflarını doğrudan tarayıcınızdan aramanıza olanak tanır. Renk Dönüştürücü, HEX, RGB, HSL ve HSV formatlarını her iki yönde de işler. Kontrast Denetleyicisi, WCAG 2.1 AA ve AAA uyumluluğunu test eder. Palet Oluşturucu, herhangi bir temel renkten tamamlayıcı, analog, triadik ve tetradik şemalar üretir. CSS Gradyan Oluşturucu, yapıştırmaya hazır doğrusal ve radyal gradyan kodu çıktılar. Renk Adı Bulucu, herhangi bir değeri en yakın CSS adlandırılmış rengine eşler; Tailwind Renk Bulucu ise rastgele renkleri Tailwind yardımcı sınıflarına dönüştürür. Tüm araçlar istemci tarafında çalışır; hiçbir sunucuya veri gönderilmez.
Renk Araçları Nedir?
Renk araçları, geliştiricilerin ve tasarımcıların dijital renk değerleriyle çalışmasına yardımcı olan yardımcı programlardır. Ekrandaki her renk sayılarla saklanır: RGB için üç kanal (kırmızı, yeşil, mavi), CSS kısayolu için bir hex üçlüsü ya da HSL için açısal ton ile doygunluk ve parlaklık. Bu gösterimler arasında elle geçiş yapmak yavaş ve hataya açıktır; özellikle alfa şeffaflığını veya OKLCH gibi daha yeni modelleri de hesaba katmanız gerektiğinde.
Format dönüşümünün ötesinde, renk çalışması erişilebilirlik testi, palet oluşturma ve gradyan yazımını kapsar. WCAG 2.1, gözle doğrulanması güç minimum kontrast oranları tanımlar (AA düzeyinde normal metin için 4,5:1, AAA için 7:1). Uyumlu renk şemaları oluşturmak, HSL renk çarkında hassas açı hesapları gerektirir. CSS gradyanlar, yön, renk durakları ve yedek değerler için doğru sözdizimi ister. Onlarca token içeren bir tasarım sisteminde bunların herhangi birini elle yapmak hızla yorucu hale gelir.
Renk araçları bu görevleri otomatikleştirir. Bir rengi bir formatta alır, matematiği hesaplar ve ihtiyacınız olan sonucu döndürür: dönüştürülmüş bir değer, geçti/kaldı erişilebilirlik kararı, uyumlu bir renk seti veya CSS kod parçası. Araç tarayıcıda çalıştığında, hassas tasarım tokenlarını üçüncü taraf hizmetlere yükleme riskinden de korunmuş olursunuz.
ToolDeck'te Renk Araçları Neden Kullanılmalı?
ToolDeck'in renk araçları tamamen tarayıcınızda çalışır. Hiçbir renk değeri makinenizden çıkmaz, hesap gerekmez ve uzantı ya da masaüstü yazılımı yüklemeden her araç anında yüklenir.
🎨Formatları tek adımda dönüştürün
Bir HEX kodu yapıştırın ve RGB, HSL ile HSV değerlerini aynı anda alın. Birden fazla dönüştürücüyü zincirlemenize ya da dönüşüm formüllerini hatırlamanıza gerek yok.
🔒Tasarım tokenlarını gizli tutun
Tüm işlemler istemci tarafında gerçekleşir. Marka renkleriniz, yayınlanmamış palet kararlarınız ve dahili tasarım sistemi değerleriniz cihazınızda kalır.
♿Erişilebilirliği anında test edin
Herhangi bir ön plan/arka plan rengini WCAG 2.1 AA ve AAA eşiklerine göre hem normal hem de büyük metin boyutları için kontrol edin. Yalnızca geçti/kaldı etiketiyle değil, tam kontrast oranıyla çalışın.
⚡Üretime hazır çıktıları kopyalayın
Her araç, doğrudan CSS, Tailwind yapılandırması veya tasarım aracı giriş alanlarına yapıştırabileceğiniz değerler çıktılar. Yeniden biçimlendirme gerekmez.
Renk Araçlarının Kullanım Senaryoları
ToolDeck'in renk araçlarının zaman kazandırdığı altı yaygın senaryo aşağıda verilmiştir.
Tasarım Sistemi Bakımı
Bir tasarım sistemini güncellerken, tasarımcıdan HEX formatında renkler alırsınız ancak CSS özel özellikleri için HSL'ye ihtiyaç duyarsınız.
Renk Dönüştürücü, formatlar arasında çeviri yaparak token dosyalarını elle hesap yapmadan doldurmanıza olanak tanır.
Erişilebilirlik Denetimleri
WCAG uyumluluk denetimi sırasında, her metin/arka plan kombinasyonunun minimum kontrast oranlarını karşılaması gerekir.
Renk Kontrast Denetleyicisi, hem normal hem de büyük metin boyutları için tam oranı ve AA/AAA geçiş durumunu gösterir.
Marka Paleti Araştırması
Tek bir marka renginden başlayarak vurgu ve nötr varyantlara ihtiyaç duyarsınız.
Renk Paleti Oluşturucu, bir palete geçmeden önce seçenekleri değerlendirmeniz için tamamlayıcı, analog, triadik ve tetradik uyumları hesaplar.
CSS Arka Plan Stillendirme
Gradyanlı bir hero bölümü veya kart arka planı oluşturmak, açılar, renk durakları ve satıcı önekleri için doğru CSS sözdizimi gerektirir.
CSS Gradyan Oluşturucu, gradyanı görsel olarak oluşturmanıza ve kodu kopyalamanıza olanak tanır.
Tailwind Göçü
Bir projeyi Tailwind CSS'e taşırken, mevcut HEX veya RGB değerlerini en yakın Tailwind yardımcı sınıfına eşlemeniz gerekir.
Tailwind Renk Bulucu, en yakın eşleşmeyi bulur ve yaklaşımın kabul edilebilir olup olmadığına karar vermeniz için farkı gösterir.
Kod İncelemesi ve Dokümantasyon
Kod incelemesi sırasında #708090 gibi ham bir HEX değeri ilk bakışta hiçbir şey ifade etmez.
Renk Adı Bulucu, bunu SlateGray olarak tanımlar ve incelemeleri ile dokümantasyonu daha okunabilir hale getirir.
CSS Renk Modeli Referansı
CSS birden fazla renk modelini destekler. Aşağıdaki tablo en yaygın altı formatı, sözdizimlerini ve tipik kullanım senaryolarını özetler. Bunların tümü ToolDeck'in Renk Dönüştürücüsü tarafından desteklenmektedir.
| Model | CSS Sözdizimi | Kanallar | Değer Aralığı | Tipik Kullanım |
|---|
| HEX | #rrggbb | Kırmızı, Yeşil, Mavi | Kanal başına 00–ff | CSS, tasarım teslimlerinde ve marka kılavuzlarında en yaygın format |
| RGB | rgb(r, g, b) | Kırmızı, Yeşil, Mavi | Kanal başına 0–255 | JavaScript canvas API, hesaplanmış stiller, görüntü işleme |
| HSL | hsl(h, s%, l%) | Ton, Doygunluk, Parlaklık | 0–360 / 0–100% / 0–100% | Tasarım tokenları, tema üretimi, programatik gölge varyantları |
| HSV | N/A (CSS'te yok) | Ton, Doygunluk, Değer | 0–360 / 0–100% / 0–100% | Renk seçiciler (Photoshop, Figma), donanım renk kalibrasyonu |
| OKLCH | oklch(L C H) | Parlaklık, Kroma, Ton | 0–1 / 0–0.4 / 0–360 | Algısal olarak düzgün paletler (CSS Color Level 4 spec) |
| Named | örn. slategray | İçsel olarak RGB'ye eşlenir | 148 önceden tanımlanmış ad | Prototipleme, okunabilir kod, hızlı gösterimler |
CSS Color Level 4 (W3C) ayrıca lab(), lch() ve color() işlevlerini tanımlar. HEX ve RGB, tarayıcılar ve tasarım araçları genelinde en geniş desteğe sahip olmaya devam eder.
Doğru Renk Aracını Nasıl Seçersiniz
Her renk aracı farklı bir sorunu çözer. Göreviniz için doğru aracı bulmak üzere aşağıdaki kılavuzu kullanın.
- 1
Eğer ihtiyacınız varsa HEX, RGB, HSL veya HSV formatları arasında renk dönüştürmek → Renk Dönüştürücü - 2
Eğer ihtiyacınız varsa bir metin/arka plan renk çiftinin WCAG erişilebilirlik standartlarını karşıladığını doğrulamak → Renk Kontrast Denetleyicisi - 3
Eğer ihtiyacınız varsa tek bir temel renkten uyumlu renkler seti oluşturmak → Renk Paleti Oluşturucu - 4
Eğer ihtiyacınız varsa doğrusal veya radyal CSS gradyanı derleyip kodu almak → CSS Gradyan Oluşturucu - 5
Eğer ihtiyacınız varsa verilen bir renk değerine en yakın, insan tarafından okunabilir CSS adını bulmak → Renk Adı Bulucu - 6
Eğer ihtiyacınız varsa rastgele bir rengi en yakın Tailwind CSS yardımcı sınıfına eşlemek → Tailwind Renk Bulucu
Altı aracın tümü birden fazla formatta girdi kabul eder. Renginizin hangi formatta olduğundan emin değilseniz, HEX, RGB, HSL ve HSV gösterimini otomatik algılayan Renk Dönüştürücü ile başlayın.
Sıkça Sorulan Sorular
HEX ve RGB renk formatları arasındaki fark nedir?
HEX ve RGB aynı renk uzayını temsil eder. #ff6600 gibi bir HEX kodu, üç RGB kanalının onaltılık kodlamasıdır: ff = 255 (kırmızı), 66 = 102 (yeşil), 00 = 0 (mavi). Tek fark gösterimdir. HEX, CSS stil sayfalarında daha kısadır; RGB ise her kanalın zaten ondalık bir tamsayı olduğundan programatik olarak işlemesi daha kolaydır.
HEX veya RGB yerine ne zaman HSL kullanmalıyım?
HSL, tonu (rengin kendisi) doygunluk ve parlaklıktan ayırır. Bu, gölge varyantları oluşturmayı kolaylaştırır: tonu sabit tutun, daha koyu bir gölge için parlaklığı düşürün, daha açık bir ton için yükseltin. Tek bir temel renkten açık/koyu temalar üreten tasarım sistemleri, bu nedenle tokenları genellikle HSL olarak saklar. CSS özel özellikleri de HSL ile iyi uyum sağlar çünkü bireysel kanalları geçersiz kılabilirsiniz.
WCAG 2.1 metin için hangi kontrast oranını gerektirir?
WCAG 2.1 Seviye AA, normal metin (18pt altı veya 14pt kalın altı) için minimum 4,5:1 ve büyük metin (18pt+ veya 14pt+ kalın) için 3:1 kontrast oranı gerektirir. Seviye AAA bu eşikleri sırasıyla 7:1 ve 4,5:1'e yükseltir. Bu oranlar, WCAG 2.1 Başarı Kriteri 1.4.3'te tanımlanan formül kullanılarak ön plan ve arka plan renklerinin göreli parlaklığından hesaplanır.
CSS kaç adlandırılmış rengi destekler?
CSS, SVG 1.1 ve CSS3 renk belirtimlerinden miras alınan 148 adlandırılmış renk tanımlar. Bunlar red, blue ve white gibi yaygın adlardan MediumSlateBlue, PapayaWhip ve LavenderBlush gibi özgün adlara kadar uzanır. Adlandırılmış renkler sabit RGB değerlerine eşlenir. CSS Color Level 4 spesifikasyonu aynı 148 adı korur ve yeni ad eklemez. Tarayıcılar ayrıca transparent anahtar sözcüğünü de tanır (rgba(0,0,0,0) ile eşdeğer).
Bugün CSS'te OKLCH renklerini kullanabilir miyim?
Evet. oklch() işlevi Chrome 111+, Firefox 113+ ve Safari 15.4+ sürümlerinde desteklenmektedir. OKLCH, W3C tarafından yayımlanan CSS Color Level 4 spesifikasyonunun bir parçasıdır. HSL'ye göre temel avantajı algısal düzgünlüktür: OKLCH'de aynı parlaklık değerine sahip iki renk insan gözüne gerçekten eşit parlaklıkta görünür; bu HSL için geçerli değildir. Bu durum, OKLCH'yi tutarlı algısal parlaklıkla erişilebilir paletler oluşturmak için daha iyi bir seçenek yapar.
HSL ile HSV arasındaki fark nedir?
HSL ve HSV ikisi de tonu bir açı olarak kullanan silindirik bir gösterime sahiptir, ancak parlaklığı farklı tanımlar. HSL'de %50 parlaklık saf renktir; %0 siyah, %100 beyazdır. HSV'de %100 değer saf renktir; %0 siyahtır. HSV'nin doygunluğu düşürmeden beyaza ulaşmak için yerleşik bir yolu yoktur. Tasarımcılar ve renk seçiciler (Photoshop, Figma) genellikle HSV kullanırken, CSS yerel olarak HSL kullanır.
Rastgele bir HEX rengi için Tailwind sınıfını nasıl bulabilirim?
Tailwind CSS, yaklaşık 220 renk sınıfından oluşan sabit bir palet içerir (22 ton çarpı 10 gölge, artı siyah, beyaz ve şeffaf). Belirli bir HEX değeri için en yakın sınıfı bulmak üzere renginiz ile her Tailwind örneği arasındaki Öklid mesafesini algısal bir renk uzayında (CIELAB veya OKLCH gibi) hesaplarsınız. ToolDeck'teki Tailwind Renk Bulucu bunu otomatik olarak yapar ve yaklaşımın yeterince iyi olup olmadığını değerlendirmeniz için en yakın eşleşmeyi renk farkıyla birlikte gösterir.
Gizli marka renklerini çevrimiçi bir araca yapıştırmak güvenli midir?
Bu araca bağlıdır. Girdinizi bir sunucuya gönderen herhangi bir araç, bu değerleri ağ trafiğinde ve sunucu günlüklerinde açığa çıkarır. ToolDeck'in renk araçları tamamen tarayıcınızda istemci taraflı JavaScript kullanılarak çalışır. Hiçbir HTTP isteği renk verilerinizi herhangi bir sunucuya taşımaz. Bunu, aracı kullanırken tarayıcınızın Ağ sekmesini açarak doğrulayabilirsiniz. Maksimum güvenlik için, araçları ilk sayfa yüklendikten sonra çevrimdışı olarak da kullanabilirsiniz.