4 วิธีในการกำหนดสีใน CSS

ประเด็นที่สำคัญ

การใช้ชื่อสีที่กำหนดไว้ล่วงหน้าเป็นวิธีที่สะดวกที่นำเสนอโดย Cascading Style Sheets (CSS) สำหรับผู้ใช้มือใหม่โดยมีเฉดสีให้เลือกถึง 145 เฉดสี อย่างไรก็ตาม วิธีการนี้นำเสนอข้อจำกัดบางประการที่อาจไม่เป็นไปตามข้อกำหนดที่ซับซ้อนของโครงการออกแบบขั้นสูง

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

RGB และ RGBA เป็นสองวิธีที่แตกต่างกันในการแสดงสีในสื่อดิจิทัล แม้ว่า RGB จะให้การควบคุมความแม่นยำของสีเชิงตัวเลข แต่ RGBA ยังมีช่องอัลฟาที่ช่วยให้สามารถปรับความโปร่งใสได้ สิ่งสำคัญคือต้องแน่ใจว่าสามารถเข้าถึงโทนสีที่ใช้ในผลิตภัณฑ์ดิจิทัลได้ และปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดเพื่อรองรับผู้ใช้ที่มีความบกพร่องทางการมองเห็นหรือมีความชื่นชอบ

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

แม้ว่าผลกระทบของคำจำกัดความของสีบนเว็บไซต์อาจไม่ชัดเจนในทันที แต่ตัวเลือกที่ทำเกี่ยวกับการใช้งานสามารถมีอิทธิพลอย่างมากต่อรูปลักษณ์โดยรวมและความสวยงามของเว็บไซต์ ความเข้าใจอย่างครอบคลุมเกี่ยวกับวิธีการต่างๆ และเทคนิคการปฏิบัติในการประยุกต์และผสมผสานแนวทางเหล่านี้ถือเป็นสิ่งสำคัญในการสร้างการออกแบบเว็บที่สะดุดตา

การใช้ชื่อสี

CSS นำเสนอวิธีการที่มีประสิทธิภาพในการกำหนดเฉดสีโดยใช้ระบบการตั้งชื่อ โดยมีตัวเลือกสีให้เลือกถึง 145 สี สเปกตรัมนี้ครอบคลุมการกำหนดพื้นฐาน เช่น “สีแดง” “สีเขียว” และ “สีน้ำเงิน” ไปจนถึงความแตกต่างที่ละเอียดยิ่งขึ้น รวมถึง “ปะการัง” หรือ “ลาเวนเดอร์”

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

การใช้ชื่อสีจะเป็นประโยชน์ในสถานการณ์ที่จำเป็นต้องใช้เฉดสีชั่วคราว เช่น ในระหว่างขั้นตอนเริ่มต้นของการพัฒนาต้นแบบ หรือเมื่อพยายามรักษาโค้ดให้อ่านง่าย ไวยากรณ์ที่เกี่ยวข้องมีดังนี้:

 color_property: color_name;

ในกรณีนี้ เพียงแทนที่ placeholdercolor\_name ด้วยเฉดสีเฉพาะที่ต้องการใช้ ตามภาพประกอบ เราควรกำหนดสีเนื้อหาข้อความของข้อความที่ถูกฉีกออก จากนั้นสำนวนจะเป็นดังนี้:

 p {
  color: red;
} 

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

ข้อดีของการใช้ตัวย่อ Emmet ได้แก่ ความง่ายในการทำความเข้าใจภายในโค้ด CSS เนื่องจากเหมาะสำหรับทั้งผู้เริ่มต้นและผู้ใช้ขั้นสูง นอกจากนี้ คำย่อเหล่านี้ยังทำงานได้อย่างราบรื่นบนเว็บเบราว์เซอร์ต่างๆ และทำหน้าที่เป็นเครื่องมือที่ใช้งานได้จริงในการสร้างแนวคิดการออกแบบอย่างรวดเร็ว

ข้อเสียของการใช้เครื่องมือเลือกสีบนเว็บ ได้แก่ การขาดตัวเลือกสีที่ครอบคลุมซึ่งอาจขัดขวางการแสดงออกทางศิลปะ เช่นเดียวกับข้อบกพร่องที่อาจเกิดขึ้นในการยึดมั่นในมาตรฐานการเข้าถึงและความเข้ากันได้ที่ไม่สอดคล้องกับเทคโนโลยีที่ล้าสมัย

รหัสสีเลขฐานสิบหก

