Renk Seçici ve Palet Oluşturucu

Ekrandaki her renk üç farklı şekilde tanımlanabilir ve bu araç hepsini birbiriyle senkron tutar: HEX, CSS ve tasarım araçlarında kullanılan kısa gösterimdir; RGB, rengi oluşturmak için ne kadar kırmızı, yeşil ve mavi ışığın birleştiğini anlatır; HSL — ton, doygunluk, açıklık — ise rengi insanın gerçekte düşündüğü gibi tarif eder: hangi ton, ne kadar canlı, ne kadar açık ya da koyu. Yerel renk örneğini sürükleyin, bir HEX kodu yazın ya da herhangi bir R/G/B veya H/S/L alanını doğrudan değiştirin; diğer tüm alanlar anında güncellenir. Böylece hesap yapmadan, renkleri nasıl düşünmeye alışkınsanız o şekilde çalışabilirsiniz.

Renk çemberi, seçtiğiniz ana renkten otomatik üretilen altı klasik uyum kuralının temelidir. Tamamlayıcı, bir rengi en güçlü kontrast için tam karşısındaki renkle eşler; komşu (analog), sakin ve bütünlüklü bir görünüm için çemberde yan yana duran renkleri seçer; üçlü ve dörtlü, canlı ama yine dengeli bir palet için üç ya da dört rengi çembere eşit aralıklarla yerleştirir; bölünmüş tamamlayıcı, karşıt rengin kendisi yerine onun iki yanındaki renkleri kullanarak tamamlayıcı çifti yumuşatır; tek renkli ise tek bir tonda kalıp yalnızca açıklığı değiştirir — tek bir marka renginin birkaç tonuna ihtiyaç duyan arayüzler için çoğu zaman en güvenli seçimdir.

Her iyi palet renk kuramıyla başlamaz — bazen sadece ne çıkacağını görmek istersiniz. Rastgele palet oluşturucu (Boşluk tuşuna basın veya Oluştur'a tıklayın) tonları ve açıklıkları çamurlaşmayı ya da aşırı pastel sonuçları önleyecek şekilde ayarlanmış beş renk üretir. Tutmak istediğiniz renk örneğinin kilit simgesine tıklayıp yeniden oluşturun: yalnızca kilitsiz renkler değişir; böylece Coolors gibi araçlarda olduğu gibi paleti adım adım kurabilirsiniz. HEX kodunu kopyalamak için herhangi bir örneğe tıklayın veya paletin altındaki düğmelerle tüm seti CSS özel özellikleri, SCSS değişkenleri, Tailwind yapılandırma parçası ya da JSON dizisi olarak kopyalayın; Illustrator ve Photoshop için Adobe .ase renk örnekleri dosyası da dışa aktarabilirsiniz. Ayrıca herhangi bir görselden palet çıkarabilir (yerelde işlenir, asla yüklenmez) ve beğendiğiniz paletleri daha sonra için tarayıcınıza kaydedebilirsiniz.

Güzel görünen bir renk seçmek, kullanılabilir bir renk seçmek demek değildir — açıklığı arka planına çok yakın bir renkle yazılmış metin okunamaz olabilir ve Web İçeriği Erişilebilirlik Yönergeleri (WCAG) bunun için belirli eşikler koyar: AA düzeyini geçmek için normal metinde en az 4,5:1, daha katı AAA düzeyi için 7:1 kontrast oranı gerekir. Kontrast denetleyici, seçtiğiniz renk ile hem beyaz hem de siyah metin arasındaki tam oranı WCAG şartnamesinin tanımladığı göreli parlaklık formülüyle hesaplar ve her kombinasyonun geçip geçmediğini işaretler; böylece düşük kontrastlı bir düğmeyi ya da başlığı yayına çıktıktan sonra değil, çıkmadan önce yakalayabilirsiniz.