พื้นฐานการเลือกสีและรหัสสี

พนฐานการเลอกใชสและรหสส

อาจารยนงคราญ ค าวชยสาขาวชาเทคโนโลยสารสนเทศคณะวทยาศาสตร มหาวทยาลยแมโจEmail: [email protected]

ว ช า ทส105 การออกแบบคอมพว เตอรกราฟกComputer Graphics Design

พนฐานการเลอกใชสความเขาใจในหลการของการเลอกใชส

อยางลกซงนนเปนสงส าคญในการออกแบบ และยงเปนหนงในเครองมอการออกแบบดานกราฟกทส าคญอกดวย การเลอกใชสมปจจยตาง ๆ ทเ กยวของมากมาย และรวบรวมสจากแหลงตาง ๆ ลวนไมมทสนสด ตงแตสจากหมกพมพไปจนถงสจากหนาจอทเรามองเหน ซงสแตละสนนมลกษณะเฉพาะของตวเอง

สมความเปนเอกลกษณ เปนภาษาทซบซอน และมความสามารถในการเปลยนความหมายของตวเองเมอไปจบคกบสอน ๆ เมอคณเลอกเพอจะน ามาใชงานออกแบบ คณตองค านงถงความตดกนและความกลมกลนกนของส และผลกระทบทอาจจะเกดขนตอความชดเจนในการพมพ

นอกจากนคณยงสามารถสรางอารมณของงานออกแบบโดยการใชจตวทยาดานส แตคณจะตองมนใจวาคณนนไดเลอกสทสอถงขอความไดอยางถกตอง และเหมาะสมเพอใหผ เขาชมสามารถเขาถงสงทคณตองการจะสอออกไปได

พนฐานการเลอกใชส

การท าความเขาใจวธการเลอกหรอก าหนดสเพอใชในวตถประสงคใด ๆ นกออกแบบจะตองพฒนาความรเกยวกบการท างานของส วธการจดประเภทส และเงอนไขตาง ๆ ของสเปนอนดบแรก

สสามารถแบงออกเปน 3 ดานหลก คอ เนอส , โทนส และความสดของส

โดย “เนอส” หมายถงชอทวไปของส เชน สแดง สเหลอง หรอสน าเงน ในเนอสหนง ๆ จะมหลายรปแบบตงแต สวาง (สออน) จนถงมด (สเขม) ซงจะเรยกวาโทนส หรอน าหนกสนอกจากนเนอสยงสามารถแบงไดตามความสดหรอความเขมของส (อาจเรยกไดวาความหนาแนนของส) ความสดของสจะมตงแตความหนาแนนสงไปจนถงความหนาแนนต า หรอตงแตสวางจนถงมด

สยงสามารถอธบายไดดวยอณหภมและพลวตของส เ น อ ส ท มสเปกตรม (Spectrum) ยานสแดงจะใ หความรสกอบอนและใกลชดตอผ ชมมากกวาเนอสมสเปกตรมยานสน าเงนทใหความรสกเยนและหางไกล

วงลอส (Color wheel)

วงลอส (Color wheel) วงลอสแสดงสปฐมภม สทตยภม สตตยภม โดยสปฐมภมประกอบไปดวยสแดง สเหลอง และสน าเงน สทตยภมสรางขนจากการผสมสปฐมภมทละสองสเขาดวยกน ซงจะเกดเปนสสม สเขยว และสมวง สตตยภมเกดจากการผสมสปฐมภมสเหลอง-สม สเหลอง-เขยว สน าเงน-เขยว สน าเงน-มวง และสแดง-มวง

เนอส (Hue)

เนอส (Hue) เปนความแตกตางของสหนง ๆ กบสอนๆ โดยจะเปนชอทวไปของส เชน สแดงกลาวไดวา เปนสตรงขามกบสฟา

โทนส (Tone)

โทน (Tone) หรอน าหนกส เปนความสมพนธระหวางความสวางและความเขมของส สทเพมสขาวเขาไปจะเรยกวาสออน สวนสทเพมสด าเขาไปจะเรยกวาสเขม

