[Design][Art] Munsell Color System (ระบบสีแบบมันเซลล์)

บทความนี้เราจะมาทำความรู้จักกับระบบสีที่เรียกว่า Munsell Color System นะครับ ซึ่งเป็นความรู้พื้นฐานของสายงานด้านคอมพิวเตอร์กราฟฟิก และนักแต่งภาพ หรือถ่ายภาพทั่งหลาย

ด้วยเนื่องจากผมเองก็ชอบสายงานการออกแบบ ละรีทัช ถ่ายภาพ มาแต่เด็กๆ เลยพอมีความรู้อยู่บ้าง เลยคิดว่าเอามาแบ่งกันอ่านนะครับ ประกอบกับแอพแต่งรูปในเมือถือเดี่ยวนี้มีให้ปรับแต่งเยอะขึ้น เลยจะมาอธิบายเอาใจพวกชอบแต่งรูปได้ด้วยเช่นกัน

ทำความรู้จักกับส่วนประกอบของระบบสีก่อน

ในส่วนี้เราต้องทำความรู้จักกับส่วนประกอบของระบบสีนี้ซึ่งเราแบ่งออกเป็น 3 ส่วนนะครับ (ศัทพ์อังกฤษเรียกว่า  three color dimensions)

  1. Hue คือสีสัน เฉดสี หรือ เนื้อสีแท้
  2. Value คือความสว่างของสี (lightness) บางที่มามันบอกว่า Birghtness
  3. Chroma คือค่าที่แสดงความบริสุทธิ์ของสี (purity) หรือให้เรียกตามชื่อในแอพมันจะใช้ Saturation / brilliance และมันมีอีกค่านึงคล้ายๆกันคือ Vibrance เดียวผมอธิบายให้ฟังว่าสองตัวนี้ต่างกันยังไง ไม่ยาก

Hue

Munsell-color-communication-hue-designation-circle-231x300อาภาษาคนง่ายๆ มันก็คือตัวที่ระบุว่าสีนั่นเป็นสีอะไร หรือเนื้อสีนั่นแหละ เช่นสี    แดง สีส้ม สีเหลือง โดยมันเซลล์ได้กำหนดค่าสีไว้ ที่เรียกว่า  principal hues ไว้คือ แดง (Red) เหลือง (Yellow) เขียว (Green) ฟ้า (Blue) ม่วง (Purple) และเราสามารถผสมสีจากวงจรสีหนึ่งไปอีกสีหนึ่งได้ด้วยเช่น แดง ไป เหลือง เราก็จะได้ส้ม (YR) และพวกนี้เขาจะเรียกว่า intermediate hues คือสีที่ได้จากผสมของสีหลักตามวงจร คือ yellow-red, green-yellow, blue-green, purple-blue and red-purple ละเราก็จะใช้ชื่อย่อๆ มันตามนี้ R, YR, Y, GY, G, BG, B, PB, P, RP ทั่งหมดเราก็จะนับได้ 10 สีจากผสมทั่งหมด

 

 

 

ที่นี้เรามาดูตัวอย่างกัน ผมเอาแอพ Camera360 มาให้ดูกันเป็นตัวอย่างนะในการปรับค่า Hue เอาจากแอพมือถือนี่แหละคนใช้เยอะดีถ้าเอาจาก Photoshop เกรงว่าจะเอาไปใช้กันไม่เป็น มาดูตัวอย่างกัน

Screenshot_2015-04-22-21-20-11

 

 

 

ผมเอารูปที่ผมถ่ายมาแต่งให้ดูละกัน (ครอปภาพออกไปส่วนนึงฉากหลังที่ไม่เกี่ยว) พอดีชอบถ่ายรูปมพวกมาโคร , ชัดตื้น กับวิว เลยมีเก็บไว้บ้าง เราเปิดแอพ 360 มาแล้วเข้าเมนู Color

 

 

 

 

 

 

Screenshot_2015-04-22-21-21-05Screenshot_2015-04-22-21-20-18
ที่นี้ผมเลือกสีสุดท้าย Magenta และปรับบาร์ของสีสุดเลย ดอกกล้วยไม้ผมก็จะออกสีอมแดงทันที เพราะมันนืทำการเปลี่ยนนื้อสีที่เป็น Magenta ละมันเปลี่ยนสีโดยคำนวณจากอะไรละ ให้ดูกราฟวงกลมข้างนนะ จากอักษร P มันจะวนกลับไปหา R นั่นเอง หรือดูรูปล่างนะ

 

 

 

 

 

Screenshot_2015-04-22-21-20-58จากรูปเราจะเห็นว่ามันมีสีไล่กันไปหา แดง จนไปถึงม่วง เมนูเลือกสีนะ เอารูปบนมาประกอบกันนะ ถ้าเราเลือนบาร์ไปสีมันก็จะเลือนไปหาค่าสีที่ห่างกัน 1 สี ดูจากกราฟประกอบ น่าจะพอเข้าใจละนะ แล้วถ้าเราเลืออกบาร์มาอีกฝั่งสีมันก็จะออกมาทาง PB หรือมีสีน้ำเงินผสมเข้ามานั่นเอง

Screenshot_2015-04-22-21-20-51

 

 

Value

230px-ColorValue.svgค่านี้ตัวนี้มันก็คือความอ่อน หรือแก่ของสีนั่นเองครับ โดยค่าน้ำหนักสีมีอยู่ 10 ระดับโดยนับจาก 0 ถึง 9 โดยมี 3 สีคือ สีดำ , สีเทา , สีขาว หรือเรียกว่า Acromatic Color และสีเทาเขาจะเรียกว่า เทากลาง หรือสีกลาง (พวกเล่นกล้องจะเรียกกันว่า เทากลาง 18%) และสีเทากลางนี่จะมีค่า RGB = 128 คือสีที่ไม่คุณสมบัติ Hue แต่มันเซลล์จะเอามันเอาไปไว้ผสมกับสี  Acromatic Color เพื่อให้ได้ค่าความอ่อน หรือแก่ของสี

