การสร้างโครงร่างสี - ทฤษฎีและอัลกอริธึม [ปิด]

ฉันจะสร้างแผนภูมิและไดอะแกรมและฉันกำลังมองหาทฤษฎีเกี่ยวกับโครงร่างสีและตัวอย่างอัลกอริทึม

ตัวอย่างคำถาม:

• วิธีการสร้างสีเสริมหรือคล้ายคลึงกัน?
• วิธีการสร้างสีพาสเทลเย็นและอบอุ่น?
• วิธีการสร้างสีแบบสุ่ม แต่แตกต่างกันจำนวนเท่าใด?
• วิธีการแปลทั้งหมดนั้นให้เป็นเลขฐานสิบหก (สีของเว็บ)

การใช้งานของฉันจะอยู่ใน AS3 แต่ยินดีต้อนรับตัวอย่างใด ๆ ใน pseudocode

ในการหาข้อมูลเพิ่มเติมเกี่ยวกับคำถามนี้ (มันเป็นสิ่งที่ฉันต่อสู้ด้วย) ฉันพบบล็อกนี้ Stefano Mazzocchi อธิบายทฤษฎีของเขาว่าทำไมโปรแกรมเมอร์ถึงเลือกสีสำหรับการออกแบบ UI และให้คำแนะนำและลิงก์ที่มีประโยชน์

คำแนะนำแรกที่เขาเสนอคือความจริงที่ชัดเจนซึ่งวางรากฐานสำหรับการเลือกเฉดสีและความอิ่มตัว:

ข้อมูลสองส่วนที่มีความเปรียบต่างกับพื้นหลังจะถูกรับรู้ในระดับความสำคัญเดียวกัน (สิ่งอื่น ๆ ทั้งหมดเท่ากัน) ในขณะที่ความเปรียบต่างเพิ่มเติมระบุความสำคัญมากขึ้นและความเปรียบต่างน้อยกว่าระบุความสำคัญน้อยลง

สิ่งนี้นำเสนอเงื่อนงำแรกเกี่ยวกับวิธีเลือกสีสำหรับพื้นหน้าและพื้นหลัง - ข้อมูลที่สำคัญน้อยกว่าควรใช้คอนทราสต์ต่ำกว่าและข้อมูลที่สำคัญกว่าควรใช้คอนทราสต์สูงกว่า

ลิงก์แรกคือColour Designer Schemeซึ่งเป็นเว็บไซต์ที่คล้ายกับ Kuler เช่นเดียวกับ Kuler มันเป็นเครื่องมือโต้ตอบที่มีประโยชน์ แต่ก็ไม่ได้ให้ข้อมูลเชิงลึกใด ๆ เกี่ยวกับวิธีการเลือกสีเช่นสีเหลืองที่ทำงานกับผักใบเขียวหรือบลูส์ ฯลฯ

การเชื่อมโยงต่อไปเขาเสนอคือการใช้งานของนาซาสีเว็บไซต์ Research Lab ได้รับสิทธิการใช้สีในการแสดงข้อมูลกราฟิก เว็บไซต์นี้ให้ข้อมูลเพิ่มเติมเกี่ยวกับวิธีการเลือกสีสำหรับความคมชัดที่เหมาะสม ฯลฯ และแสดงสูตรทางคณิตศาสตร์สำหรับการวัดสิ่งต่าง ๆ เช่นความคมชัด ฉันยังไม่พบอัลกอริธึมรหัส SW หรือรหัสหลอกบนเว็บไซต์นั้น แต่ฉันได้ดูเพียงไม่กี่หน้า สเตฟาโนยังชี้ให้เห็นว่า NASA Color Lab ใช้ระบบสี Munsellซึ่งเป็นระบบที่คล้ายกับ HSV แต่มีน้ำหนักเพื่อสะท้อนการรับรู้สีของมนุษย์อย่างแม่นยำมากกว่าการวัดคุณสมบัติของสี

