Google’ın malzeme tasarımındakilere benzer bir palet nasıl oluşturulur?

Google’ın malzeme tasarım özelliklerinde renk paletleri kümesi vardır :

"500" olarak adlandırdıkları bir temel ana renkle başlayarak, yaklaşık 10 renk aralığı oluşturmak için artan gölge, daha parlak ve daha koyu basamaklara sahiptirler. En açık olan "50" olarak adlandırılmıştır ve beyaza yakındır ve en karanlık olan "900" siyahın yanındadır, ancak her ikisi de temel rengin bir kısmını tutar.

Artımların nasıl hesaplandığını tam olarak belirleyemiyorum. Bu çevrimiçi renk örneği oluşturucuyu denedim , ancak aralıkta arama yapamıyorum.

Sanırım bu sadece "500" rengindeki tabandan yukarı ve aşağı parlaklığı ayarlama meselesi ve sanırım "0" değerinin saf beyaz olacağını ve "1000" değerinin saf siyah olacağını, ancak Google’daki aralıkları olacağını tahmin ediyorum. Paletin basit bir parlaklık aralığından daha fazla doygunluğa sahip olduğu görülüyor.

Temel renk almak ve Google'ın paletlerine uygun bir palet oluşturmak için hangi algoritmayı veya işlemi kullanabileceğimi bilen var mı?

Bu küçük CSS3 / AngularJS aracını, Malzeme Renkleri paletlerini oluşturmak için bir proje için yaptım. 500 hex renginizi girebilir ve oradan renk değerlerini elde etmek için ColorZilla gibi harici bir araç kullanabilirsiniz. Ayrıca daha hafif olanlar tam olarak Google’ın kullandıklarını, ancak daha koyu olanlar da biraz kapalı.

mcg.mbitson.com

Google paletleri tek renkli . Bu aynı RGB oranını Lightness ve doygunluğu yukarı veya aşağı kaydırırken tutar. Bunu yapmak için, RGB değerini HSL temsiline (Ton, Doygunluk, Hafiflik) dönüştürmek, hafifliği ve doygunluğu değiştirmek ve gerekirse geri dönüştürmek zorundasınız. Hesaplama sırasında onu RGB uzayda tutmak mümkündür, ancak matematik çok kafa karıştırıcıdır (benim anlamam ya da açıklamam için). HSL, geleneksel renk karıştırma için yaratıldı (düşünmemiz daha kolay).

Amacınız CSS paletleri yapmaksa, rengi kullanarak HSL'de tutabilirsiniz background-color: hsl(0,100%, 50%);.

Renk seçiciyi kullanarak bunu Photoshop'ta el ile yapabilirsiniz. HSB, Hue Saturation Brightness içindir (HSL ile aynı, aynı şey). Beğendiğiniz bir ton seçin ve Doygunluk ve Parlaklığı tutarlı bir değerle değiştirin. S = 54 ve B = 77 Aşağıdaki resimde kullanılarak% 5 kadar kaydırmak 54 + 54 * 0.05ve 77 + 77 * 0.05. Veya aşağı kaymakS - S * 0.05

Hex ve RGB arasında netleştirmek için yan not. 6 basamaklı HEX # FFEB3B aslında RGB'yi temsil eden 3 ayrı sayıdır.

#FFEB3B -> FF,EB,3B -> red:FF green:EB blue:3BHEX değerlerini ondalık değere dönüştürmek size verir red:255 green:235 blue:59 OR rgb(255,235,59).

Onları Wikipedia'da gerçekten istiyorsan, RGB'yi HSL'ye dönüştürecek algoritmalar var, ama en basit yolu renk kütüphanesini kullanmak. Bu örnek please.js ile tek renkli bir palet yapar , tamamlayıcı veya hoş paletler oluşturmak için başka algoritmalar da vardır. Aynı zamanda kayaları da kuler.adobe gibi.

Please.make_scheme(
    Please.HEX_to_HSV('#ffeb3b'),
    {scheme_type: 'mono', format:'hex'}
);
// returns ->["#ffeb3b", "#ffe821", "#ffe508", "#e5d54c"]

Adobe'nin Renk Tekerleği ile çalışmayı denediniz mi? Sanırım kullandığınız SlayerOffice aracından biraz daha esnek.

https://color.adobe.com/

Tam durumunuz için, "Gölgeler" i seçin ve oradan dalga geçmeyi deneyin. Renk örnekleri gibi malzeme tasarımı üretmez, ancak bir başlangıçtır.

Google’ın siteye link verdiği paletleri indirebilir misiniz? Size tüm renkleri verdiğinden beri?

Google Renk Örnekleri Zip

Verilen renkten renk gradyanı / paleti oluşturmak için, esasen aşağıdaki algoritmayı kullanabilirsiniz.

1. Paletinizde istediğiniz minimum ve maksimum renkleri seçin
2. Bu renkler arasında 'renk boşluğunu' eşit bölümlere ayırın (aşağıya bakın)
3. Bu adımlarda çıktı renkleri

Renk aralığını ayırmak için önce HEX'inizi RGB'ye dönüştürebilirsiniz. Her kanaldaki değerleri seçin. Diyelim ki color1 (r1, g1, b1) ve color2 (r2, g2, b2). Ve color1 ve color2 arasında 3 renk istersiniz , sonra aşağıdaki gibi bir şey yapabilirsiniz

all_colors = []
steps = no_of_colors + 1
rdelta, gdelta, bdelta = (r2 - r1) / steps, (g2 - g1) / steps, (b2 - b1) / steps
for step in range(steps - 1):
    r1 += rdelta
        g1 += gdelta
        b1 += bdelta
all_colors.append((r1, g1, b1)) 

RGB değerlerini (0 - 1) arasında dönüştürmeyi unutmayın.

Senin durumunda, temel rengi alabilir ve renk aralığını white to basecolorve arasında bölebilirsiniz basecolor to black. Basamaklarınızı ihtiyacınıza göre ayarlayabilirsiniz.

Sonunda, yarattığım python kütüphanesinin utanmaz bir tanıtımını yapacağım, çünkü renk paleti oluşturma konusundaki bu soruyla alakalı. Buna Gizli Renkler denir . Kendi renk paletlerini, degradelerini oluşturabilir veya IBM, Material Design, ColorBrewer veya Clarity gibi standart renk paletlerini kullanabilirsiniz.