ความสดของส (Saturation)

ความสดของส (Saturation) หรอความเขมของส เปรยบเทยบไดกบความสวางของส ในแถวสทมความเขมสงจะเปนสสวาง ในขณะทแถวสทมความเขมสต านนเปนสทหมองกวา สทงสองทอยในแถวเดยวกนนนถอวาเปนสเดยวกน แตมความเขมทแตกตาง

สแบบลบ (Subtractive Color)

สแบบลบ (Subtractive Color) ซองอะซเตททพมพดวยแมสโปรงใสสามารถน ามาพบใหเปนรปทรงสามเหลยมแบบตาง ๆ ซงทก ๆ การพบนนจะใหโทนสทแตกตางกนออกไปทกครง

วธนสามารถน าไปประยกตใชกบการออกแบบดจตอลได โดยการสรางเลเยอรโปรงใสและน าแตละเลเยอรมาซอนทบกน การทดลองซอนทบสในรปแบบนจะชวยใหคณสามารถก าหนดล าดบความส าคญในก า ร อ อ ก แ บ บ , อ ง ค ป ร ะ ก อ บ ใ นหนากระดาษ และสรางความนาสนใจกบตวอกษรและก าหนดอารมณและจงหวะใหกบผลงาน

สปฐมภมแบบบวก และสปฐมภมแบบลบ

เพอท าความเขาใจในการท างานของส จดทส าคญทสดคอการรจกสทเกดจากแสง (สแบบบวกหรอระบบส RGB) และสทเกดจากเมดส (สแบบลบหรอระบายส CMYK )

ซงทงสองแบบท างานแตกตางกน เพอใหมองเหนความแตกตางอยางชดเจน หากคณท างานดวยคอมพวเตอรของคณ สทแสดงบนหนาจอ (ระบบส RGB) จะไมเหมอนกบสทคณพมพออกมา (ระบบส CMYK) ปรากฏการณนสรางปญหาใหกบงานพมพเปนอยางมาก เชน สแสดงอยหนาจอนนจะมความสวางมากกวาสทไดจากงานพมพ เปนตน

สปฐมภมแบบบวก และสปฐมภมแบบลบ

เมอไรกตามทคณท างานดวยระบบสแบบลบในการพมพ แตละสจะถกพมพลงบนกระดาษเพอลบพนสขาว และหากใชสปฐมภมทงสามมาซอนทบกนจะเกดเปนสด า ในวงลอสแสดงใหเหนวาสปฐมภมจะประกอบดวยสแดง สเหลอง และสน าเงน

สวนสทตยภมจะเกดขนจากการผสมสปฐมภมเขาดวยกน จะไดออกมาเปนสสม สเขยว และสมวง

สวนสตตยภมคอการผสมกนระหวางสทตยภมสองสเขาดวยกน ดงนนค าวา “พมพ 4 ส” หมายถงการใชส 4 สในการผสมกนเปนทก ๆ สสดงกลาวไดแก ฟาอมเขยว (Cyan) , แดงอมมวง (Magenta) , เหลอง (yellow) , ด า (Key)

สทแสดงผลบนหนาจอ

สทแสดงผลบนหนาจอ สปฐมภมแบบบวกและส RGB เปนสทใชในการสรางสสนตาง ๆ บนหนาจอคอมพวเตอร , โทรทศน และจอแสดงผลตางๆ การผสมสระหวางสปฐมภมแบบบวกทงสามจะไดผลลพธออกมาเปนสขาว

สปฐมภมของงานพมพ สปฐมภมแบบลบและส CMYK ฟาอมเขยว (Cyan) , แดงอมมวง (Magenta) , เหลอง (yellow) , ด า (Key) เปนสพนฐานทใชในงานพมพ เมอน าสเหลานมาผสมกนจะไดเปนสด า

สแพนโทน (Pantone)

สแพนโทน (Pantone)สแบบบวก ทใ ช งานออกแบบจะ

