เขียนโค้ดสำหรับเว็บมักเป็นเรื่องยุ่งยาก มีหลายวิธีไปสู่เป้าหมายเดียวกัน บางวิธีมีประสิทธิภาพหรือมีประสิทธิผลมากกว่า และบางวิธีอาจไม่ทำงานภายใต้เงื่อนไขทั้งหมด ความแตกต่างระหว่างเว็บไซต์ที่ดีและยอดเยี่ยม อาจอยู่ที่การเลือกวิธีเขียนสี และที่ชัดเจนที่สุดคือการเขียนสีใน HTML การเขียนคุณสมบัติสี HTML อาจเป็นเรื่องน่าปวดหัว และคุณอาจสับสนพยายามตัดสินใจวิธีดำเนินการ
แต่การเขียนคุณสมบัติสี HTML ไม่ได้ต้องซับซ้อน บทความนี้เสนอ 4 ตัวเลือกสำหรับจัดการ HTML ของเว็บไซต์และสร้างสีสันหลากหลาย ปฏิบัติตามคำแนะนำง่ายๆ และเว็บไซต์ของคุณจะเต็มไปด้วยโทนสีที่ดึงดูด ทำให้ธุรกิจของคุณโดดเด่น
ใช้ค่า HSL
เบราว์เซอร์สมัยใหม่รองรับค่า Hue, Saturation, Lightness (HSL) ได้ดี ตัวเลือกนี้ใช้ไม่บ่อยเท่าอื่นๆ แต่ทำงานได้ดีและนำไปใช้ง่าย การกำหนดค่า HSL เร็วเช่นกัน
วิธีใช้ HSL: ใช้แอตทริบิวต์ style มาตรฐาน ระบุ "hsl" เป็นประเภท และกำหนดค่าในวงเล็บ:
<body style="background-color:hsl(0,0%,96%);"> </body>
ควบคุมความทึบแสงได้โดยส่ง hsl ผ่านช่องอัลฟา ใช้คำนำหน้า "hsla" และใส่ค่าที่ 4 ตั้งแต่ 0 (โปร่งใส) ถึง 1 (ทึบแสง) ในวงเล็บ:
<body style="background-color:hsla(0,0%,96%,0.8);"> </body>
ลองใช้ค่า RGB
การใช้ค่า Red, Green, Blue (RGB) สำหรับสีพื้นหลัง HTML เป็นตัวเลือกยอดนิยมกว่า HSL เพราะ RGB ทำงานกับเบราว์เซอร์เก่าและใหม่ ทำให้ดึงดูดนักเขียนโค้ดที่ต้องการเว็บไซต์เข้าถึงได้กว้างขวาง
ใช้ RGB คล้าย HSL: ใช้รูปแบบแอตทริบิวต์ style เดียวกัน แต่เปลี่ยน "hsl" เป็น 'rgb' และใส่ค่าสี 3 ค่าในวงเล็บ:
<body style="background-color:rgb(102,0,51);"> </body>
เช่นเดียวกับ HSL จัดการความทึบแสงได้ด้วยการกำหนดให้ RGB ผ่านช่องอัลฟา และเพิ่มตัวแปรที่ 4 (0 ถึง 1) ในวงเล็บ:
<body style="background-color:rgba(102,0,51, 0.2);"> </body>
ใช้รหัส Hex แบบคลาสสิก
ตัวเลือกนี้เป็นวิธีคลาสสิกที่เชื่อถือได้ การกำหนดค่า Hex เป็นวิธียอดนิยมในการเขียนคุณสมบัติสี HTML เพราะเบราว์เซอร์ส่วนใหญ่รองรับ รหัส Hex มีข้อได้เปรียบเป็นตัวแปรเดียว ไม่ใช่หลายตัวที่อาจเกิดข้อผิดพลาด
วิธีใช้รหัส Hex เขียนสี HTML: ใช้แอตทริบิวต์ style เดียวกัน แต่แทน "hsl" หรือ "rgb" ด้วยรหัส Hex:
<body style="background-color:#228B22;"> </body>
จำไว้ว่าพฤติกรรมสี Hex เปลี่ยนไปตามตำแหน่ง วิเคราะห์ว่ากำลังทำงานกับ inline elements หรือ block-level elements เมื่อกำหนดรหัสสี Hex
กรณีฉุกเฉิน ใช้ชื่อสี
สำหรับผู้ที่ไม่คุ้นเคยกับรหัส Hex หรือค่า HSL สามารถใช้ชื่อสีได้ มีชื่อสี 140 ชื่อที่ใช้ใน HTML ได้ หากต้องการเปลี่ยนสีเว็บด่วน ใช้วิธีนี้
ใช้แอตทริบิวต์ style เดียวกัน แต่แทนรหัส Hex ด้วยชื่อสี:
<body style="background-color:brown;"> </body>
การใช้ชื่อสีเป็นวิธีดีสำหรับผู้ที่ต้องการเปลี่ยนสีอย่างง่ายดาย ครั้งหน้าที่ต้องแก้ปัญหาเร่งด่วน ลองใช้ชื่อสีดู!
แค่นี้ก็พอ! นี่คือวิธีที่เร็วที่สุดและเรียบง่ายที่สุดสำหรับเขียนคุณสมบัติสี HTML ครั้งหน้าที่ต้องการเพิ่มสีสันให้เว็บไซต์ อย่าตกใจหรือดึงผมออก แค่ดูคู่มือนี้และทำให้เว็บไซต์ของคุณสวยงาม!
