สี

สีเป็นส่วนสําคัญของเว็บไซต์ทุกแห่ง และ CSS มีตัวเลือกมากมายสําหรับประเภทสี ฟังก์ชัน และการจัดการ

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

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

สีตัวเลข

คุณอาจเคยเห็นสีใน CSS เป็นครั้งแรกผ่านสีที่เป็นตัวเลข เราใช้ค่าสีที่เป็นตัวเลขได้หลายรูปแบบ

สีแบบเลขฐาน 16

h1 {
  color: #b71540;
}

รูปแบบเลขฐานสิบหก (มักเรียกสั้นๆ ว่า Hex) คือไวยากรณ์แบบย่อสำหรับ RGB ซึ่งกำหนดค่าตัวเลขให้กับสีแดง เขียว และน้ำเงิน ซึ่งเป็นสีหลัก 3 สี

ช่วงของเลขฐานสิบหกคือ 0-9 และ A-F เมื่อใช้ตามลำดับ 6 หลัก ระบบจะแปลงเป็นช่วงตัวเลข RGB ซึ่งได้แก่ 0-255 ซึ่งสอดคล้องกับช่องสีแดง เขียว และน้ำเงินตามลำดับ

นอกจากนี้ คุณยังกําหนดค่าอัลฟ่าด้วยสีที่เป็นตัวเลขก็ได้ ค่าอัลฟ่าคือเปอร์เซ็นต์ของความโปร่งใส ในรหัสฐาน 16 คุณจะเพิ่มตัวเลขอีก 2 หลักลงในลำดับ 6 หลัก ซึ่งจะเป็นลำดับ 8 หลัก เช่น หากต้องการตั้งค่าสีดําเป็นรหัสฐาน 16 ให้เขียน #000000 หากต้องการเพิ่มความโปร่งใส 50% ให้เปลี่ยนเป็น #00000080

เนื่องจากรูปแบบเลขฐานสิบหกคือ 0-9 และ A-F ค่าความโปร่งใสจึงอาจไม่ตรงกับที่คุณคาดไว้ ค่าหลักที่พบบ่อยซึ่งเพิ่มลงในรหัสฐาน 16 สีดํา #000000 มีดังนี้

  • อัลฟ่า 0% ซึ่งโปร่งใสทั้งหมดคือ 00: #00000000
  • อัลฟ่า 50% คือ 80: #00000080
  • อัลฟ่า 75% คือ BF: #000000BF

หากต้องการแปลงเลขฐาน 16 2 หลักเป็นฐาน 10 ให้นำตัวเลขแรกไปคูณด้วย 16 (เนื่องจากเลขฐาน 16 เป็นฐาน 16) แล้วบวกตัวเลขที่ 2 โดยใช้ BF เป็นตัวอย่างสำหรับอัลฟ่า 75%

  1. B เท่ากับ 11 เมื่อคูณด้วย 16 เท่ากับ 176
  2. F เท่ากับ 15
  3. 176 + 15 = 191
  4. ค่าอัลฟ่าคือ 191 ซึ่งเป็น 75% ของ 255

RGB (แดง เขียว น้ำเงิน)

h1 {
  color: rgb(183, 21, 64);
}

สี RGB จะกำหนดด้วยฟังก์ชันสี rgb() โดยจะใช้ตัวเลขหรือเปอร์เซ็นต์เป็นพารามิเตอร์ก็ได้ ตัวเลขต้องอยู่ในช่วง 0-255 และเปอร์เซ็นต์ต้องอยู่ระหว่าง 0% ถึง 100% RGB ทำงานบนสเกล 0-255 ดังนั้น 255 จะเท่ากับ 100% และ 0 จะเท่ากับ 0%

หากต้องการตั้งค่าสีดําเป็น RGB ให้กําหนดเป็น rgb(0 0 0) ซึ่งก็คือ 0 สีแดง 0 เขียว และ 0 น้ำเงิน หรือจะกําหนดสีดําเป็น rgb(0%, 0%, 0%) ก็ได้ สีขาวตรงข้ามกับ rgb(255, 255, 255) หรือ rgb(100%, 100%, 100%)

การตั้งค่าอัลฟ่าใน rgb() ทำได้ 2 วิธีดังนี้ เพิ่ม / หลังพารามิเตอร์สีแดง เขียว และน้ำเงิน หรือใช้ฟังก์ชัน rgba() โดยสามารถกําหนดค่าอัลฟ่าเป็นเปอร์เซ็นต์หรือทศนิยมระหว่าง 0 ถึง 1 เช่น หากต้องการตั้งค่าสีดำอัลฟ่า 50% ในเบราว์เซอร์สมัยใหม่ ให้เขียน rgb(0 0 0 / 50%) หรือ rgb(0 0 0 / 0.5) หากต้องการการสนับสนุนที่กว้างขึ้น ให้ใช้ฟังก์ชัน rgba() โดยเขียนเป็น rgba(0, 0, 0, 50%) หรือ rgba(0, 0, 0, 0.5)

HSL (สี ความอิ่มตัว ความสว่าง)

h1 {
  color: hsl(344, 79%, 40%);
}