เรยกวาสพเศษ เมอคณตองการเลอกสจะน าไปใชงาน คณอาจจะใชระบบการจบคสสากล หรอทคณรจกกนในชอของระบบการจบคสแพนโทน (PMS) สแพนโทนเกดจากการผสมสระหวาง 15 เมดส (รวมทงสด า และสขาว) และยงเปนสพนฐานทใชในการผสมสส าหรบงานพมพ ระบบนจะแตกตางกนจากระบบส CMYK แตบางทของแพนโทนอาจจะใหสทเหมอนกบระบบ CMYK

การไลเฉดสเทา

การไลเฉดสเทา คอ ตารางชดสของสโทนสด าและสขาวทน ามาผสมเขาดวยกน สามารถก าหนดแสงและเงาของสได ทงในดานรปธรรมและนามธรรม ตารางทเกดจากการผสมสทงสองโทนนจะสรางการไลระดบสทผสามผสานกนไดรวดเรว

การเคลอนไหวและการตดกนของส

การเคลอนไหวและการตดกนของสสแสดง , สเหลอง และสสม เปนส

ขององคประกอบเบองหนา แตสน าเงนและสเขยวจะเปนสทถกจดอยเบองหลงของชนงาน ตวอยางน จะสรางความเปลยนแปลงไปตามทฤษฏสและเกยวกบเคลอนไหวอนเกดขนจากการเลอกใชสไดอยางสมบรณ

การเคลอนไหวและการตดกนของส

การสนสขอบ เมอสวนประกอบสแดงแลเขยวอย ขาง ๆ กน ดวงตาของเราจะมองเหนเสนสขาวจางๆ ทขอบของสทงสอง การสนทขอบถกในการสรางสรรคผลงานทสวยงาม แตเทคนคเดยวกนนจะท าใหเราอานอกษรไดยากยงขน

ค าศพททเกยวของ• Additive Color : ระบบทงหมดทแสดงผลบนหนาจอหรอโทรทศนนนมกจะใชคาส RGB (แดง,เขยว,น าเงน)

เมอน าสทงสามนมาผสมกนจะไดออกมาในรปของสขาว• Analogous color : สทอยขาง ๆ กน ในวงลอส ยกตวอยาง เชน สน าเงนกบสเขยว• CMYK : ฟาอมเขยว (Cyan) , แดงอมมวง (Magenta) , เหลอง (yellow) , ด า (Key) ทงสสนเปนสทใชใน

กระบวนการพมพ 4 ส• Complementary Color : สทอยตรงขามกนในวงลอส ยกตวอยางเชน สแดงกบสเขยว• Gamut : ขอบเขตของสทอยในระบบหนง ๆ เชน ขอบเขตของส CMYK หรอ RGB• Primary Color : สแดง สเหลอง หรอสน าเงน• Secondary Color : การผสมสปฐมภมใด ๆ สองสเขาดวยกน โดยเมอผสมแลวจะไดสสม สเขยว และสมวง• Spot Color : สพเศษ เชน ส Pantone หรอ Toyo ซงเกดจากการพมพจากสพน ไมไดสรางขนจากส CMYK• Subtractive Color : ระบบทใชในการพมพ ซงขนกบคาส CMYK • Tertiary color : การผสมสทตยภมสองสเขาดวยกน ไดเปนสตตยภม• Color models : มาตรฐานคาสทถกใชผสมเปนสตาง ๆ เชน CMYK , RGB , LAB

สและการรบร , ความตดกน และความกลมกลมของส

สและการรบร , ความตดกน และความกลมกลมของส

ประสบการณเกดขนจากการท างานจะเปนสงทท าใหเหนมมมองในการเลอกใชสทเหมาะสมกบงานออกแบบกราฟก การเลอกใชส และความชดเจนของสนน จะมความแตกตางกนอยางมากโดยมนจะขนกบวาเรามองสนน ๆ ผานห นาจอแสดงผลหรอมองผานการพมพ สมผลกระทบอยางมากตอการรบร ดงนน เราควตองพจารณาใหถถวน สนความตดกนและความกลมกลนของจะชวยเพมความนาสนใจกบงานออกแบบ

