Bagaimana cara menghasilkan palet yang mirip dengan yang ada di desain material Google?

62

Spesifikasi desain materi Google memiliki set palet warna :

masukkan deskripsi gambar di sini

Dimulai dengan warna primer dasar, yang mereka tunjuk sebagai "500", mereka kemudian memiliki serangkaian langkah-langkah tambahan warna, lebih terang dan lebih gelap, untuk membuat kisaran sekitar 10 warna. Yang paling terang disebut "50", dan hampir putih, dan yang paling gelap, "900", hampir hitam, tetapi keduanya mempertahankan beberapa warna dasar.

Saya tidak bisa menentukan bagaimana kenaikan dihitung. Saya mencoba generator swatch online ini , tetapi sepertinya saya tidak dapat memutar nomor tersebut.

Saya pikir itu hanya masalah menyesuaikan luminositas atas dan ke bawah dari warna dasar "500", dan saya menduga bahwa nilai "0" akan menjadi putih murni dan "1000" akan menjadi hitam murni, tetapi rentang dalam Google palet tampaknya memiliki saturasi lebih dari rentang luminositas sederhana.

Adakah yang tahu algoritma atau proses apa yang bisa saya gunakan untuk mengambil warna dasar dan menghasilkan palet yang sesuai dengan palet Google?

color color-theory color-conversion Penanya
sumber
Mereka tampaknya menjadi warna dasar dengan saturasi dan nilai masing-masing meningkat atau menurun secara terbalik ketika jumlahnya naik atau turun
Supuhstar
1
Sebenarnya, mengambil langkah mundur dari layar, tampaknya menggunakan algoritma yang sama seperti phong shading ... Saya harus mempertimbangkan ini
Supuhstar
Apakah Anda menemukan solusi untuk menghasilkan palet?
MrBrightside
@MrBrightside Howdy! Anda dapat membuat palet menggunakan jawaban yang dipilih, di sini: mcg.mbitson.com - Harap dicatat bahwa warnanya tidak persis sama dengan palet Desain Material, meskipun Anda dapat mengimpor palet yang tepat atau menghasilkan representasi dekat dengan warna kustom. Lebih lanjut tentang mengapa mereka bukan warna yang tepat di sini: stackoverflow.com/questions/32942503/…
Mikel Bitson
1
Bahan HANYA monokromatik untuk rentang 50-500, lihat codepen.io/sebilasse/pen/GQYKJd?editors=1010 untuk warna yang lebih gelap dan aksen ...
sebilasse

Jawaban:

41

Saya membuat alat CSS3 / AngularJS kecil ini untuk proyek untuk menghasilkan palet Warna Material. Anda dapat memasukkan 500 hex color Anda dan menggunakan alat eksternal seperti ColorZilla untuk mendapatkan nilai warna dari sana. Yang lebih terang juga persis yang digunakan Google, tetapi yang lebih gelap tidak aktif sedikit.

mcg.mbitson.com

dave
sumber
Generator palet Anda bekerja dengan sangat baik, dan sejauh yang saya bisa lihat, mendekati standar Desain Material Google. Satu hal: Anda mungkin ingin membuat lebih banyak kontras untuk teks pada halaman. Teks hitam pada latar belakang abu-abu gelap sangat sulit dibaca.
Penanya
2
Hai teman-teman! Saya adalah pengembang di balik versi terbaru alat ini. Saya baru-baru ini berubah sekitar cara saya menangani generasi warna. Jika ada yang punya umpan balik langsung untuk alat ini - ini teknik pembuatan warna atau fitur tambahan yang mereka inginkan, beri tahu saya! Saya masih mengembangkan perangkat tambahan di waktu luang saya dan saya khawatir generasi warna mungkin mati, meskipun masih sangat membantu. Saya akan terus memeriksanya.
Mikel Bitson
1
@MikelBitson Generator palet memang mati (cukup masukkan 500 warna dari standar desain material dan bandingkan untuk melihat), namun ia bekerja fantastis dengan banyak warna dasar lainnya. Pertahankan kerja bagus!
Chris Bornhoft
1
@MikelBitson Penjelasan fantastis terima kasih. Saya pikir itu adalah sesuatu seperti ini bahkan sebelum saya memposting komentar asli saya. Saya ingin tahu berapa banyak "Pemilih Warna Resmi" Google? Apa judulnya :)
Chris Bornhoft
1
Tautan yang diperbarui bagi Anda yang mencari versi baru: mcg.mbitson.com/#
Mikel Bitson
18

Palet google bersifat monokromatik . Yang menjaga rasio RGB yang sama menggeser Lightness dan saturation ke atas atau ke bawah. Untuk melakukan ini, Anda harus mengubah nilai RGB ke representasi HSL (Hue, Saturation, Lightness), ubah lightness dan saturation lalu konversikan kembali jika perlu. Dimungkinkan untuk menyimpannya di ruang RGB saat menghitung, tetapi matematika terlalu membingungkan (bagi saya untuk mengerti atau menjelaskan). HSL dibuat untuk pencampuran warna tradisional (lebih mudah bagi kita untuk memikirkannya).

Jika tujuan Anda adalah membuat palet CSS, Anda dapat menyimpan warna menggunakan HSL background-color: hsl(0,100%, 50%);.