HSL ย่อมาจาก Hue, Saturation และ Lightness เฉดสีจะอธิบายค่าในวงล้อสีตั้งแต่ 0 ถึง 360 องศา โดยเริ่มจากสีแดง (ทั้ง 0 และ 360) ส่วนสีที่มีค่า 180 หรือ 50% จะอยู่ในช่วงสีน้ำเงิน ซึ่งเป็นต้นกำเนิดของสีที่เราเห็น

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

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

เมื่อใช้ฟังก์ชันสี hsl() คุณกำหนดสีดําจริงได้โดยเขียน hsl(0 0% 0%) หรือแม้แต่ hsl(0deg 0% 0%) เนื่องจากพารามิเตอร์สีกำหนดองศาในวงล้อสี ซึ่งหากใช้ประเภทตัวเลขจะเป็น 0-360 หรือจะใช้ประเภทมุม (0deg) หรือ (0turn) ก็ได้ ทั้งความอิ่มตัวและความสว่างจะกำหนดด้วยเปอร์เซ็นต์

ฟังก์ชันสี HSL ที่แสดงภาพประกอบ โทนสีใช้วงล้อสี ความอิ่มตัวแสดงสีเทาที่ผสมผสานกับสีเขียวน้ำทะเล ความสว่างแสดงสีดำเป็นสีขาว

ระบบจะกำหนดอัลฟ่าใน hsl() ในลักษณะเดียวกันกับ rgb() ด้วยการเพิ่ม / หลังพารามิเตอร์โทนสี ความอิ่มตัว และความสว่าง หรือ โดยใช้ฟังก์ชัน hsla() โดยสามารถกําหนดค่าอัลฟ่าเป็นเปอร์เซ็นต์หรือทศนิยมระหว่าง 0 ถึง 1 เช่น หากต้องการตั้งค่าสีดําอัลฟ่า 50% ให้ใช้ hsl(0 0% 0% / 50%) หรือ hsl(0 0% 0% / 0.5) ใช้ฟังก์ชัน hsla() โดยเขียน hsla(0, 0%, 0%, 50%) หรือ hsla(0, 0%, 0%, 0.5)

คีย์เวิร์ดสี

มีสีที่มีชื่อใน CSS 148 สี โดยใช้ชื่อภาษาอังกฤษธรรมดา เช่น ม่วง มะเขือเทศ และสร้อยทอง Web Almanac ระบุว่าชื่อที่ได้รับความนิยมมากที่สุด ได้แก่ ดำ ขาว แดง น้ำเงิน และเทา ตัวอย่างสีโปรดของเรา ได้แก่ goldenrod, aliceblue และ hotpink

นอกจากสีมาตรฐานแล้ว ยังมีคีย์เวิร์ดพิเศษต่อไปนี้ด้วย

  • transparent คือสีโปร่งแสงทั้งหมด และเป็นค่าเริ่มต้นของ background-color ด้วย
  • currentColor คือค่าแบบไดนามิกที่คำนวณตามบริบทของพร็อพเพอร์ตี้ color หากคุณมีสีข้อความเป็น red แล้วตั้งค่า border-color เป็น currentColor ข้อความก็จะเป็นสีแดงด้วย หากองค์ประกอบที่คุณกำหนด currentColor ไว้ไม่มีค่าสำหรับ color ระบบจะคำนวณ currentColor โดยใช้การแสดงผลตามลำดับชั้นแทน

ตำแหน่งที่จะใช้สีในกฎ CSS

หากพร็อพเพอร์ตี้ CSS ยอมรับประเภทข้อมูล <color> เป็นค่า ก็จะยอมรับวิธีการแสดงสีข้างต้น หากต้องการจัดรูปแบบข้อความ ให้ใช้พร็อพเพอร์ตี้ color, text-shadow และ text-decoration-color ซึ่งทั้งหมดยอมรับสีเป็นค่าหรือสีเป็นส่วนหนึ่งของค่า

สำหรับพื้นหลัง คุณสามารถตั้งค่าสีเป็นค่าสำหรับ background หรือ background-color นอกจากนี้ คุณยังใช้สีในไล่ระดับสีได้ด้วย เช่น linear-gradient การไล่ระดับสีคือรูปภาพประเภทหนึ่งที่กําหนดแบบเป็นโปรแกรมได้ใน CSS ไล่ระดับสียอมรับสีตั้งแต่ 2 สีขึ้นไปในชุดค่าผสมรูปแบบสีใดก็ได้ เช่น ฐาน 16, RGB หรือ HSL

สุดท้าย border-color และ outline-color จะกำหนดสีสำหรับเส้นขอบและเส้นร่างในกล่อง พร็อพเพอร์ตี้ box-shadow ยังยอมรับสีเป็นหนึ่งในค่าด้วย

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับสี

สีใดต่อไปนี้เป็นสีที่ใช้ได้

rgb(255, 0, 0)
hsl(180deg 50% 50%)
rbga(400 0 1)
#0f08
hotpink
#OOFZ2

ค้นหาสี hsl ที่ไม่ถูกต้อง

hsl(0, 0, 0)
hsl(2rad 50% 50%)
hsl(.5turn 40% 60%)
hsl(5, 0%, 90%)
hsl(0 0% 0% / 20%)

แหล่งข้อมูล