สและการรบร (Color Legibility)

สและการรบร (Color Legibility)การรบรจากสนนหมายถงการทสามารถเขาใจบางสง

บางอยางไดอยางชดเจน มปจจยมากมายทมอทธพลตอการรบรและการสอความหมายของส ยกตวอยางเชน

- เงอนไขเกยวกบแสงและการมองเหนในการอานมผลกระทบอยางชดเจนตอการรบรทงในดานงานพมพหรอแมแตงานทแสดงบนจอแสดงผล โดยสามารถเปรยบเทยบการรบรไดจากการมองภาพผานจอแสดงผลในหองมดกบหองทไดรบแสงอาทตยโดยตรง

- การเลอกส- สพนหลงหรอพนผวของสทใชในการพมพ- ขนาดและรปรางของตวอกษรหรอรปภาพทน ามาใชงาน

ความตดกนละความกลมกลน (Contrast and Harmony)

ความตดกนละความกลมกลน (Contrast and Harmony)

ก า ร เ ล อ ก ใ ช ส ค ว รสอดคลองกบเนอหาของงานออกแบบและควรสนบสนนไอเดยใหมความเปนรปธรรมมากยงขน ดงนน การท างานเกยวกบความตดกนและความกลมกลนของสจงเปนส ง ส า ค ญ ท ง ส อ ง ล ว น มความสมพนธกบความสามารถในการรบรและความสมพนธของส และสงผลตอฟงกชนและความเขาใจในงานออกแบบ

ค าศพททเกยวของ• Analogous : ความคลายคลง , เทยบเคยง , เหมอนกน ยกตวอยางเชน สสองสทใกลเคยงกน เชน ส

เขยวของหญากบสเขยวของใบไมนนสทมความคลายคลงกน• Contrast : ความแตกตางระหวางสองหรอหลายองคประกอบ ซงในทนหมายถง สของรปภาพ

ยกตวอยาง สทมความตดกนสง เชนสขาว และสด า หรอสน าเงน และสสม สวนสทมความตดกนต า เชน สน าเงนสองเฉดทคลายกน อยางสฟาอมเขยว (Cyan) และสน าเงนดอกขาวโพด (Cornflower Blue) เปนตน

• Harmony : รปภาพทประกอบดวยสสองสหรอมากกวาอยดวยกนอยางกลมกลน เชน สน าตาลอมเทา (Taupe) และสเทา

ความหมายของส

ความส าคญของส

ท าไมการเลอกใชสถงสงผลตอประสทธภาพของงาน ? นนเปนเพราะสแตละสมความผกพนกบมนษยมาเปนเวลานาน ทก ๆ สเกดขนมาจากธรรมชาตผานกาลเวลามายาวนานจนฝงรากลกอยในจตวญญาณของมนษย สเขามามบทบาทในสงคม , เปนสญลกษณ และสมพนธกบอตลกษณบคคล ดงนน เพอใหการใชสเปนไปอยางมประสทธภาพ คณตองเรยนรความสมพนธระหวางสกบการสอความหมายตาง ๆ หรอการใชสกบระบบปาย และการใชสใหสอดคลองกบอารมณ

ความเฉลยวฉลาด, ความทรงจ า , ประสบการณ และวฒนธรรมลวนมสวนสมพนธกบการใชสทงสน ความแตกตางของสเพยงเลกนอยอาจสงผลตอการรบรได โดยความหมายของสจะเปลยนไปตามพนฐานการเรยนรและพนฐานการทางวฒนธรรม เปนหนงในสญลกษณของทก ๆ สงคม เปนตวแทนสอความมหาย และสงคมแตกตางกนยอมนยามความหมายของสแตกตางกน


• สด า เปนสของความเศราโศกเสยใจ และความตายของประเทศฝงตะวนตก แตในประเทศจน อนเดย สขาวถกใชเปนตวแทนแหงความเศรา