รหัสสีเลขฐานสิบหกซึ่งมักเรียกกันว่า"รหัสฐานสิบหก"เป็นวิธีที่ใช้กันอย่างแพร่หลายในการกำหนดเฉดสีภายในขอบเขตของการออกแบบเว็บ สร้างจากการจัดประเภทอักขระหกตัวซึ่งประกอบด้วยตัวเลขและตัวอักษรซึ่งครอบคลุมช่วง 0-9, A-F รหัสเหล่านี้แสดงถึงองค์ประกอบตามสัดส่วนขององค์ประกอบสีแดง เขียว และน้ำเงิน (RGB) ที่มีส่วนทำให้รูปลักษณ์โดยรวมของสีที่กำหนด

การใช้รหัสสีเหล่านี้อาจนำเสนอความซับซ้อนบางประการที่จำเป็นต้องทำความเข้าใจหลักการพื้นฐานอย่างถี่ถ้วน สำหรับผู้ที่สนใจเจาะลึกยิ่งขึ้น การสำรวจค่าเลขฐานสิบหกจะให้ข้อมูลเชิงลึกที่มีคุณค่า เพื่อเป็นตัวอย่าง ให้พิจารณาการใช้รหัสฐานสิบหกภายใน CSS ต่อไปนี้:

 color: #RRGGBB;

ในสคีมานี้ ส่วนประกอบที่เกี่ยวข้องสำหรับสีแดง เขียว และน้ำเงินจะแสดงด้วย RR, GG และ BB ส่วนประกอบเหล่านี้มีช่วงที่เป็นไปได้ขยายจาก 00 ซึ่งหมายถึงไม่มีความเข้มข้น ไปจนถึง FF ซึ่งหมายถึงความเข้มสูงสุด ตามภาพประกอบ เพื่อกำหนดเฉดสีของส่วนหัวของเว็บไซต์ด้วยเฉดสีฟ้าที่เฉพาะเจาะจง เราสามารถใช้รหัสฐานสิบหกเช่นนี้:

 header {
  background-color: #336699;
}

จะได้สีน้ำเงินเข้ม:

€‹€‹€‹€‹€‹

หนึ่งอาจใช้คำย่อที่ประกอบด้วยอักขระซ้ำสองตัวสำหรับแต่ละองค์ประกอบ ดังแสดงในกรณีต่อไปนี้:

 header {
  background-color: #369;
} 

รหัสสีเลขฐานสิบหกให้เฉดสีที่หลากหลาย ช่วยให้สร้างเฉดสีที่ซับซ้อนและปรับแต่งได้อย่างง่ายดาย รหัสเหล่านี้ให้การปรับเปลี่ยนการตั้งค่าสีได้อย่างราบรื่น ทำให้มีความเหมาะสมอย่างยิ่งสำหรับข้อกำหนดการออกแบบที่มีความต้องการสูง

แม้ว่ารหัสฐานสิบหกจะมีพลัง แต่ความไม่คุ้นเคยเมื่อเปรียบเทียบกับเฉดสีที่มีชื่ออาจเป็นอุปสรรค์ นอกจากนี้ การรักษาความทรงจำเกี่ยวกับค่าสีที่แม่นยำอาจเป็นเรื่องยุ่งยาก อย่างไรก็ตาม สามารถเข้าถึงทรัพยากรที่อำนวยความสะดวกในการค้นหาเฉดสีฐานสิบหกได้ ซึ่งจะช่วยบรรเทาปัญหาเหล่านี้ได้ในระดับหนึ่ง

ค่าสี RGB และ RGBA

ระบบนี้ช่วยให้สามารถกำหนดเฉดสีผ่านองค์ประกอบสีแดง เขียว และน้ำเงิน ในทางตรงกันข้าม ระบบนี้ใช้ค่าตัวเลขที่เข้าถึงได้ง่ายกว่าเมื่อเทียบกับรหัสฐานสิบหก

ค่าสี RGB

การใช้ค่าสี RGB เป็นเทคนิคที่แพร่หลายภายในกรอบงาน Cascading Style Sheets (CSS) เพื่อระบุเฉดสี ตัวย่อ “RGB” หมายถึงสีหลักสีแดง เขียว และน้ำเงิน ซึ่งจัดเรียงอยู่ในวงเล็บถัดจากตัวย่อ ภายในขอบเขตวงเล็บเหล่านี้ เราสามารถระบุค่าตัวเลขที่สอดคล้องกับความเข้มสัมพัทธ์ของแต่ละช่องสีตามลำดับ ซึ่งครอบคลุมช่วงทั้งหมดตั้งแต่ 0 ถึง

นี่คือไวยากรณ์:

 rgb(red_value, green_value, blue_value);

