Làm cách nào để tạo một bảng màu tương tự như bảng màu trong thiết kế vật liệu của Google?

Thông số kỹ thuật thiết kế vật liệu của Google có bộ bảng màu :

Bắt đầu với màu cơ bản, được chỉ định là "500", sau đó chúng có một loạt các bước tăng dần của bóng râm, sáng hơn và tối hơn, để tạo ra một phạm vi khoảng 10 màu. Ánh sáng nhất được chỉ định là "50", và gần màu trắng, và tối nhất, "900", gần màu đen, nhưng cả hai đều giữ lại một số màu cơ bản.

Tôi hoàn toàn không thể xác định cách tính gia số. Tôi đã thử trình tạo swatch trực tuyến này , nhưng dường như tôi không thể quay số trong phạm vi.

Tôi nghĩ rằng đó chỉ là vấn đề điều chỉnh độ sáng lên xuống từ màu "500" cơ bản và tôi đoán rằng giá trị của "0" sẽ là màu trắng tinh khiết và "1000" sẽ là màu đen thuần túy, nhưng các phạm vi trong Google bảng màu dường như có nhiều độ bão hòa hơn một phạm vi độ sáng đơn giản.

Có ai biết thuật toán hoặc quy trình nào tôi có thể sử dụng để lấy màu cơ bản và tạo bảng màu phù hợp với bảng màu của Google không?

Tôi đã tạo công cụ CSS3 / AngularJS nhỏ này cho một dự án để tạo các bảng màu Vật liệu. Bạn có thể nhập 500 màu hex và sử dụng một công cụ bên ngoài như ColorZilla để lấy các giá trị màu từ đó. Ngoài ra, những cái nhẹ hơn chính xác là những cái mà Google đã sử dụng, nhưng những cái tối hơn thì tắt đi một chút.

mcg.mbitson.com

Các bảng màu google là đơn sắc . Việc giữ tỷ lệ RGB giống nhau làm thay đổi Độ sáng và độ bão hòa lên hoặc xuống. Để làm điều này, bạn phải chuyển đổi giá trị RGB thành biểu diễn HSL (Hue, Saturation, Lightness), thay đổi độ sáng và độ bão hòa sau đó chuyển đổi trở lại nếu cần. Có thể giữ nó trong không gian RGB trong khi tính toán, nhưng toán học quá khó hiểu (đối với tôi để hiểu hoặc giải thích). HSL được tạo ra để pha trộn màu truyền thống (chúng ta dễ nghĩ hơn).

Nếu mục tiêu của bạn là tạo các bảng màu CSS, bạn có thể giữ màu trong HSL bằng cách sử dụng background-color: hsl(0,100%, 50%);.

Bạn có thể làm điều này bằng tay trong Photoshop bằng cách sử dụng công cụ chọn màu. HSB dành cho Độ sáng bão hòa Huế (Đồng nghĩa với HSL, điều tương tự). Chọn một màu bạn thích và thay đổi Độ bão hòa và Độ sáng theo một giá trị nhất quán. Trong hình ảnh bên dưới S = 54 và B = 77, tăng 5% khi sử dụng 54 + 54 * 0.05và 77 + 77 * 0.05. Hoặc để chuyển xuốngS - S * 0.05

Lưu ý bên để làm rõ giữa Hex & RGB. HEX # FFEB3B gồm 6 chữ số thực tế là 3 số riêng biệt, đại diện cho RGB.

#FFEB3B -> FF,EB,3B -> red:FF green:EB blue:3Bchuyển đổi các giá trị HEX thành số thập phân mang lại cho bạn red:255 green:235 blue:59 OR rgb(255,235,59).

Có các thuật toán để chuyển đổi RGB sang HSL nếu bạn thực sự muốn chúng trên Wikipedia nhưng cách đơn giản nhất là sử dụng lib màu. Ví dụ này tạo một bảng màu đơn sắc với Please.js, nó cũng có các thuật toán khác để tạo các bảng màu bổ sung hoặc làm hài lòng. Giống như kuler.adobe, cũng đá.

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

Bạn đã thử làm việc với Bánh xe màu của Adobe chưa? Tôi nghĩ rằng nó linh hoạt hơn một chút so với công cụ SlayerOffice mà bạn đang sử dụng.

https://color.adobe.com/

Đối với trường hợp chính xác của bạn, chọn "Sắc thái" và thử đánh lừa xung quanh từ đó. Nó sẽ không tạo ra thiết kế vật liệu như swatches, nhưng đó là một sự khởi đầu.

Bạn chỉ có thể tải xuống các bảng màu mà Google cung cấp một liên kết đến trên trang web? Vì nó cung cấp cho bạn tất cả các màu sắc?

Google Color Swatches Zip

Để tạo gradient / bảng màu từ màu đã cho, về cơ bản bạn có thể sử dụng thuật toán sau.

1. Quyết định màu tối thiểu và tối đa bạn muốn trong bảng màu của bạn
2. Phân chia 'không gian màu' giữa các màu này trong phân vùng bằng nhau (xem bên dưới)
3. Màu sắc đầu ra trên các bước này

Để phân chia không gian màu giữa, trước tiên bạn có thể chuyển đổi màu HEX của mình thành RGB. Chọn các giá trị trong mỗi kênh. Giả sử bạn có color1 (r1, g1, b1) và color2 (r2, g2, b2). Và bạn muốn có 3 màu giữa color1 và color2 , sau đó bạn có thể làm một cái gì đó như sau

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

Nhớ chuyển đổi giá trị RGB giữa (0 thành 1).

Trong trường hợp của bạn, bạn có thể lấy màu cơ bản và phân chia không gian màu giữa white to basecolorvà basecolor to black. Bạn có thể điều chỉnh các bước của bạn theo nhu cầu của bạn.

Cuối cùng, tôi sẽ thực hiện một số quảng cáo không biết xấu hổ về thư viện python mà tôi đã tạo, chỉ vì nó có liên quan đến câu hỏi này liên quan đến việc tạo bảng màu. Nó được gọi là SecretColors . Bạn có thể tạo các bảng màu, độ dốc riêng hoặc sử dụng các bảng màu tiêu chuẩn như IBM, Design Design, ColorBrewer hoặc Clarity.