• สแดง มความหมายถงการ “หยด” มกใชกบปายเตอนยานพาหนะตางๆ สวนสแสดงในความหมายของชาวจนหมายถง ความโชคด

• สเขยว ในศตวรรษท 19 มความหมายถงยาพษ หรอสารหน แตในปจจบนสเขยวมความหมายถงความอดมสมบรณและการตระหนกถงธรรมชาต

• สน าเงน ใหความรสกถงไปรษณยในประเทศสหรฐอเมรกา เนองจากต จดหมายในสหรฐอเมรกานนมสน าเงน แตในสวเดนหรอองกฤษต จดหมายจะเปนสแดง รวมทงประเทศไทยดวย

• สเหลอ เปนสญลกษณแหงความกลาหาญของชาวญป น

ความหมายของสนนสามารถเปลยนไปไดตามเวลาและแตกตางออกไปตามแตละวฒนธรรม หากงานออกแบบของคณ ตองจดแสดงระดบนานาชาตอยางลมค านงถ งความหมายของสเหลานประกอบดวย


สแดง ใหความรสกรอน รนแรง กระตน ทาทาย เคลอนไหว ตนเตน เราใจ มพลง ความอดมสมบรณ

ความมงคง ความรก ความส าคญ อนตราย

สสม ใหความรสก รอน ความอบอน ความสดใส มชวตชวา วยรน ความคกคะนอง การปลดปลอย

ความเปรยว การระวง

สเหลอง ใหความรสกแจมใส ความสดใส ความราเรง ความเบกบานสดชน

ชวตใหม ความสดใหม ความสกสวาง การแผกระจาย อ านาจบารม

สเขยว ใหความรสก สงบ เงยบ รมรน รมเยน การพกผอน การผอนคลาย ธรรมชาต

ความปลอดภย ปกต ความสข ความสขม เยอกเยน

สน ำเงน ใหความรสกสงบ สขม สภาพ หนกแนน เครงขรม เอาการเอางาน ละเอยด รอบคอบ สงางาม

มศกดศร สงศกด เปนระเบยบถอมตน

สมวง ใหความรสก มเสนห นาตดตาม เรนลบ ซอนเรน มอ านาจ มพลงแฝงอย ความรก ความเศรา

ความผดหวง ความสงบ ความสงศกด

สฟำ ใหความรสก ปลอดโปรงโลง กวาง เบา โปรงใส สะอาด ปลอดภย ความสวาง ลมหายใจ

ความเปนอสระเสรภาพ การชวยเหลอ แบงปน

สด ำ ใหความรสก มด สกปรก ลกลบ ความสนหวง จดจบ ความตาย ความชว ความลบ ทารณ โหดราย

ความเศรา หนกแนน เขมเขง อดทน มพลง

สชมพ ใหความรสก อบอน ออนโยน นมนวล ออนหวาน ความรก เอาใจใส วยรน หนมสาว

ความนารก ความสดใส

สเทำ ใหความรสก เศรา อาลย ทอแท ความลกลบ ความหดห ความชรา ความสงบ

ความเงยบ สภาพ สขม ถอมตน

สทอง ใหความรสก ความหรหรา โออา มราคา สงคา สงส าคญ ความเจรญรงเรอง ความสข

ความมงคง ความร ารวย การแผกระจาย

สกบอารมณและภาษา

ความหมายของสนนม ค ว า ม เ ป น น า ม ธ ร ร ม ส ง แตกตางกนไปตามพนทตางๆ แตอารมณความรสกทเกดจากการใชสนน มความเปนสากล เชน สแดง , สสม และสเหลอง จะชวยกระตนความรสกทอบอน , ต น เ ตน ทาทาย , สขภาพแขงแรงสมบรณ หรอโกรธแคนสวนสตรงขามอยางสฟาห รอเขยวกระต นความรสกทเยน ,สงบนง , สนต , ปลอดภย และหรอผดหวง

ชดส (โทนรอน , โทนเยน, โทนธรรมชาต)