ลากยาวมาตั่งนาน ผมจะลองเปรียบเทียบกับชีวิตประจำวันเรา คือตอนเด็กๆ ที่เรียนศิลปะเวลาเราผสมสีน้ำเนี่ย จำได้ไหมพอเราเอาขาวลงสีจะจาง พอเอาดำลงสีจะเข้มนั่นแหละครับตัวอย่าง

Screenshot_2015-04-22-22-06-29 Screenshot_2015-04-22-22-06-32

 

Chroma

Screen Shot 2558-04-22 at 22.33.17คือค่าของสี Hue ที่ถูกผสมด้วยสีเทากลาง (RGB = 128) เพื่อให้ค่า Chroma ของสีอ่อนลง (week) หรือความจัดของสีสูงขึ้น (High Chroma) หรือเรียกว่าการอิ่มตัวของสี คำที่มักเจอบ่อยๆ ก็คือ Saturation เห้ยมาละๆ ใกล้ความจริงแล้วพอจะเห็นภาพมามังยังครับ โดยนะครับ ค่าความอ่อนของสีจนไปถึงสีที่สดเนี่ย จะเริ่มที่ 1 ออกไปเรื่อยๆ นั่นเอง

แล้วเรามาดูตามตัวอย่าง คือเราจะดูแบบสองมิติหน่อยนะ คือมีค่า value เขามาประกอบ ให้ดูที่ 5/10  ซ้ายมือ คือตำแหน่งที่ค่าสูงสุดของสี ถ้าเราผสม เทากลางลงไปเยอะๆ สีก็จะกลายเป็นเทา (หลักการที่ทำให้เกิดภาพขาวดำ) และถ้าเราลดเทากลางออกจากภาพสีก็จะสดเรื่อยๆ นั่นเอง

 

Screenshot_2015-04-22-21-49-28 Screenshot_2015-04-22-21-49-33

 

 

จากภาขวามือคือภาพที่ถูกปรับค่า Saturation ลดและเพิ่มจนสุดเราก็จะได้ตัวอย่างที่เห็นนะครับ

 

 

 

 

 

 

 

 สรูปด้วยกราฟลองจินตนาการเลือนเข้าออก บนล่างก็จะเป็นระบบ 3 มิติ

600px-Munsell-system.svg

 

ก่อนจบบทความนี้ผมก็จะมีเกร็ดความรู้ง่ายๆ มาฝากสำหรับคนที่เคยเจอแอพแต่งรูป หรือเล่น Photoshop, Lightroom ก็ได้นะมันจะมีการปรับค่า Chroma หรือเรียกให้เข้าใจคือ Saturation และมันจะมีระบบที่เพิ่มมาใหม่คือ Vibrance ซึ่งก็ปรับความอิ่มตัวของสีเหมือนกัน แต่มันมีจุดที่ต่างกันตรงที่

Saturation

เป็นการปรับความอิ่มตัวแบบ Linear Adjustment คือทุกๆสีที่อยู่ในรูปจะถูกคูณด้วยค่าความอิ่มตัวเท่าๆ กันหมดทุกสี เช่นทั่งภาพจะถูกคูณด้วยเลข 5 ทั่งภาพ เป็นต้น

Vibrance

เป็นการปรับความอิ่มตัวของสีแบบ Non-Linear Adjustment คือทุกๆสีในรูปจะไม่ถูกคูณด้วยค่าความอิ่มตัวที่เท่ากันหมดเหมือน Saturation เพราะระบบนี้จะคำนวณหาความอิ่มตัวของสีว่าสีไหนมาก ก็จะมีตัวคูณน้อยลง ตัวไหนอิ่มตัวน้อยจะมีตัวคูณที่เยอะขึ้นตามลำดับ ดังนั่นภาพเราจะไม่สดทั่งภาพถ้าใช้ฟังก์ชันนี้

 

Screenshot_2015-04-22-21-49-15 Screenshot_2015-04-22-21-49-23ลองมาดูความแตกต่างระหว่างการปรับค่า Vibrance เพิ่มกับลดความอิ่มตัวของสี และเทียบกับภาพบนในหัวข้อ Chroma ที่ปรับค่า Saturation จะเห็นได้ว่าเกิดความแตกต่างจริงๆ เวลานำไปใช้แต่งรูปก็ปรับให้ถูกวิธีนะครับ

 

 

 

 

 

 

จบแล้วครับผมหวังว่าทุกคนจะเข้าใจนะทั่ง Designer มือใหม่ หรือนักถ่ายภาพที่หัดรีทัช หรือใครก็ตามที่สนใจการออกแบบก็ต้องศึกษาเรื่องระบบสีก่อนจะได้นำไปใช้ให้เป็นนะครับ อ่านตรงนี้จบก็ลองไปอ่านระบบสีแบบ HSL ,HSV เพิ่มเติมหลักการคล้ายๆ กัน ซึ่งในบทความนี้ผมเน้นให้นำไปใช้ได้จริงๆ ไม่เป็นหลักการจ๋าสะทีเดียว อาจมีผิดบ้างเพราะบอกเล่าจะประสบการณ์ ก็ขออภัยไว้ ณ ที่นี้ครับ ไว้เจอกันบทความหน้าผมจะหาเรื่องงมาเล่าให้ฟังอีกครับ

 

Credit: http://munsell.com/ , http://en.wikipedia.org/wiki/Munsell_color_system

Facebook Comments