ในการกำหนดค่าตัวเลขเฉพาะให้กับองค์ประกอบสีที่แสดงโดย “red\_value”, “green\_value” และ “blue\_value” ในบริบทที่กำหนด เราอาจหมายถึงโมเดลสีที่กำหนดไว้ เช่น RGB หรือ HSL โดยที่แต่ละค่าแสดงถึงลักษณะที่แตกต่างกันของสเปกตรัมสี (เช่น ความเข้ม เฉดสี หรือความอิ่มตัว) ด้วยการแทนที่ค่าเหล่านี้ภายในพารามิเตอร์ที่เหมาะสม จะสามารถสร้างเฉดสีและโทนสีต่างๆ ได้ รวมถึงตัวเลือกไม่มีสี (สีขาว) สี (สีดำ) และสีเดียว (สีเดียว) คล้ายกับการแสดงภาพที่แสดงในที่นี้

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

 .white-box {
 color: rgb(255, 255, 255);
}

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

 .black-box {
  color: rgb(0, 0, 0);
}

การปรับองค์ประกอบสีแดงในรูปภาพให้เป็นค่าสูงสุดที่เป็นไปได้ที่ 255 และคงค่าศูนย์ไว้สำหรับส่วนประกอบอื่นๆ ทั้งหมด ส่งผลให้ได้เฉดสีแดงที่สดใส:

 .red-box {
  color: rgb(255, 0, 0);
 }

ค่าสี RGBA

RGBA และ RGB มีฟังก์ชันที่คล้ายคลึงกัน โดยความแตกต่างหลักคือการรวมช่องอัลฟ่าเพิ่มเติมใน RGBA “A” ใน RGBA นี้แสดงถึงค่าอัลฟ่า ซึ่งควบคุมระดับความโปร่งแสงหรือความทึบแสงที่เกี่ยวข้องกับเฉดสีที่เลือก ค่าอัลฟาเป็นศูนย์แสดงถึงความโปร่งใสทั้งหมด ซึ่งทำให้สีถูกซ่อนไว้อย่างสมบูรณ์ ในขณะที่ค่าอัลฟ่าเป็นศูนย์แสดงถึงความทึบแสงสัมบูรณ์ ส่งผลให้มองเห็นสีได้ทั้งหมด

RGBA มอบวิธีการที่หลากหลายสำหรับการสร้างองค์ประกอบภาพที่มีความโปร่งใสในระดับต่างๆ รวมถึงฉากหลังโปร่งแสงและตัวพิมพ์ที่นุ่มนวล นิพจน์ที่สมบูรณ์ประกอบด้วยสี่องค์ประกอบ:

 color: rgba(red_value, green_value, blue_value, alpha_value);

ในบริบทนี้ ตัวแปรที่แสดงด้วยค่า red\_value, green\_value และ blue\_value เกี่ยวข้องกับช่องสีที่เกี่ยวข้องภายในปริภูมิสี RGB ในขณะที่ alpha\_value แสดงถึงระดับความโปร่งแสงที่เกี่ยวข้องกับสีนั้น ๆ.

 div {
  background-color: rgba(0, 128, 0, 0.5);
}

ภาพประกอบข้างต้นแสดงให้เห็นว่าค่าสัมประสิทธิ์อัลฟา 0.5 ทำให้สีเขียวมีระดับความโปร่งแสง 50% ดังนั้นจึงทำให้สามารถรับรู้สสารที่ซ่อนอยู่ได้

RGB และ RGBA มอบความแม่นยำระดับสูงในการเลือกสี ซึ่งอำนวยความสะดวกในการสร้างสรรค์การออกแบบภาพที่น่าดึงดูด นอกจากนี้ ความเข้ากันได้ของเว็บเบราว์เซอร์หลายตัวยังรับประกันว่าเฉดสีที่ต้องการยังคงสม่ำเสมอทั่วทั้งแพลตฟอร์มที่แตกต่างกัน

การนำทางความซับซ้อนของการสร้างการออกแบบที่ครอบคลุมและดึงดูดสายตาในขณะที่ปฏิบัติตามมาตรฐานการเข้าถึงอาจเป็นงานที่น่ากังวล ความท้าทายอย่างหนึ่งเกิดขึ้นจากความจำเป็นในการรักษาระดับคอนทราสต์ที่เหมาะสมระหว่างองค์ประกอบพื้นหน้าและพื้นหลัง โดยเฉพาะอย่างยิ่งเมื่อใช้ความโปร่งใสผ่านค่า RGBA โชคดีที่แนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) มอบกรอบการทำงานที่มีคุณค่าเพื่อเป็นแนวทางแก่นักพัฒนาและนักออกแบบไปสู่แนวปฏิบัติที่ครอบคลุมมากขึ้น โดยเสนอคำแนะนำเกี่ยวกับวิธีการสร้างเนื้อหาภาพที่มีประสิทธิภาพและสามารถเข้าถึงได้