สกบการใหขอมล


สเปนเครองมอททรงพลง โดยเฉพาะกบงานออกแบบทเกยวกบขอมล เพราะจะชวยใหนกออกแบบสามารถจดเรยงขอมลไดในหลากหลายรปแบบ และเพมความสามารถในการ “เขาใจได” ใหกบงานออกแบบ นกจตวทยาไดพสจนแลววาผชมจะเหนสกอนเหนรปทรงและรายละเอยด เนองจากสเปนขอมลพนฐานแรกสดทเขาสสมองดงนน มนจงเหมาะในการน ามาใชกบสงตาง ๆ สนบสนนการจดล าดบของขอมลน าสายตาผานระบบหรอขอมลทซบซอน และเปนเครองน าทางไปสพนทวางใหม


ระบบ คอ สงทรวมเอาขอมลทซบซอนมาไวรวมกน เชน แผนท , ปายบอกทาง , สวนตาง ๆ โครงสราง , เวบไซต ซงสจะเขามาชวยจดขอมลเหลานใหเขาทเขาทาง นกออกแบบเรขศลปในสภาพแวดลอมตาง ๆ (Environmental Graphic Designer) ลวนตองออกแบบระบบชน าทาง , เครองหมาย , ออกแบบนทรรศการและการท าแผนทขอมล โดยใชสเปนหนงในเครองมอส าคญทงสน

ตวอยางสกบการใหขอมลปาย

จดเรยงขอมล

การเรยบเรยงขอมลอยางสวยงาม ประกอบกบการออกแบบอยางพถพถนชวยดงดดความสนใจจากผชมไดตวอยางขางตนเปนผลงานอกสไตลหนงทไมเหมอนใคร โดยการใ ชแผนผง ตนไ ม ในนการท า อนโฟกราฟก (infographic) แสดงทศทางกา รสญพน ธ ข อ ง ส ง ม ช ว ต ต า ง ๆ แผนผงดงกลาวใชระบบ คอ คอลมนและใชโคดสชวยในการน าทางขอมล

เมน

การออกแบบอยางมร ะ บบ ท ด ช ว ย เ พ มโอกาสใหนกออกแบบไดแฝงการขน าและส ร า ง ค ว า ม จ ด จ าใหกบอตลกษณของแบรด เชน การใชสในการแบงประภทของอาหารในรานชวยใหลกคาสามารถเลอกเมนทตองการไดเรวขน

คนหาเสนทาง

การบอกเสนทางนนตองการแผนทประกอบ แผนทรถไฟใตดนลอนดอน พฒนาโดยวศวกรแฮรรเบลอ ในป คศ. 1931 เปนแผนทแรกทมการใชภาพกราฟกประกอบ และเปนตนแบบใหกบแผนทบอกทางอน ๆ ทวโลก การใชสเปนตวแทนของแตละสายในสถานนชบยา (Shibuya) ประเทศญปนกบแผนทรถไฟทดเหมอนแผงวงจนอะไรสกอยาง ไดท าหนาทใหขอมลกบผเดนทางกวา 2.4 ลานคคนทกวน และระบบการใชสไดขยายมาสระบบไฟฟาใตดนของโตเกยว (Tokyo) ตอไป

ตวอยางคนหาเสนทางดวยส

ภาษาอนเปนสากล

ส เ ป น ห น ง ใ นภาษาสากล ทสามารถใชในการสอสาร เชน ในสนามบน หรอโรงพยาบาล มการใชรปสญลกษณ หรอ Pictogram รวมกบการใชโคดส ชวยท าไดขอมลตาง ๆ เขาใจไดง ายยงขน

ค าศพททเกยวของ• Data : ขอเทจจรงหรอสวนหนงของขอมลใด ๆ • Diagram : ภาพวาดหรอแผนงานทใชในการอธบายสงใด ๆ หรออธบายการท างานของสงตาง ๆ • Quantitative : ขอมลดานจ านวนของสงของ รวมถงการวดตาง ๆ (ขอมลเชงตวเลข)• Schematic : ภาดวาดหรอแผนงานททอนรายละเอยดใหเรยบงายขนใชเปนตวแทนของระบบหรอ

