Tạo sơ đồ màu - lý thuyết và thuật toán [đóng]

Tôi sẽ tạo ra các biểu đồ và sơ đồ và tôi đang tìm kiếm một số lý thuyết về sơ đồ màu và các ví dụ thuật toán.

Câu hỏi ví dụ:

• Làm thế nào để tạo ra màu bổ sung hoặc tương tự?
• Làm thế nào để tạo ra màu pastel, lạnh và ấm?
• Làm thế nào để tạo ra bất kỳ số lượng màu sắc ngẫu nhiên nhưng khác biệt?
• Làm thế nào để dịch tất cả những điều đó sang bộ ba hex (màu web)?

Việc triển khai của tôi sẽ ở AS3 nhưng mọi ví dụ về mã giả đều được chào đón.

Khi tìm kiếm thêm thông tin về câu hỏi này (đó cũng là điều mà tôi đã đấu tranh) tôi đã tìm thấy blog này . Stefano Mazzocchi giải thích lý thuyết của mình về lý do tại sao các lập trình viên chọn màu sắc cho thiết kế UI và đưa ra một số lời khuyên và liên kết hữu ích.

Lời khuyên đầu tiên mà ông đưa ra là sự thật hiển nhiên này đặt nền tảng cho việc chọn màu sắc và bão hòa:

Hai mẩu thông tin có cùng độ tương phản so với nền của chúng sẽ được cảm nhận ở cùng mức độ quan trọng (tất cả những thứ khác đều bằng nhau), trong khi độ tương phản nhiều hơn xác định tầm quan trọng hơn và độ tương phản ít hơn xác định mức độ quan trọng ít hơn.

Điều này cung cấp manh mối đầu tiên về cách chọn màu cho nền trước và nền - thông tin ít quan trọng hơn nên sử dụng độ tương phản thấp hơn và thông tin quan trọng hơn nên sử dụng độ tương phản cao hơn.

Liên kết đầu tiên là Color Scheme Designer , một trang web tương tự Kuler. Giống như Kuler, đây là một công cụ tương tác tiện dụng, nhưng nó không cung cấp bất kỳ cái nhìn sâu sắc nào về cách chọn màu sắc, tức là màu vàng nào hoạt động với màu xanh lá cây hoặc xanh lam, v.v.

Liên kết tiếp theo anh cung cấp là trang web của Phòng thí nghiệm nghiên cứu sử dụng màu của NASA có tên Sử dụng màu trong đồ họa hiển thị thông tin . Trang web này cung cấp nhiều thông tin hơn về cách chọn màu sắc cho độ tương phản phù hợp, v.v. và liệt kê các công thức toán học để đo lường những thứ như độ tương phản. Tôi chưa tìm thấy bất kỳ thuật toán mã SW hoặc mã giả nào trên trang web đó, nhưng tôi chỉ xem một vài trang. Stefano cũng chỉ ra rằng Phòng thí nghiệm màu của NASA sử dụng Hệ thống màu Munsell , một hệ thống tương tự như HSV nhưng có trọng số để phản ánh chính xác hơn nhận thức của con người về màu sắc thay vì các đặc tính có thể đo lường được của màu sắc.

Một liên kết cuối cùng được đề cập trong blog của Stefano là đến một trang web có tên là Xu hướng màu sắc + Bảng màu :: MÀU SẮC . Trang web này không cung cấp nhiều trợ giúp hơn trong việc tìm kiếm thuật toán chọn màu so với Color Scheme Designer hoặc Kuler, nhưng nó nhấn mạnh đến chất lượng ít thay đổi của các thay đổi hiện tại trong việc thưởng thức thoáng qua các màu sắc và bảng màu nhất định của chúng tôi. Thật đáng để ghé thăm nếu bạn muốn UI của mình phản ánh những xu hướng mới nhất.

Một lần nữa, hãy xem trang web của NASA và đọc qua một số trang ở đó, đặc biệt là các trang trên Khoa học màu sắc và bạn sẽ có thể đưa ra một thuật toán khả thi để chọn các màu phối hợp với nhau và cung cấp độ tương phản mong muốn.

EDIT: Tôi sẽ thêm các liên kết hữu ích bổ sung trong lĩnh vực này khi tôi tìm thấy chúng.

1. Thuật toán di truyền tương tác cho Colors.pdf
2. Thuật toán phân đoạn màu sắc cảm nhận.pdf
3. Hướng dẫn Kết hợp màu sắc và lược đồ màu cho Thiết kế web tuyệt vời.html