หนึ่งในการเชื่อมโยงที่ผ่านมากล่าวถึงในบล็อกของสเตฟาโนคือการเว็บไซต์ที่เรียกว่าสีแนวโน้ม + จาน ไซต์นี้ไม่มีความช่วยเหลือในการค้นหาอัลกอริทึมสำหรับการเลือกสีมากกว่า Color Scheme Designer หรือ Kuler แต่เน้นถึงคุณภาพที่วัดได้น้อยกว่าของการเปลี่ยนแปลงในปัจจุบันในความเพลิดเพลินของเราในบางสีและจานสี มันควรค่าแก่การเยี่ยมชมหากคุณต้องการให้ UI ของคุณสะท้อนแนวโน้มล่าสุด

ตรวจสอบเว็บไซต์ของ NASA อีกครั้งและอ่านบางหน้าโดยเฉพาะในColor Scienceและคุณควรจะได้อัลกอริทึมที่ใช้งานได้สำหรับการเลือกสีที่ทำงานร่วมกันและให้ความคมชัดที่ต้องการ

แก้ไข: ฉันจะเพิ่มลิงค์ที่เป็นประโยชน์เพิ่มเติมในพื้นที่นี้เมื่อฉันพบพวกเขา

1. ขั้นตอนวิธีเชิงพันธุกรรมเชิงโต้ตอบสำหรับ Colors.pdf
2. อัลกอริทึมการแบ่งส่วนสีที่รับรู้
3. คู่มือการรวมสีและโครงร่างสีสำหรับ Great Web Design.html

เท่าที่เครื่องมือสร้างสีใช้แล้วฉันชอบhttp://kuler.adobe.comที่สุด

เมื่อคุณสร้างจานสี (5 สี) บนเว็บไซต์ตัวเลือกของคุณคือแบบอะนาล็อกโมโนโครมกลุ่มสามประกอบสมบูรณ์ผสมและเฉดสี แน่นอนคุณสามารถปรับแต่งสีของคุณแทนการสร้างโดยอัตโนมัติ แต่ละบล็อคสีจะแสดงค่าตัวเลขใน RGB และ Hex (รวมถึง CMYK / HSV / Lab) ให้คุณ

วิธีการสร้างสีเสริมหรือคล้ายคลึงกัน?

สิ่งนี้เกี่ยวข้องกับความรู้ทฤษฎีสีอีกเล็กน้อย คุณสามารถตรวจสอบที่ดี (ขั้นพื้นฐาน) คำอธิบายที่นี่ ดูวงล้อสี

วิธีการสร้างสีพาสเทลเย็นและอบอุ่น?

โดยทั่วไปสีพาสเทลคือ "สีอ่อน" พวกมันเป็นสเปกตรัมสีที่สูงขึ้นและต่ำลง ดูส่วนสีพาสเทลที่ผู้ใช้สร้างขึ้นของ Kuler

วิธีการสร้างสีแบบสุ่ม แต่แตกต่างกันจำนวนเท่าใด?

เพื่อจุดประสงค์ในการสร้างแผนภูมิของคุณฉันไม่แน่ใจว่าสีแบบสุ่มจะใช้งานได้ การเลือกสีแต่ละสีควรเลือกด้วยมือ

วิธีการแปลทั้งหมดนั้นให้เป็นเลขฐานสิบหก (สีของเว็บ)

ซอฟต์แวร์กราฟิกส่วนใหญ่แสดงค่าฐานสิบหกสำหรับสี Hex คือสตริง RGB ที่สร้างขึ้นโดย ## (สีแดง), ## (สีเขียว), ## (สีฟ้า)

ตัวอย่างเช่นสีแดงบริสุทธิ์คือ FF0000 และสีฟ้าบริสุทธิ์คือ # 0000FF สีม่วง (คุณได้จากการผสมสีแดงและสีน้ำเงิน) คือ # FF00FF

เนื่องจากคุณจะสร้างแผนภูมิฉันแนะนำให้เยี่ยมชมบล็อกต่อไปนี้เพื่อดูแรงบันดาลใจ:

http://infosthetics.com

http://flowingdata.com