โครงสรางจรง• Statistical : สถต เกยวของการจดเกบ , แบงกลม และจดเรยงขอมล (โดยปกตเปนขอมลเชงตวเลข)

การออกแบบเวบสและการค านวณรหสส (HTML)

โหมดสในโปรแกรม Photoshop

โหมด Bitmap โหมด Grayscale

โหมด Duotone โหมด Indexed Color

โหมด RGB โหมดCMYK Color

โหมด Lab Color โหมด Multichannel

โหมดสในโปรแกรม Photoshop

ก าหนดสใหเวบไซตโดยสอดคลองกบเปาหมายของเวบไซต

• ตองการใหขอมลแกใคร

• ใหดขอมล/คนหาสนคา/ใหขาว/ใหบรการ เชน ตรวจสอบขอมลตางๆ

• ใหขอมลอะไรบาง

• อาจส ารวจจาก call center, Sales, หรอเบอรกลางของบรษท ถงค าถามทถามบอย

เนอหา Web Design Process ในบทถดไป

ก าหนดสทใช

• โทนสเดยว

• โทนสผสม 2 ส

• โทนสผสม 3 ส

• Color scheme, theme

• ดสของสงพมพ, logo หวจดหมาย หรอสอโฆษณา ประชาสมพนธอนๆทมอยของบรษท

โทนสเดยว: สฟา

เปนสของทองฟา น า ท าใหรสกสบายใจ นมนวล อบอน มสฟาหลายโทน ใหความรสกตางๆกน

สน าเงน

ใ ห ค ว า ม ร ส ก ข ง ข ง จ ร ง จ งน า เ ช อถ อ เ ป นกา ร เ ป น ง าน ปลอดภย หรหรา มระดบ มราคา

สน าเงนระดบตางๆ ใหความรสกแตกตางกน

สเขยว

ใหความรสกเปนอสระ สดชน เยนสบาย สเขยวระดบตางๆ ใหความรสกแตกตางกน

สแดง

ใหความรสกรอนแรง มพลง

สแดงระดบตางๆ ใหความรสกแตกตางกน

สสม-เหลอง

ใหอารมณสดใส ต นตว ดงดด เปนสของอาหาร อาจกระตนใหรสกหว

ส เ ห ล อ ง ส ม ร ะด บ ต า งๆ ใ หความรสกแตกตางกน

โทนสเดยว: สเทา-ขาว

สเทาใหความรสก สขม สงบ มนคง อาจท าใหรสกหมนหมอง หรอเศรา

สขาว ใหความรสกสะอาด บรสทธ

สขาว-เทาหลายโทน ใหความรสกตางๆกน

โทนสแบบตำงๆ

• โทนสแบบสชดเดยวกน

• โทนสแบบสตดกน

• http://colorschemedesigner.com/

http://colorschemedesigner.com/

COLOR CHART

COLOR CHART: HUE

COLOR WHEEL

การเลอกใชส

สรอน


สเยน


ชดสแบบเดยว


สคลายคลงกน


สตรงขามกน


สตรงขามกน 2 ชด


สตรงขามกน ขางเคยง

สตวอกษร และสพนหลง

สตวอกษร สตวอกษร สตวอกษร สตวอกษร


สตวอกษร


HEXADECIMAL NUMBER SYSTEM

PIXELS

A monitors screen is divided into a grid of small unit called picture elements or pixels. The more pixels per inch the better the resolution, the sharper the image.

All colors on the screen are a combination of red, green and blue (RGB), just at various intensities.

DREAMWEAVER

Dreamweaver

With web applications like HTML (Hypertext Markup Language), colors are sometime described using their RGB color specification in hexadecimal.

<tr>

<td rowspan="2" bgcolor="#cccc99"> </td>

<td height="30" bgcolor="#999966"><div id="mainnav">

Hexadecimal Number

HEXADECIMAL RED GREEN BLUE