Theo như các công cụ tạo màu, tôi thích http://kuler.adobe.com nhất.

Khi bạn tạo một bảng màu (5 màu) trên trang web, các tùy chọn của bạn là Tương tự, Đơn sắc, Bộ ba, Bổ sung, Hợp chất và Sắc thái. Tất nhiên bạn có thể tùy chỉnh màu sắc của bạn thay vì tự động tạo ra chúng. Mỗi khối màu hiển thị cho bạn các giá trị số trong RGB và Hex (cũng như CMYK / HSV / Lab).

Làm thế nào để tạo ra màu bổ sung hoặc tương tự?

Điều này liên quan đến một chút kiến ​​thức lý thuyết màu sắc. Bạn có thể kiểm tra một lời giải thích (cơ bản) tốt đẹp ở đây . Xem các bánh xe màu.

Làm thế nào để tạo ra màu pastel, lạnh và ấm?

Nói chung, màu pastel là "màu mềm mại." Chúng là phổ cao hơn và thấp hơn của một tông màu. Xem phần màu pastel do người dùng tạo .

Làm thế nào để tạo ra bất kỳ số lượng màu sắc ngẫu nhiên nhưng khác biệt?

Đối với mục đích biểu đồ của bạn, tôi không chắc màu sắc ngẫu nhiên sẽ hoạt động. Mỗi lựa chọn màu sắc nên được chọn bằng tay.

Làm thế nào để dịch tất cả những điều đó sang bộ ba hex (màu web)?

Hầu hết các phần mềm đồ họa hiển thị giá trị hex cho màu sắc. Hex là một chuỗi RGB được tạo bởi ## (đỏ), ## (xanh lá cây), ## (xanh dương).

Ví dụ: màu đỏ thuần là FF0000, màu xanh thuần khiết là # 0000FF. Màu tím (bạn nhận được từ việc trộn màu đỏ và màu xanh) là # FF00FF.

Vì bạn sẽ tạo biểu đồ, tôi khuyên bạn nên truy cập các blog sau để lấy cảm hứng:

http://infosthetic.com

http://flowingdata.com

Nếu bạn có thời gian, hãy đọc qua Bài học về Lý thuyết màu sắc

Một ý tưởng tôi đã có trong một thời gian là tạo ra các màu càng khác nhau càng tốt (trong giới hạn) cho càng nhiều màu càng cần thiết. Rắc rối thêm là nếu tôi cần thêm một vài màu sau cho cùng một biểu đồ (có thể thêm một vài thanh bổ sung), chúng cần phải phù hợp với cùng một sơ đồ, giữ nguyên các màu hiện có.

Ý tưởng tôi nghĩ ra là một mẹo nhỏ. Tưởng tượng một vòng tròn màu sắc (có thể mỗi màu là một màu khác nhau với cùng độ bão hòa và độ sáng, mặc dù bạn có thể xác định bất kỳ vòng tròn nào qua bất kỳ không gian màu nào). Thay vì đưa một góc theo độ cho vòng tròn đó, có phạm vi từ 0 đến 255. Trong nhị phân, đó là 00000000 đến 11111111. Thêm một vào 8 bit 255 và nó tràn về 0, do đó, nó hoạt động tự nhiên như một "giá trị tròn" (về mặt kỹ thuật, phép cộng và phép trừ là modulo 256).

Mẹo nhỏ là khi bạn chọn màu 0, màu một, v.v., để đảo ngược các số đó. Để làm điều đó trong C, tôi sẽ sử dụng ...

value = ((value & 0x0F) << 4) | ((value & 0xF0) >> 4);
value = ((value & 0x33) << 2) | ((value & 0xCC) >> 2);
value = ((value & 0x55) << 1) | ((value & 0xAA) >> 1);

Vì vậy, chuỗi 0, 1, 2, 3, 4 được chuyển thành 0, 128, 64, 192, 32.

Vấn đề là bạn có 256 màu riêng biệt, và những màu đầu tiên được phân chia rất rộng rãi, với những màu sau được phân tách ít hơn và điền vào các khoảng trống (64 là một nửa giữa 0 và 128, 32 là một nửa từ 0 đến 64, v.v.).

Bất kỳ độ rộng bit nào cho một "góc" cụ thể sẽ hoạt động nếu bạn điều chỉnh đảo ngược bit và tất nhiên bạn có thể chạy nhiều chu kỳ cùng một lúc cho các thông số khác nhau của màu sắc (có thể là màu sắc quay nhanh, nhưng độ bão hòa quay chậm hơn).

