คุณสมบัติสี CSS รหัสสี

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

ชื่อ

คุณสมบัติสีระบุสีของอิลิเมนต์ ใน CSS มี 145 ชื่อ ในหมู่พวกเขามีความเรียบง่าย (ตัวอย่างเช่นสีดำสีน้ำเงิน) และสีที่ซับซ้อน (เช่นสีแดงเข้ม lawngreen)

เนื่องจากรายการทั้งหมดเป็นเรื่องยากที่จะจดจำชื่อในสไตล์ชีทจะใช้น้อยมาก

RGB

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

เนื่องจากรูปแบบ RGB เกี่ยวข้องโดยตรงกับกฎทางกายภาพของการสร้างภาพสีระบบกำหนดสีดำเป็น rgb (0, 0, 0) สีขาวคือ rgb (255, 255, 255) ระบบ RGBA มีความคล้ายคลึงกับ RGB เท่านั้นเพิ่มช่องอัลฟา มีผลต่อความโปร่งใสที่ผสมสีกับพื้นหลัง ลักษณะขององค์ประกอบจะแตกต่างกันไปขึ้นอยู่กับ "พื้นผิว"

HSL

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

• สี (ในองศา) - ทิศทางจากศูนย์กลางของวงกลม;
• ความอิ่มตัว (ในเปอร์เซ็นต์) คือเท่าใดสีที่จำเป็น;
• ความสว่าง (เป็นเปอร์เซ็นต์)

ยกตัวอย่างเช่นสีม่วงสามารถกำหนดในลักษณะ: HSL (315, 100%, 45%) HSL สะดวกที่สุดสำหรับการทดลอง หลังจากศึกษาล้อเลื่อนสีแล้วคุณสามารถจินตนาการได้อย่างคร่าว ๆ ขณะดูสไตล์ชีตสีอะไรที่กำหนดให้กับองค์ประกอบเฉพาะ HSLA - HLS เดียวกันเท่านั้นที่มีช่องอัลฟ่า: hsl (0, 100%, 50, 0.6) - สีแดงโปร่งใสเล็กน้อยกว่าครึ่ง

HEX

ใน สี CSS สามารถตั้งค่าการใช้แทนเลขฐานสิบหกเช่นส้มกำหนดค่า # FF4500.

เพื่อให้เข้าใจว่ามีอะไรดีhexadecimal แทนควรจะมองลึกลงไปในระบบทศนิยม มันมีตัวเลขตั้งแต่ 0 ถึง 9 เมื่อนับต้องการจำนวนมากกว่า 9 บิตเพิ่มอีกหนึ่งบิตและมันจะเปิดออก 10 แล้ว 100 เป็นต้นในระบบเลขฐานสิบหกทุกอย่างเป็นเหมือนกัน แต่ในนั้นหลังจาก 9 ไป A, แล้ว B และอื่น ๆ เพื่อ F เป็นเช่นเดียวกับ 15 ในระบบทศนิยม จากนั้นหนึ่งบิตจะถูกเพิ่มและเราได้รับ 10, เท่ากับ 16 ในแคลคูลัสปกติ

เช่นเดียวกับ RGB เฉดสีใน HEX ระบุว่าสัดส่วนใช้สีหลัก ไม่ได้ถูกคั่นด้วยเครื่องหมายจุลภาค (สี: # FFD500) อักขระสองตัวนี้ระบุจำนวนสีแดงเขียวและน้ำเงิน

ตามกฎแล้วระบบ HEX ไม่ได้ใช้ในระหว่างการทดลองเนื่องจากไม่สามารถหาสีที่ถูกต้องได้ CSS ตาราง สามารถช่วยในเรื่องนี้ได้ แต่ถ้าอย่างต่อเนื่องเพื่อปรึกษากับเธองานจะล่าช้า การแสดงเลขฐานสิบหกสะดวกที่สุดเมื่อย้ายเทมเพลตจากโปรแกรมแก้ไขกราฟิก เพราะมันง่ายกว่าที่จะคัดลอกจากเพียงหมายเลขเดียวแทนที่จะสลับเป็นสาม

ทางใดที่ดีที่สุด?

ในบัญชีนี้ไม่สามารถพูดอะไรได้ หากองค์ประกอบอินเทอร์เฟซต้องการความโปร่งใสให้เลือกระหว่าง RGBA และ HSLA หากคุณต้องการทดสอบในเบราว์เซอร์ล้อสี HLS จะสะดวกที่สุด ถ้าคุณใช้จานสีหรือย้ายการออกแบบจาก Photoshop คุณควรเลือกรหัสสี CSS ฐานสิบหก</ span> </ p>