Renk Paleti Oluşturucu - Uyumlu Renk Şemaları Oluşturun

Renk paleti oluşturucu nedir?

Renk paleti oluşturucu, başlangıç rengi olarak adlandırılan bir ana renkten uyumlu renklerden oluşan bir küme oluşturan bir araçtır. Bu renk paleti oluşturucu, bir ana renk ve bir uyum türü alır, ardından renk teorisi kurallarını kullanarak paletin geri kalanını hesaplar. Desteklediği dört uyum türü tamamlayıcı, benzer, üçlü ve monokromatiktir.

Araç paleti nasıl oluşturur?

Araç, ana rengi onaltılık koddan (örneğin #3B82F6) HSL renk modeline dönüştürür. HSL, bir rengi üç sayıyla tanımlar:

• Ton: rengin 360 derecelik renk çemberindeki konumu (0° kırmızı, 120° yeşil, 240° mavidir).
• Doygunluk: rengin %0 (gri) ile %100 (saf renk) arasındaki yoğunluğudur.
• Açıklık: rengin siyaha ya da beyaza ne kadar yakın olduğunu belirtir; %0 (siyah) ile %100 (beyaz) arasında değişir.

Her renk uyumu türü tonu, açıklığı veya her ikisini değiştirir; ardından sonucu yeniden onaltılık koda dönüştürür.

Tamamlayıcı renkler nasıl hesaplanır?

Formül:

$h' = (h + 180) \bmod 360$

h, ana rengin derece cinsinden renk tonudur; h′ ise yeni renk tonudur. Mod adımı, tam bir dönüşü aşan sonucu yeniden renk çemberine taşır.

Doygunluk ile açıklık değişmez.

Uygulamalı örnek: Saf mavi #0000FF renginin tonu 240°, doygunluğu %100 ve açıklığı %50 değerindedir. 180° eklemek tonu 60° yapar. Ton 60°, aynı doygunluk ve açıklık değerleriyle yeniden onaltılık koda dönüştürüldüğünde sonuç #FFFF00, yani sarı olur. Bu nedenle araç maviyi turuncuyla değil, sarıyla eşleştirir.

Bu durum kafa karıştırıcı olabilir; çünkü sanat derslerinde genellikle mavinin karşıtının turuncu olduğu farklı bir renk çemberi, RYB (kırmızı-sarı-mavi) pigment çemberi öğretilir. Bu araç ekranlarda kullanılan RGB tabanlı HSL renk çemberiyle çalışır; bu nedenle tamamlayıcı çiftleri boya karıştırma çemberindekilerden farklıdır.

Benzer renkler nasıl hesaplanır?

Benzer renkler, renk çemberinde ana rengin yakınında yer alır. Araç, ana tondan 30° uzaklıkta iki ton ve 60° uzaklıkta iki ton üretir; tümünün doygunluk ve açıklık değerleri aynıdır.

$h \pm 30^{\circ}, \qquad h \pm 60^{\circ}$

h, ana rengin renk tonudur.

Uygulamalı örnek: Mavi #0000FF (ton 240°), ton 270° (#8000FF), ton 210° (#0080FF), ton 300° (#FF00FF) ve ton 180° (#00FFFF) üretir. Ana renkle birlikte palette beş renk bulunur.

Üçlü renkler nasıl hesaplanır?

Üçlü renkler, renk çemberinde birbirlerinden 120° uzaklıkta bulunur ve ana renkle eşit aralıklı bir üçlü oluşturur.

$h + 120^{\circ}, \qquad h + 240^{\circ}$

Uygulamalı örnek: Kırmızı #FF0000 (ton 0°), ton 120° (#00FF00, yeşil) ve ton 240° (#0000FF, mavi) üretir. Üç renkli küme kırmızı, yeşil ve maviden oluşur; bunlar dijital ekranlarda ana renk olarak kullanılan aynı üç tondur.

Monokromatik renkler nasıl hesaplanır?

Monokromatik renklerde ton ve doygunluk aynı kalır; yalnızca açıklık değişir. Araç, açıklığı her iki yönde 15 ve 30 yüzde puanı kadar değiştirir; değeri %5 ile %95 arasında sınırlar.

$l \pm 15, \qquad l \pm 30$

l, ana rengin yüzde puanı cinsinden açıklığıdır.

Uygulamalı örnek: Mavi #0000FF (açıklık %50), açıklığı %65 (#4D4DFF), %35 (#0000B3), %80 (#9999FF) ve %20 (#000066) olan renkler üretir.

%5 ve %95 sınırları nedeniyle, zaten çok açık veya çok koyu olan bir ana renk aynı sınıra iki kez ulaşabilir. Siyah #000000, açıklığı %15 (#262626), %5 (#0D0D0D), %30 (#4D4D4D) ve yine %5 (#0D0D0D) olan renkleri üretir; dolayısıyla bir renk tekrarlanır.

Aracın kullanımı

1. Renk seçiciyle bir ana renk seçin veya #3B82F6 gibi bir onaltılık kod yazın.
2. Bir uyum türü seçin: tamamlayıcı, benzer, üçlü veya monokromatik.
3. Oluşturulan paleti inceleyin. Her renk örneği, bir düğme üzerinde kendi onaltılık kodunu gösterir.
4. Onaltılık kodu kopyalamak için bu düğmeye tıklayın veya paletin tamamını tek seferde kopyalamak için "Tüm Renkleri Kopyala" seçeneğini kullanın.

Erişilebilirlik için kontrastı kontrol etme

Her renk örneğinde iki küçük rozet bulunur: biri beyazla, diğeri siyahla kontrastı gösterir. Araç, WCAG (Web İçeriği Erişilebilirlik Kılavuzları) formülünü kullanarak bir kontrast oranı hesaplar:

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

C, kontrast oranıdır.

L1, açık rengin göreli parlaklığı; L2 ise koyu rengin göreli parlaklığıdır. Parlaklık, rengin kırmızı, yeşil ve mavi değerlerinden hesaplanır. Oran 4,5 veya daha yüksek olduğunda rozet "AA" gösterir; bu, normal boyutlu metinler için WCAG tarafından belirlenen asgari değerdir. Oran 4,5 değerinin altındaysa "!" gösterir. Bir rozetin üzerine gelindiğinde tam oran gösterilir. Beyaz arka plan üzerindeki siyah metin, mümkün olan en yüksek değer olan 21 oranına ulaşır.

Araç, her renk örneğindeki kopyalama düğmesinin rengini seçmek için aynı kontrast kuralını kullanır. Renk örneğinin rengini siyah ve beyazla karşılaştırır, ardından bu ikisinden daha iyi okunanı yerleştirir. Değişim, iki oranın eşit olduğu nokta olan yaklaşık 0,179 göreli parlaklık değerinde gerçekleşir.

Sık sorulan sorular

Renk paleti oluşturucu nedir? Bir ana renk ve seçilen bir uyum kuralından başlayarak birlikte uyumlu çalışan bir renk kümesi oluşturan araçtır.

Bu araç tamamlayıcı renklerde maviyi neden turuncu yerine sarıyla eşleştiriyor? Araç, ekranların kırmızı, yeşil ve mavi ışığı nasıl karıştırdığına dayanan HSL çemberinde tonu 180° döndürür. Sanat derslerinde öğretilen kırmızı-sarı-mavi boya çemberi farklı tamamlayıcı çiftler üretir; çünkü ışık yerine pigmentleri karıştırır.

Her uyum türü kaç renk üretir? Tamamlayıcı uyum, ana renk dahil toplam 2 renk üretir. Üçlü uyum 3 renk üretir. Benzer uyum 5 renk üretir. Monokromatik uyum 5 renk üretir.

Araç dahili olarak hangi renk modelini kullanıyor? HSL (ton, doygunluk, açıklık). Girilen onaltılık kodu HSL'ye dönüştürür, hesaplamayı yapar ve ardından sonucu yeniden onaltılık koda dönüştürür.

Araç renklerin erişilebilir olup olmadığını kontrol ediyor mu? Evet. Her renk örneği, normal metin için WCAG AA standardını karşılamaya yetecek düzeyde beyaz ve siyahla kontrasta sahip olup olmadığını gösterir; bunun için en az 4,5 oranı gerekir.

Bir proje için birden fazla uyum türü kullanabilir miyim? Evet. Birçok tasarım, ana renkler için benzer bir küme ve bir düğme veya vurgu için tamamlayıcı bir renk gibi uyum türlerini birleştirir.

Renk biçimleri

Araç, oluşturulan her rengi başında # işareti bulunan altı basamaklı bir onaltılık kod olarak yazar (örneğin kırmızı için #ff0000). Onaltılık kodlar, kırmızı, yeşil ve mavi değerlerine doğrudan karşılık gelir; bu değerlerin her biri 0 ile 255 arasındadır. Ana renk, girildiği biçimde aynen gösterilir; bu nedenle #F00 gibi üç basamaklı bir kısaltma kısa biçimde kalır. Üç basamaklı kodlar, altı basamaklı biçimle aynı rengi ifade eder: her basamak iki kez yazılır. Bu nedenle #F00, #FF0000 ile aynıdır. HSL, aynı renkleri kırmızı, yeşil ve mavi miktarları yerine ton, doygunluk ve açıklık kullanarak tanımlayan alternatif bir yöntemdir.