หากคุณมีเวลาอ่านบทเรียนในทฤษฎีสี

ความคิดที่ฉันมีอยู่ในใจเป็นระยะเวลาหนึ่งคือการสร้างสีที่แตกต่างกันเท่าที่จะทำได้ (ภายในขีด จำกัด ) สำหรับสีได้มากเท่าที่ต้องการ ความยุ่งยากเป็นพิเศษหากฉันต้องการสีเพิ่มเติมสองสามอันในภายหลังสำหรับแผนภูมิเดียวกัน (อาจเพิ่มแท่งพิเศษสองสามอัน) พวกเขาจำเป็นต้องปรับให้เข้ากับรูปแบบเดียวกันทำให้สีที่มีอยู่เดิมเหมือนกัน

ความคิดที่ฉันคิดขึ้นมาเป็นเคล็ดลับที่เล่นซอ ลองจินตนาการถึงวงกลมของสี (อาจเป็นสีที่ต่างกันโดยมีความอิ่มตัวและความสว่างเท่ากัน แต่คุณสามารถกำหนดวงกลมใด ๆ ผ่าน colourspace ใดก็ได้) แทนที่จะให้มุมเป็นองศาสำหรับวงกลมนั้นให้มีช่วงศูนย์ถึง 255 ในเลขฐานสองนั่นคือ 00000000 ถึง 11111111 เพิ่มหนึ่งใน 8 บิต 255 และมันล้นกลับเป็นศูนย์ดังนั้นมันจึงทำหน้าที่เป็น "ค่าวงกลม" โดยธรรมชาติ (ในด้านเทคนิคการบวกและการลบคือโมดูโล 256)

เคล็ดลับคือเมื่อคุณเลือกศูนย์สี, สีหนึ่ง ฯลฯ เพื่อบิตย้อนกลับตัวเลขเหล่านั้น ในการทำเช่นนั้นใน C ฉันจะใช้ ...

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

ดังนั้นลำดับ 0, 1, 2, 3, 4 จึงถูกแปลงเป็น 0, 128, 64, 192, 32

ประเด็นก็คือคุณมี 256 สีที่แตกต่างกันและสีที่เก่าที่สุดจะถูกเว้นระยะห่างกันมากโดยที่สีที่ใหม่กว่านั้นจะถูกเว้นระยะห่างกันน้อยมากและเติมในช่องว่าง (64 คือครึ่งทางระหว่าง 0 และ 128, 32 คือครึ่งทาง ระหว่าง 0 ถึง 64 และอื่น ๆ )

ความกว้างบิตใด ๆ สำหรับ "มุม" ที่เฉพาะเจาะจงจะใช้งานได้หากคุณปรับบิตกลับด้านและแน่นอนว่าคุณสามารถเรียกใช้หลาย ๆ รอบในคราวเดียวสำหรับพารามิเตอร์ที่แตกต่างกันของสี (อาจจะเว้หมุนเร็ว แต่ความอิ่มตัวหมุนช้ากว่า)

นั่นทำให้คำถามของวิธีที่คุณแมป "มุม" ของคุณไปยังหมายเลขเฉพาะ RGB หรืออะไรก็ตามที่ฉันไม่มีความเชี่ยวชาญ - โอ้และคำถามที่ว่า ActionScript รองรับการเล่นบิตฟิลลิ่งหรือไม่

มีคำถาม Stack Overflow ที่น่าสนใจ " ฟังก์ชั่นสำหรับสร้างวงล้อสี " ในที่นี้ คุณอาจต้องการอ่านเอกสารที่แนะนำอย่างใดอย่างหนึ่ง(PDF)

คำถามนี้ทำให้ฉันหลงใหลดังนั้นฉันจึงเริ่มทำ googling :) อย่าคาดหวังคำตอบจากประสบการณ์

โดยทั่วไปจะทำการคำนวณที่มีสีจะดีที่สุดที่จะทำดำเนินการในวงล้อสีซึ่งเป็นตัวแทนในรูปแบบ HSL

