() translation by (you can also view the original English article)
ยินดีต้อนรับสู่บทเรียนที่สิบของซีรีย์ การทำเว็บไซต์สำหรับเด็กของเรา บทเรียนนี้เป็นเรื่องเกี่ยวกับสีทั้งหมด
ในบทเรียนนี้เราจะได้เรียนเกี่ยวกับทฤษฏีสี วิธีการต่างๆมากมายในการใช้สีภายในไฟล์ CSS ของเรา ความหมายบางอย่างของสี และ ทดลองเลือกใช้สีที่ดีที่สุดสำหรับเว็บไซต์ของเรา เราจะเรียนจบด้วยเทคนิคนิดหน่อยในการเลือกใช้สีบนเว็บ
อย่าลืมที่จะถามคำถามหรือข้อสงสัยใดๆ ในกล่องคอมเม้นต์ด้านล่างเช่นเดิม
ทฤษฎีสี (Color Theory)
ทฤษฎีสี (Color Theory) นั้นเกี่ยวกับหลายสิ่งหลายอย่าง แต่เฉพาะเจาะจงก็คือการมองว่าสีนั้นสร้างปฏิสัมพันธ์กันอย่างไรในการออกแบบ เราเรียกกลุ่มของสีที่เราเลือกมาว่าอยู่ในกลุ่มของชุดสีหรือถาดสี (Color Palette) ชุดสีที่ออกแบบมาอย่างดีจะมีสีคู่ตรงข้าม (Complement) กับสีอื่น นอกจากนี้ยังให้การตัดกัน (Contrast) หรือดูกลมกลืน (Vibrancy) ดี เราจะได้คุยเกี่ยวกับความหมายของคำเหล่านี้ในถัดไปนี้
การเลือกสีที่ถูกต้องและรู้ว่าทำไมบางสีบางอันถึงเข้าและไม่เข้ากับการออกแบบของเรา สีที่แย่สามารถทำให้เว็บไซต์เรายากต่อการใช้งาน หรือทำให้ตัวอักษรไม่สามารถถูกอ่านได้ และผู้ใช้งานก็จะออกจากเว็บไซต์ของเราไป
ศัพท์เฉพาะบางอย่างที่ต้องรู้
ในบทเรียนเราก่อนที่เราจะไปไกลกว่านี้ ลองมาคุยกันเกี่ยวกับศัพท์หรือนิยามต่างๆที่เกี่ยวกับทฤษฏีสีที่ๆ เราจะต้องกล่าวถึงต่ออย่างมาก เราจะใช้นิยามเหล่านี้ช่วยให้เราเข้าใจแต่ละสีมากยิ่งขึ้น
สีสัน (Hues)
สีสัน (Hue) นั้นคือบอกว่าวัตถุนั้นสีอะไร เมื่อเรากล่าวเกี่ยวกับสิ่งที่เรียกว่า "สีแดง" หรือ "สีเหลือง" เรากำลังคุยเกี่ยวกับสีสัน (Hue)
ความอิ่มของสี (Saturation)
ความอิ่มของสี (Saturation) นั้นบอกถึงความสว่างใส หรือ ความเข้มของสีที่ใส่ลงไป ถ้าค่า Saturation นั้นต่ำ สีที่ได้จะเหมือนกับถูกล้างออกไป ขณะที่ Saturation สูงก็จะได้สีที่สว่างและเข้ม
ค่าความสว่าง (Brighness หรือ Lightness)
Brightness นั้นเกี่ยวกับความสว่างหรือมืดของสี มันจะวิ่งจากสีดำ (ไม่มีแสงสว่างเลย) ไปยังสีขาว (เต็มไปด้วยแสงสว่าง)
วงล้อสี (The Color Wheel)
วงล้อสีของเรานั้นอยู่บนพื้นฐานของสีแดง สีเหลือง และสีฟ้าและมันมักจะดูสวยเมื่อมองจากมุมมองของศิลปิน ในฐานะของนักออกแบบ การเข้าใจว่าสีนั้นช่วยเราได้อย่างไร ช่วยให้เรามีไอเดียที่ดีว่าในการเลือกว่าสีไหนตัดกับสีไหน และ ทำไม
ล้อทางด้านซ้ายของรถด้านล่าง แสดงให้เห็นถึงสีหลักทั้งสามสี เรียกว่า สีปฐมภูมิ (Primary Color) ด้วยสามสีเหล่านี้ เราสามารถสร้างสีอื่นๆ ได้ทั้งหมด
ล้อทางด้านขวาบนรถด้านบนแสดงถึงสีทุติยภูมิ (Secondary Color) สีที่สร้างจากมาจากสีปฐมภูมิ ยกตัวอย่าง สีฟ้าและสีเหลืองสร้างสีเขียว ขณะที่สีฟ้าและสีแดงสร้างสีม่วง
วงล้อสีด้านซ้ายบนรถด้านล่างแสดงสีอีกขั้นหนึ่งเรียก สีขั้นตติยภูมิ (Tetiary color) สีเหล่านี้สร้างจากการผสมสีขั้นปฐมภูมิ (Primary) และทุติยภูมิ (Secondary) เข้าด้วยกัน ยกตัวอย่าง การผสมสีฟ้าและสีม่วงจะสร้างสีม่วงเข้มค่อนฟ้า
ระบบสีสำหรับเว็บ
มีระบบสีหรือวิธีการอธิบายสีไม่กี่ระบบที่เหมาะสมสำหรับใช้บนเว็บ
ระบบสีแบบ RGB
RGB ย่อมาจาก "Red Green Blue" และมันช่วยเราอธิบายการมองเห็นสีบนหน้าจออิเล็กทรอนิกส์ต่างๆ สีทั้งสามเหล่านี้สามารถรวมเข้าด้วยกันเพื่อสร้างสีอื่นๆ ขึ้นมา สีทั้งสามนี้แสดงตามลำดับและมีช่วงตั้งแต่ 0 ถึง 255
1 |
body { |
2 |
background: rgb(138,138,226); |
3 |
}
|
โค้ด CSS ด้านบนสร้างสีพื้นสีฟ้ากลมกล่อมบนหน้าเพจ ภายในวงเล็บคุณสามารถเห็นค่าที่ต่างกันของสีแดง เขียว และ ฟ้า
เราเพียงแค่ใช้สี รหัสเลขฐานสิบหก (Hexadecimal) ไปในบทที่ผ่านมานี้ แต่เราก็สามารถใช้สีของเราใน CSS ด้วยวิธีการต่างๆ มากมาย
เยี่ยมชมเว็บไซต์นี้ สำหรับดูรายการสั้นๆ สำหรับรหัส Hex และ RGB ใน 500 สี
ระบบสีแบบ HSL
HSL นั้นย่อมากจาก "Hue Saturation Lightness" และค่านั้นสร้างจากตัวเลขทั้งสามนั้นตามลำดับ
เราสามารถประกาศชนิดของสีเหลืองและส้มบน body ของหน้าเพจโดยใช้ค่า HSL แทนที่จะเป็น Hex หรือค่า RGB
1 |
body { |
2 |
background: hsl(43,100%,57%); |
3 |
}
|
ค่าแรกที่นี่ 43 แสดงถึงมุมของวงล้อสี นี่คือสิ่งที่ให้ค่า hue ให้เรา สีแดงคือ 0 หรือ 360 องศา ขณะที่สีเขียวคือ 120 องศา และสีน้ำเงินคือ 240 องศา
ค่าที่สองนั้นจะให้เราใส่จำนวนเปอร์เซ็นต์ของ Saturation สำหรับสี ด้วยค่า 100% ที่นี่เราจะได้สีที่อิ่มตัวสูงที่สุด
ค่าสุดท้าย Lightness จะบอกถึงความมืดหรือสว่างของ Hue ที่เรามี 100% นั้นขาว 0% นั้นดำ และ ระหว่างนั้นก็เป็นการรวมกันของค่าทั้งสอง
ด้วยค่าที่เราใช้ใน CSS นั้นขึ้นอยู่กับเรา แต่ HSL นั้นจะเป็นวิธีที่ดีที่ทำให้เราสามารถเดาสีได้ โดยเลือกมุมระหว่างหมุนทวนเข็มนาฬิกาจาก สีแดง (0) และจากนั้นเพิ่มค่าเปอร์เซ็นต์ของความสว่างและแสงที่เราต้องการ
ชื่อสี
ยังมีชื่อสีจำนวนหนึ่งที่เราสามารถใช้มันได้ใน CSS โดยไม่ต้องระบุค่าที่เป็นตัวเลขเข้าไป
1 |
body { |
2 |
background: green; |
3 |
}
|
รายการทั้งหมดของชื่อสี หาดูได้ที่นี่
โน้ตสั้นๆ เกี่ยวกับเครื่องมือการแปลงสี
ถ้าคุณมีค่า Hex อยู่แล้วและอยากแปลงมันเป็นสีแบบ RGB หรือ HSL (หรือแปลงกลับ) มันมีเครื่องมือง่ายๆ อยู่แล้วที่ช่วยงานเราได้ เช่น rgb.to และ Colorrrs
ความหมายของสี
สีนั้นสื่อได้หลากหลายความหมาย ขึ้นกับประเทศไหนที่คุณอยู่ สีจำนวนหนึ่งสามารถใช้เพื่อหมายถึงอันตราย ความรัก ความสุข หรือ ภูติผีปีศาจ สีนั้นสามารถสร้างให้ผู้ใช้นั้นเข้าถึงอารมณ์บางอย่าง ดังนั้นการเข้าใจว่าสิ่งนี้สำคัญอย่างไรในการติดต่อปฏิสัมพันธ์กับผู้ใช้งาน
เพียงแค่มองไปที่แผนภูมิอันนี้ ที่ๆ ซึ่งแสดงความต่างของสี ความหมายของสิ่งต่างๆ ในต่างวัฒนธรรม
ลองคุยกันคร่าวๆ เกี่ยวกับความหมายบางอย่างหลังสามสีหลัก หรือ สีปฐมภูมิเหล่านี้ สีเหลือง สีแดง และ สีน้ำเงิน
สีเหลือง (Yellow)
สีเหลืองนั้นดึงดูดความน่าสนใจกับผู้เข้าชมมากกว่าสีอื่นๆ และ มักจะแสดงถึง ความสุข และ รุ่งอรุณ ในขณะที่อีกแง่ สีเหลืองสามารถหมายถึง "อันตราย" ที่มักแสดงตามป้ายจราจร
การใช้สีเหลืองบนเว็บสามารถเตะตาได้ง่าย ดังนั้นมันดีที่สุดที่จะไม่ใช้มันมากเกินไปและต้องแน่ใจว่าเราได้ไฮไลต์เฉพาะสิ่งที่สำคัญเท่านั้น
สีแดง (Red)
ขึ้นอยู่กับว่าประเทศไหนที่คุณอาศัยอยู่ สีแดงสามารถหมายถึงทุกสิ่งทุกอย่างตั้งแต่อันตราย ความโกรธ พลังงาน ไปจนถึงความรัก และ ความสุข อะไรก็ตามที่มันหมายถึง สีแดงมักจะใช้เพื่อแสดงอารมณ์ที่รุนแรงอยู่เสมอๆ
ในการออกแบบเว็บนั้นบ่อยครั้งที่จะใช้มันสื่อสารถึงการลบหรือเกิดข้อผิดพลาด (error) มันคือสีที่เข้มที่ถึงความสนใจของผู้ใช้งาน ดังนั้นมันจะทำงานได้ดีตามที่มันทำเอง สีแดงที่มากเกินไปบนเว็บไซต์จะทำให้เกิดความรู้สึกกดดันและมักจะยากที่จะบอกว่าอะไรนั้นสำคัญ
สีฟ้าหรือสีน้ำเงิน (Blue)
สีฟ้าหรือสีน้ำเงินจะให้ทั้งความสงบเยือกเย็นและความเศร้าสำหรับส่วนที่มากที่สุดส่วนใหญ่ และมันเป็นสีที่เป็นที่นิยมที่สุดบนเว็บ
ความรู้สึกนั้นสร้างโดยการใช้สีน้ำเงินในการออกแบบนั้นจะขึ้นอยู่กับเฉดสีไหนที่เราได้เลือกไป ขณะที่สีน้ำเงินเข้าจะสื่อสารถึงความแข็งแรง ความมั่นคงและไว้ใจได้ ส่วนสีฟ้าจะทำให้เกิดความสนุกสนานและเป็นมิตร
การเลือกสีในถาดสี
เว็บไซต์ส่วนใหญ่จะมีชุดของสีที่พร้อมใช้งานได้และให้ความรู้สึกถึงมิติและชุดของความรู้สึกจากการออกแบบ การเลือกสีของเรานั้นสำคัญกับการออกแบบอื่นๆ ที่เราเคยมี ดังนั้นเราต้องมีสายตาที่ดีที่จะเลือกว่าสีนั้นทำงานเข้าด้วยกันได้หรือไม่ เราจะรับการตัดกันผ่านหน้าเพจได้ดีหรือ หรือสีนั้นมีความรู้สึกเข้ากันกับเนื้อหาของเราไหม
นี่คืออีกมุมมองของถาดสีหลักที่ใช้ในซีรีย์บทเรียนเมืองในฝันของเรา
สีอ่อนกว่านั้นจะใช้เป็นพื้นหลังขณะที่สีที่เข้มกว่าจะใช้เป็นตัวอักษรหรือไฮไลต์บางส่วนของหน้าจอ
สีคู่ตรงกันข้ามและสีที่ตัดกัน (Complementary & Contrasting Colors)
พูดโดยทั่วไป สีนั้นเกิดขึ้นจากสีอื่นในวงล้อสีและให้ความรู้สึกที่ดีกับสายตา พวกนี้นั้นคือสีคู่ตรงกันข้าม เมื่อนำมารวมกันมันจะทำให้เกิดสีเทา มันเป็นไปได้สำหรับสีที่จะอยู่ถัดจากอีกอันบนวงล้อสีที่ทำงานเข้าด้วยกันได้ แต่มันจะต้องใช้ค่าความสดใสและความสว่างเพื่อปรับคู่ของมันให้เข้ากัน
เรานั้นจะสัมผัสบางส่วนของการตัดกันในบทเรียนที่ผ่านมาเรื่องพื้นฐานการออกแบบ แต่ลองมองดูมันแบบย่อๆ
การตัดกันที่เหมาะสมช่วยลดความเมื่อยล้าของสายตาและสร้างลำดับชั้นของมุมมองให้ดูชัดเจนยิ่งขึ้น ตัวอย่างที่ดีที่สุดของการตัดกันที่ดีและไม่ดีสามารถพบเห็นโดยเปรียบเทียบพื้นหลังที่มีอยู่แล้วและการผสมสีของข้อความ
รูปภาพด้านบนแสดงการตัดกันของสีที่ไม่ดีบนด้านซ้ายและการตัดกันที่ดีทางด้านขวา ตัวอักษรที่มีการตัดกันของสีที่ไม่ดีนั้นยากที่จะอ่านและทำร้ายตาของเรา มันทำให้ดูเบลอ
เครื่องมีสร้างชุดสี (Color Palette Tools)
มีเครื่องมือจำนวนหนึ่งที่ช่วยเราด้วยรายการของชุดสีที่สดใสเพื่อมาให้เราเลือก ซึ่งจะเราให้เราประหยัดเวลาและทำให้เกิดความดึงดูดอย่างมาก
Coolors
Coolors.co คือหนึ่งวิธีที่ง่ายที่สุดที่จะเลือกใช้สีที่มีในขณะนี้
มันมีชุดสีสวยๆให้เรา ที่เราสามารถปรับแต่งเองได้ด้วยการกดปุ่ม spacebar
Adobe Color
Adobe Color คือสีอีกตัวเลือกหนึ่งที่ช่วยให้ใช้สียอดเยี่ยมจากกงล้อสีที่เราได้เคยคุยกันที่ผ่านมา
เราสามารถสร้างการเปลี่ยนแปลงที่วงล้อสี ลองดูที่ชุดสีในถาดสีของเรา จากนั้นลองปรับแต่งสีแต่ละอันดู
Adobe Color นั้นยังให้พวกเราบันทึกสีที่ชื่นชอบและค้นหาสีที่เป็นที่นิยม เช่นชุดที่เคยเลือกๆ กันมาก่อนแล้ว
ทิปทั่วๆไป
เมื่อเลือกสีสำหรับเว็บแล้ว จากนั้นใส่มันไปที่อิลิเมนต์บนเพจ มันสำคัญมากที่จะจำบางส่วนไว้ในใจเพื่อให้แน่ใจว่าสีเหล่านี้นั้นทำให้ประสบการณ์ผู้ใช้งานนั้นดีขึ้น
การตัดกันของสี (Contrast)
การตัดกันของสีนั้นสำคัญมาก เมื่ออยู่ในความสงสัย ไปที่ตัวเลือกที่ปลอดภัยที่สุด แม้ว่ามันจะค่อนข้าง "น่าเบื่อ" ก็ตาม บางส่วนของหน้าที่ที่สำคัญที่สุดที่เรามีในฐานะนักออกแบบคือ ทำให้แน่ใจว่าสิ่งทุกอย่างนั้นใช้งานได้ ง่ายที่จะใช้ และง่ายที่จะอ่าน การตัดกันแย่ๆ ของเราจะกีดกันผู้ใช้ให้ไม่สามารถอ่านเนื้อหาที่ตื่นตาตื่นใจได้
ดังนั้นสีขาวนั้นเหมาะกับกับตัวเลือกสีของคุณ ตัวเลือกสีเหล่านี้ควรจะไม่ทิ้งห่างจากการดำเนินการโดยทั่วไปที่ทำให้เนื้อหานั้นถูกกีดกัน
จำนวนสี
ชุดสีสำหรับเลือก เช่น Coolor มักจะให้เรามา 5 สี จำนวน 5 สีนั้นมักจะให้เราใช้หนึ่งหรือสองสีที่เป็นหลักและสีอื่นๆ รองลงมาสำหรับสิ่งเช่นปุ่มและลิ้งก์
ถ้ามีสีที่มีมากกว่าห้าสีที่แตกต่างกันใส่ไว้ในการออกแบบของเรา จะเป็นความเสี่ยงและยากที่จะติดตาม แม้ว่าสีขาว สีดำ และ สีเทาจะไม่ควรนับไว้ที่นี่
ชุดสีทั่วไป
มักค่อนข้างสำคัญมากที่จะ "ไม่" ออกห่างจากสีที่ยอมรับโดยคนจำนวนมาก ยกตัวอย่าง คนส่วนมากนั้นใช้สีเขียวหมายถึง "เพิ่ม" และสีแดงหมายถึง "ลบ" การใช้สลับกันหมายถึงการออกแบบที่แย่ และมันไม่ดีเลยเพราะว่ามันจะทำให้ผู้ใช้งานนั้นเกิดความรู้สึกสับสน
สรุปรวมทุกสิ่งทุกอย่างเข้าด้วยกัน
ในบทเรียนนี้เราได้คุยกันเกี่ยวกับทฤษฎีสีและกฎของสีต่างๆ วิธีการเลือกสีที่เหมาะสมและใช้มันไว้บนเว็บ ทุกๆสีนั้นประกอบไปด้วยข้อความของตัวเอง เราต้องการให้แน่ใจว่าข้อความเหล่านั้นเหมาะสมกับเนื้อหาของเราผ่านการเลือกชุดสีเหล่านั้นขึ้นมา
ถัดไปเราจะปิดท้ายซีรีย์ของเราด้วยความคิดขั้นสุดท้ายและวิธีการที่หลากหลาย เราสามารถแบ่งปันงานที่ทำอย่างหนักของเรากับเพื่อนและครอบครัวทางออนไลน์ได้เลย
แล้วเจอกันรอบเมืองเหมือนเดิม!