Red Green Blue

cc cc 99

<td height="30" bgcolor="#999966"><div id="mainnav">

Red Green Blue

99 99 66

# means hexadecimal in web applications

RICK’S NUMBER SYSTEM RULES

All digits start with 0

A Base-n number system has n number of digits:

• Decimal: Base-10 has 10 digits

• Binary: Base-2 has 2 digits

• Hexadecimal : Base-16 has 16 digits

The first column is always the number of 1’s

Each of the following columns is n times the previous column (n = Base-n)

• Base 10: 10,000 1,000 100 10 1

• Base 2: 16 8 4 2 1

• Base 16: 65,536 4,096 256 16 1

HEXADECIMAL DIGITSHexadecimal: 16 digits

Dec Hex

0

1

2

3

4

5

6

7

Dec Hex

8

9

10

11

12

13

14

15

HEXADECIMAL DIGITSHexadecimal: 16 digits

Dec Hex

0 0

1 1

2 2

3 3

4 4

5 5

6 6

7 7

Dec Hex

8 8

9 9

10 A

11 B

12 C

13 D

14 E

15 F

HEXADECIMAL DIGITS 4 BITS CAN BE REPRESENTED BY 1 HEX VALUE

Hexadecimal: 16 digits

Dec Hex Binary

8421

0 0

1 1

2 2

3 3

4 4

5 5

6 6

7 7

Dec Hex Binary

8421

8 8

9 9

10 A

11 B

12 C

13 D

14 E

15 F

HEXADECIMAL DIGITS

4 BITS CAN BE REPRESENTED BY 1 HEX VALUEHexadecimal: 16 digits

Dec Hex Binary

8421

0 0 0000

1 1 0001

2 2 0010

3 3 0011

4 4 0100

5 5 0101

6 6 0110

7 7 0111

Dec Hex Binary

8421

8 8 1000

9 9 1001

10 A 1010

11 B 1011

12 C 1100

13 D 1101

14 E 1110

15 F 1111

HOW MUCH RED GREEN BLUE ?


Red Green Blue

cc cc 99

<td height="30"bgcolor="#999966"><divid…>

Red Green Blue

99 99 66

HEXADECIMAL # RED GREEN BLUE


Red Green Blue

cc cc 99

Convert to Binary

Red Green Blue

Hex cc cc 99

Bin 1100 1100 1100 1100 1001 1001

24 bits represent a single color

Red Green Blue

Hex cc cc 99

Bin 1100 1100 1100 1100 1001 1001

24 bits represent a single color

Red Green Blue

Hex 00->FF 00->FF 00->FF

Bin 0000 0000 0000 0000 0000 0000

thru thru thru

1111 1111 1111 1111 1111 1111

Dec 0 -> 255 0 -> 255 0 -> 255

0

255

0

255

0

255

? ? ?

0

255

?

HOW MUCH? 0 TO 255

0

255

?

0

255

?

Red Green Blue

Hex cc cc 99

Bin 1100 1100 1100 1100 1001 1001

Hexadecimal

Decimal 16’s 1’s

c c

or

12 12

(12x16) (12x1)

204 = 192 + 12

Red Green Blue

Hex cc cc 99

Bin 1100 1100 1100 1100 1001 1001

Hexadecimal

Decimal 16’s 1’s

9 9

or

9 9

(9x16) (9x1)

153 = 144 + 9

Red Green Blue

Hex cc cc 99

Bin 1100 1100 1100 1100 1001 1001

Dec 204 204 153

0

255

204

0

255

255

204

153

REFERENCE

David Dabner | Sandra Stewart | Eric Zempol

Graphic Design Schoolผแปล จตพงศ ภสมาศ, สวสา แซอง

ปยะบตร สทธดารา | บรรณาธการ

http://www.w3schools.com/html/html_colors.asp

http://html-color-codes.info/

http://www.w3schools.com/html/html_colors.asp

http://html-color-codes.info/

พื้นฐานการเลือกสีและรหัสสี

Education