ค่าสี HSL และ HSLA

HSL เป็นฟังก์ชัน CSS ที่ใช้ในการกำหนดสีโดยใช้ค่าตัวเลขเพื่อแสดงเฉดสี ความอิ่มตัวของสี และความสว่าง เช่นเดียวกับ RGB HSL ใช้การแสดงตัวเลขที่โดดเด่นของคุณสมบัติสีเหล่านี้ ซึ่งอาจจดจำได้ผ่านทางอินเทอร์เฟซผู้ใช้ในแอปพลิเคชันการออกแบบหรือบริบทอื่นๆ

ฮิว หมายถึงสีสเปกตรัมบริสุทธิ์ที่เกิดจากการรวมกันของแสงที่ความยาวคลื่นหรือความถี่เฉพาะ โดยทั่วไปจะวัดเป็นองศาตามสเปกตรัมวงกลม โดย 0 และ 360 องศาตรงกับสีแดง 120 องศาเป็นสีเขียว และ 240 องศาเป็นสีน้ำเงิน มักถูกมองว่าเป็นจุดบนวงกลม โดยแต่ละระดับจะสัมพันธ์กับเฉดสีที่แตกต่างกันในวงล้อสี

ระดับความอิ่มตัวจะส่งผลต่อความสมบูรณ์และความลึกของสี ตั้งแต่ระดับสีเทาที่น่าเบื่อที่ศูนย์เปอร์เซ็นต์ ไปจนถึงเฉดสีที่สดใสและเข้มข้นที่หนึ่งร้อยเปอร์เซ็นต์

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

นอกจาก HSL ซึ่งแสดงถึงค่าเฉดสี ความอิ่มตัว และความสว่างแล้ว ยังมีปริภูมิสีอื่นที่เรียกว่า HSLA (การแสดงเฉดสี ความอิ่มตัวของสี ความสว่าง และอัลฟ่าในเลขฐานสิบหก) “A” ในกรณีนี้สอดคล้องกับ “alpha” ซึ่งคล้ายคลึงกับ “A” ที่พบในการแสดง RGBA ที่ระบุระดับความโปร่งใส

นี่คือไวยากรณ์:

 color: hsl(hue_value, saturation_percentage, lightness_percentage);

ในลักษณะที่ละเอียดยิ่งขึ้น เพื่อระบุค่าเฉพาะสำหรับแต่ละองค์ประกอบภายในโครงสร้างที่กำหนด ให้แทนที่ตัวแปร hue\_value , saturation\_percentage และ lightness\_percentage ด้วยค่าที่ต้องการ เพื่อเป็นตัวอย่าง ให้พิจารณาข้อมูลโค้ดต่อไปนี้:

 div {
  background-color: hsl(120, 100%, 50%);
}

ตัวอย่างปัจจุบันสาธิตการใช้ค่า HSL เพื่อสร้างเฉดสีที่มีชีวิตชีวาของส่วนประกอบ โดย 120 แสดงถึงเฉดสีเป็นองศา (สัมพันธ์กับสีเขียว) 100% สอดคล้องกับความอิ่มตัวสูงสุด และ 50% ตั้งค่าความสว่างให้มีสถานะสว่างเท่ากัน

HSL และ HSLA ให้การคำนวณสีที่ยืดหยุ่นผ่านคุณสมบัติที่กำหนดเองของ CSS ซึ่งทำให้เหมาะสำหรับการใช้งานที่หลากหลายในการพัฒนาเว็บสมัยใหม่ นอกจากนี้ ความเข้ากันได้กับเบราว์เซอร์ร่วมสมัยช่วยให้มั่นใจได้ถึงการผสานรวมที่ราบรื่น ขณะเดียวกันก็ช่วยให้ปรับเปลี่ยนความสว่างของสีได้อย่างง่ายดาย

ข้อเสียของการใช้ HSL คือต้องใช้ความเข้าใจในทฤษฎีสี รวมถึงแนวคิดต่างๆ เช่น เฉดสีและความอิ่มตัว ซึ่งอาจพิสูจน์ได้ว่ามีความซับซ้อนมากกว่าเมื่อเปรียบเทียบกับระบบ RGB ที่รู้จักกันทั่วไป

รวบรวมพลังของสี CSS

ในขณะที่เจาะลึกเทคนิคต่างๆ ในการระบุเฉดสีใน CSS สิ่งสำคัญคือต้องจำไว้ว่าคนๆ หนึ่งมีความสามารถในการสร้างอิทธิพลที่สำคัญต่อรูปลักษณ์ที่น่าดึงดูด บรรยากาศ และการโต้ตอบของผู้ใช้โดยรวมของพื้นที่เว็บของตน

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