Điều đó chỉ để lại câu hỏi về cách bạn ánh xạ "các góc" của mình với các số RGB cụ thể hoặc bất cứ điều gì, mà tôi không phải là chuyên gia - ồ, và câu hỏi liệu ActionScript có hỗ trợ tính năng bit không.

Có một câu hỏi Stack Overflow thú vị " Chức năng tạo bánh xe màu " trên này. Bạn cũng có thể muốn đọc một trong những giấy tờ được đề xuất (PDF).

Câu hỏi này mê hoặc tôi vì vậy tôi bắt đầu làm một số việc. :) Đừng mong đợi một câu trả lời dựa trên kinh nghiệm.

Về cơ bản, để thực hiện các phép tính với màu sắc, tốt nhất là thực hiện các thao tác trên bánh xe màu, được thể hiện ở định dạng HSL .

Tác giả của bài đăng này đã rất tử tế khi cung cấp một số thông tin về việc chuyển đổi RGB sang HSL và mã mẫu về cách tính màu bổ sung.

Nếu bạn may mắn, bạn sẽ không cần phải hiểu bất kỳ điều gì trong số đó, nếu một trong những thư viện AS3 lúng túng sau đây làm việc cho bạn.

• Colorjizz
• Mojocolor

Tôi đã sử dụng mã sau đây. Lưu ý: nó không sử dụng lý thuyết nào về cách mắt / não hoạt động, tôi chỉ muốn có thể tạo ra một vòm màu sắc như đỏ + xanh + xanh = 1, và các màu cách đều nhau. Tham số "tôi" là màu trong tổng số num có thể. Nó hoạt động đến num khoảng 91 ish. Lưu ý tôi nên chạy từ 0 đến num-1. Những thứ khác là có thể, các ràng buộc được đưa ra ở trên khá tùy tiện, nhưng ít nhất nó tạo ra các màu sắc riêng biệt - cho rằng bạn không cần quá nhiều trong số chúng.

void select_color(int me,int num){
  int s[14]={0,1,3,6,10,15,21,28,36,45,55,66,78,91};
  int j,nrows=0,irow=0,jcol=0;
  float del,red,grn,blu;
// we build a red/green triangle with an area>=num
  for(j=0;j<14;j++)if(me>=s[j])irow=j;
  for(j=13;j>0;j--)if(num<=s[j])nrows=j;
  jcol=me-s[irow];
  del=1./(nrows-.9);
  red=1.-del*irow;
  grn=del*jcol;
  blu=1.-red-grn;
  glColor3f(red,grn,blu);
}

Một lần nữa, nó không sử dụng lý thuyết màu sắc, do đó, không có sự cách ly nào cho thấy độ nhiễu được tối ưu hóa trong bất kỳ wat nào - đặc biệt nếu bạn quan tâm đến người dùng không thường xuyên bị mù màu một phần.

Bạn cũng có thể chỉ cần đặt các biến màu chính thành các số ngẫu nhiên, nhưng chúng thậm chí ít có khả năng tạo thành một tập hợp khác biệt trực quan.

Trước đây, tôi đã làm điều này bằng cách chỉ chọn 20 màu, thay vì cố gắng tạo ra chúng. Trừ khi đồ thị của bạn rất phức tạp, bạn thường không cần nhiều hơn. Cách tiếp cận này, tuy đơn giản, cũng cho phép bạn gán cùng màu cho các yếu tố tương tự trong biểu đồ của bạn (ví dụ: bạn luôn có thể tạo ra 'doanh số' cùng màu, giúp biểu đồ dễ diễn giải hơn).

Tôi thích lấy mẫu màu từ ảnh . Là một nhà thiết kế, tôi làm điều này bằng tay. Là một lập trình viên, tôi thường chọn một pixel ngẫu nhiên. Nếu bạn muốn kiểm soát nhiều hơn, bạn có thể tạo 'ảnh' của riêng mình tuân theo một quy tắc nhất định.

Tôi luôn thích các tiện ích trực tuyến của VisiBone vì bạn có thể chọn nhiều màu sắc và đánh giá tương tác mức độ chúng đụng độ với nhau: http://www.visibone.com/colorlab/

Tôi nói họ đụng độ tệ đến mức nào vì tôi quen với độ tương phản màu sắc vì nó áp dụng cho nghệ thuật "tương tự" và rất ngạc nhiên khi màu sắc mà tôi chọn đã đụng độ với nhau trong nghệ thuật kỹ thuật số. (Rõ ràng tôi không phải là nhà thiết kế)