$ tools/color-wheel

Renk Çarkı

Bir renk seç, bir harmoni seç — komplementer, analog, triadik ve daha fazlası — uyumlu palet üret. Hex, RGB, HSL ve CMYK, tıkla kopyala.

# Bir renk seç

parlaklık50%
RGB
HSL
HSB
CMYK

$ Uyum

$ Palet

$ Renk çarkı nasıl kullanılır

Ana rengini seçmek için çarkın herhangi bir yerine tıkla — açı tonu, merkeze olan uzaklık ise doygunluğu belirler. Aşağıdaki parlaklık kaydırıcısıyla rengi açıp koyulaştırabilir ya da doğrudan bir hex kodu yazabilirsin. Sonra sağdan bir uyum kuralı seç, palet anında güncellenir. Hex'ini kopyalamak için herhangi bir kareye tıkla ya da tüm seti bir kerede al.

Uyum türleri ne anlama gelir

Tamamlayıcı uyum, yüksek kontrast ve enerji için çarkın tam karşısındaki rengi kullanır. Yakın renkler (analog), sakin ve bütünlüklü bir his için komşu tonları seçer. Üçlü uyum, üç rengi eşit aralıkla yerleştirerek dengeli ama canlı bir set sunar. Bölünmüş tamamlayıcı, tamamlayıcı eşleşmeyi yumuşatır. Kare ve dörtlü uyum sana daha geniş bir aralıkta dört renkli şemalar verir. Tek renkli ve tonlar & gölgeler ise tek bir tonda kalır, yalnızca parlaklık değişir — sade, minimal arayüzler için biçilmiş kaftan.

Bu, uygulaman için neden önemli

Tutarlı bir palet, App Store ekran görüntülerinin, ikonunun ve öne çıkan görselinin rastgele renklerden oluşan bir yığın gibi değil, tek bir ürün gibi hissettirir. Marka rengini seç, bir uyum üret ve tam olarak o hex kodlarını ekran görüntüsü başlıklarında, arka planlarda ve mağaza görsellerinde tekrar kullan.

$ SSS

Bu ücretsiz mi?

Evet — tamamen ücretsiz, kayıt yok, limit yok. Hepsi tarayıcında çalışır.

HSL ile HSB arasındaki fark nedir?

İkisi de ton ve doygunluğu tanımlar, ama üçüncü değer farklıdır: HSL parlaklığı (lightness) kullanır (%0 siyah, %100 beyaz), HSB ise canlılığı (brightness) kullanır. Tasarımcılar web için genelde HSL'yi tercih eder; HSB ise Photoshop gibi araçlarda karşına çıkar. Bu çark sana her ikisini de verir.

Kendi marka rengimle başlayabilir miyim?

Evet. Hex kodunu kutuya yaz, çark ve palet anında ona uyacak şekilde güncellenir. Sonra etrafına bir uyum kurmak için bir kural seç.

Paleti tasarımımda nasıl kullanırım?

Hex'ini kopyalamak için herhangi bir kareye tıkla ya da tüm seti almak için "Tüm hex'leri kopyala" / "CSS değişkeni olarak kopyala" düğmelerini kullan. Doğrudan tasarım aracına veya stil dosyana yapıştır.

Daha fazla renk aracı

LaunchShots'ı sevdin mi?
Her zaman ücretsiz — vakit kazandırdıysa bir kahve ısmarlayabilirsin.
Destek ol →
kopyalandı ✓