ผู้เขียนของโพสต์นี้ใจดีมากพอที่จะให้ข้อมูลบางอย่างเกี่ยวกับการแปลง RGB เป็น HSL และโค้ดตัวอย่างเกี่ยวกับวิธีการคำนวณสีเสริม

หากคุณโชคดีคุณไม่จำเป็นต้องเข้าใจสิ่งใดเลยหากห้องสมุด AS3 ที่มีชื่ออย่างใดอย่างหนึ่งต่อไปนี้ทำงานให้คุณ

• Colorjizz
• Mojocolor

ฉันใช้รหัสต่อไปนี้ หมายเหตุ: มันไม่ใช้ทฤษฎีเกี่ยวกับการทำงานของตา / สมองฉันแค่อยากจะสร้างเพดานสีเช่นแดง + เขียว + น้ำเงิน = 1 และสีก็อยู่ห่างกันเท่า ๆ กัน พารามิเตอร์ "ฉัน" เป็นสีใดบ้างจากจำนวนที่เป็นไปได้ของ NUM มันใช้งานได้กับจำนวนประมาณ 91 ish หมายเหตุฉันควรเรียกใช้จากศูนย์ถึง NUM-1 สิ่งอื่น ๆ เป็นไปได้ข้อ จำกัด ที่ระบุไว้ข้างต้นค่อนข้างสมเหตุสมผล แต่อย่างน้อยมันก็สร้างสีที่แตกต่าง - โดยที่คุณไม่ต้องการมากเกินไป

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

อีกครั้งมันไม่ใช้ทฤษฎีสีดังนั้นจึงไม่มีการรับประกันว่าความพิถีพิถันจะได้รับการปรับให้เหมาะสมในวัดใด ๆ โดยเฉพาะอย่างยิ่งถ้าคุณมีความกังวลกับผู้ใช้เป็นครั้งคราวด้วยการตาบอดสีบางส่วน

นอกจากนี้คุณยังสามารถตั้งค่า varaibles สีหลักเป็นตัวเลขสุ่มได้ แต่ก็มีโอกาสน้อยกว่าที่จะสร้างชุดที่แตกต่างทางสายตา

ในอดีตฉันเคยทำสิ่งนี้ด้วยการเลือก 20 สีขึ้นไปแทนที่จะพยายามสร้างมันขึ้นมา ยกเว้นว่ากราฟของคุณมีความซับซ้อนมากคุณไม่จำเป็นต้องมีมากกว่านี้ วิธีการนี้ในขณะที่ง่ายยังช่วยให้คุณกำหนดสีเดียวกันให้กับปัจจัยเดียวกันในกราฟของคุณ (ตัวอย่างเช่นคุณสามารถทำให้ 'ยอดขาย' เป็นสีเดียวกันทำให้กราฟตีความได้ง่ายขึ้น)

ผมชอบการสุ่มตัวอย่างสีจากภาพถ่าย ในฐานะนักออกแบบฉันทำสิ่งนี้ด้วยตนเอง ในฐานะโปรแกรมเมอร์ฉันมักจะเลือกพิกเซลแบบสุ่ม หากคุณต้องการการควบคุมที่มากขึ้นคุณสามารถสร้าง 'รูปถ่าย' ของคุณเองซึ่งสอดคล้องกับกฎบางอย่าง

ฉันชอบยูทิลิตี้ออนไลน์ของ VisiBone อยู่เสมอเพราะคุณสามารถเลือกหลายสีและประเมินผลแบบโต้ตอบได้ว่าพวกเขาขัดแย้งกันอย่างไร: http://www.visibone.com/colorlab/

ฉันบอกว่าพวกเขาปะทะกันไม่ดีเพราะฉันคุ้นเคยกับความเปรียบต่างของสีเพราะมันใช้กับงานศิลปะ "แบบอะนาล็อก" และรู้สึกประหลาดใจกับสีที่ฉันเลือกสีที่ขัดแย้งกันในศิลปะดิจิทัล (เห็นได้ชัดว่าฉันไม่มีนักออกแบบ)