Anda dapat melakukan ini secara manual di Photoshop menggunakan color picker. HSB adalah untuk Brightness Saturation Hue (Sinonim dengan HSL, hal yang sama). Pilih rona yang Anda sukai dan ubah Saturasi dan Kecerahan dengan nilai yang konsisten. Pada gambar di bawah S = 54 dan B = 77, bergeser 5% menggunakan 54 + 54 * 0.05dan 77 + 77 * 0.05. Atau bergeser ke bawahS - S * 0.05

pemetik warna photoshop

Catatan sisi untuk mengklarifikasi antara Hex & RGB. 6 digit HEX # FFEB3B sebenarnya 3 angka terpisah, mewakili RGB.

#FFEB3B -> FF,EB,3B -> red:FF green:EB blue:3Bmengonversi nilai HEX ke desimal memberi Anda red:255 green:235 blue:59 OR rgb(255,235,59).

Ada algoritma untuk mengubah RGB ke HSL jika Anda benar-benar menginginkannya di Wikipedia tetapi cara paling sederhana adalah dengan menggunakan lib warna. Contoh ini membuat palet monokromatik dengan please.js juga memiliki algoritma lain untuk membuat palet komplementer atau menyenangkan. Mirip seperti kuler.adobe, yang juga bebatuan.

Please.make_scheme(
    Please.HEX_to_HSV('#ffeb3b'),
    {scheme_type: 'mono', format:'hex'}
);
// returns ->["#ffeb3b", "#ffe821", "#ffe508", "#e5d54c"]
Lex
sumber
4
Palet Google sendiri tidak menunjukkan gradien kecerahan yang mantap di seluruh HSV / HSB. Saya telah membuat ilustrasi sehingga Anda dapat melihat apa yang saya bicarakan. Berdasarkan itu, Anda mungkin akan lebih baik bermain dengan salah satu model warna lainnya. Selain itu, mereka tampaknya telah sedikit mengubah rona mereka untuk warna yang lebih gelap dari beberapa warna, untuk menjaga mereka agar tidak berlumpur.
Tess
Saya ingin menambahkan sedikit di sini bahwa tanggapan detik @ Tess .. Saya telah mengembangkan versi yang disempurnakan dari generator MCG dan dalam prosesnya saya telah memperhatikan beberapa hal. Setiap palet google mengikuti perkembangan warna yang berbeda, tidak monokromatik. Tidak ada rumus atau metode untuk meniru warna dengan tepat - karena rumus untuk setiap palet pada akhirnya menjadi sangat berbeda. Rincian lebih lanjut dan contohnya dapat ditemukan di sini: github.com/mbitson/mcg/issues/19
Mikel Bitson
@MikelBitson Tapi untuk menjawab pertanyaan 'apa algoritma atau proses yang dapat saya gunakan' Saya akan memilih monokromatik atau versi itu en.wikipedia.org/wiki/Monochromatic_color Tapi Anda dan Tess benar yang tidak ketat mono, mereka menyimpang dari rona.
Lex
1
@ Lex - Saya setuju dengan Anda, saya akan menggunakan monokromatik untuk memperkirakan palet. Saya hanya mendukung respons Tess karena jawaban Anda menyatakan bahwa "Palet google monokromatik." dan saya telah menghabiskan banyak waktu baru-baru ini berjuang dengan warna-warna ini. :)
Mikel Bitson 3-15
1
HSB / HSV tidak sama dengan HSL en.wikipedia.org/wiki/HSL_and_HSV
Kevin Thibedeau
1

Sudahkah Anda mencoba bekerja dengan Roda Warna Adobe? Saya pikir ini sedikit lebih fleksibel daripada alat SlayerOffice yang Anda gunakan.

https://color.adobe.com/

Untuk kasus yang tepat, pilih "Nuansa" dan coba main-main dari sana. Itu tidak akan menghasilkan desain-material seperti carikan, tapi ini awal.

sharedphysics
sumber
0

Anda bisa mengunduh palet yang Google berikan tautannya di situs? Karena itu memberi Anda semua warna?

Zip Warna Google Swatch

McIvor
sumber
12
Saya pikir OP ingin tahu bagaimana memulai dengan warnanya sendiri dan menghasilkan carikan yang serupa
Supuhstar
0

Untuk menghasilkan gradien warna / palet dari warna yang diberikan, pada dasarnya Anda dapat menggunakan algoritma berikut.

  1. Tentukan warna minimum dan maksimum yang Anda inginkan di palet Anda
  2. Bagilah 'ruang warna' antara warna-warna ini dalam partisi yang sama (lihat di bawah)
  3. Keluarkan warna pada langkah-langkah ini

Untuk membagi ruang warna antara, pertama Anda dapat mengubah warna HEX Anda menjadi RGB. Pilih nilai di setiap saluran. Katakanlah Anda memiliki color1 (r1, g1, b1) dan color2 (r2, g2, b2). Dan Anda ingin 3 warna antara color1 dan color2 , maka Anda dapat melakukan sesuatu seperti mengikuti

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))

Ingatlah untuk mengonversi nilai RGB antara (0 hingga 1).

Dalam kasus Anda, Anda dapat mengambil warna dasar dan membagi ruang warna antara white to basecolordan basecolor to black. Anda dapat menyesuaikan langkah-langkah Anda sesuai dengan kebutuhan Anda.

Akhirnya, saya akan melakukan beberapa promosi tak tahu malu dari perpustakaan python yang saya buat, hanya karena relevan dengan pertanyaan ini mengenai generasi palet warna. Ini disebut SecretColors . Anda dapat menghasilkan palet warna sendiri, gradien atau menggunakan palet warna standar seperti IBM, Material Design, ColorBrewer atau Clarity.

Dexter
sumber