การใส่ค่าสีใน HTML

การกำหนดค่าใส่ให้กับส่วนต่างของ HTML ทำได้หลายแบบ แรกเริ่มการกำหนดจะทำผ่าน attribute ของ HTML Tag ภายหลังนิยมกำหนดผ่าน CSS เพื่อให้สามารถปรับแต่งได้ง่าย

บทความเรื่อง Colors Tutorial ของ W3schools ได้นำเสนอวิธีการกำหนดสีไว้หลายวิธี สำหรับบทความนี้จะนำเสนอเฉพาะรูปแบบที่มักใช้กันบ่อย และการประยุกต์ใช้ในปัจจุบัน

การกำหนดด้วยชื่อสี

เป็นการกำหนดค่าสีด้วยชื่อสีภาษาอังกฤษ เช่น Red, Green, Blue เป็นต้น โดยไม่คำนึงถึงตัวเล็กตัวใหญ่

ชื่อสีมาตรฐานที่บราวเซอร์รองรับ สามารถดูรายชื่อได้ที่ HTML Color Names หรือถ้าคุณใช้ Editor เก่งๆ ก็จะมีตัวช่วยให้ทำงานง่ายขึ้น

ในตัวอย่างแรกจะแนะนำการกำหนดสีแบบดั่งเดิมด้วย tag font ให้แสดงข้อความสีน้ำเงิน และ การกำหนดสีด้วย css ให้แสดงข้อความสีส้ม

การกำหนดสีด้วยค่า RGB

เป็นการใช้ตัวเลข 3 ชุดที่มีค่าระหว่าง 0-255 ในการกำหนดค่าระดับของสีแดง เขียว และ น้ำเงิน ให้ผสมเป็นสีที่ต้องการ โดยการกำหนดสีด้วย rgb สามารถใช้ได้ใน attribute และ css

นอกจากนี้ CSS ยังมีคำสั่ง rgba() สำหรับกำหนดนี้พร้อมกับกำหนดค่าความทึบ (opacity หรือ alpha) โดยให้ระบุค่าสีเป็นตัวเลข 3 ชุด ตามด้วยค่าความทึบแสงที่มีค่าเป็นจำนวนจริงตั้งแต่ 0-1  คือ บางสุดถึงทึบสุด (เนื่องด้วย wordpress รุ่นนี้ไม่รองรับการกำหนดสีด้วย rgb และ rgba จึงนำเสนอด้วยภาพ) ในตัวอย่างด้านล่างเป็นการสร้างพื้นที่ div ที่มีพื้นหลังเป็นสีเหลือง ภายในบรรจุด้วย 5 ชิ้นที่กำหนดให้มีสีแดง แต่มีค่า opacity ต่างกันคือ 0 0.25 0.50 0.75 และ 1 

<div style="background: yellow">
  <span style="background:rgba(255,0,0,0)">0</span>
  <span style="background:rgba(255,0,0,0.25)">0.25</span>
  <span style="background:rgba(255,0,0,0.50)">0.50</span>
  <span style="background:rgba(255,0,0,0.75)">0.75</span>
  <span style="background:rgba(255,0,0,1)">1</span>
</div>

ช่องที่มีค่า opacity เป็น 0 จะไม่ปรากฎสีแดงออกมาเลย
ช่องที่มีค่า opacity เป็น 0.25 หรือมีสีแดงที่มีความทึบเพียง 25% สีเหลืองด้านหลังจากทะลุและเกิดการผสมสี และเป็นเช่นนี้กับ 0.5 และ 0.75 ที่ต่างระดับความทึบสี
ช่องที่มีค่า opacity เป็น 1 คือสีทีบที่สุดจนไม่สามารถมองเห็นสิ่งที่อยู่ด้านล่างได้

การกำหนดสีด้วยเลขฐาน 16

การกำหนดค่าสีด้วยวิธีนี้จะแบ่งค่าสีออกเป็น 3 ชุด คือ #แดง (RR) เขียว (GG) และ น้ำเงิน (BB) ชุดละ 2 หลัก โดยแทนค่าด้วยเลขฐาน 16 ตั้งแต่ 0-F หากชุดใดระบุค่าเพียงตัวเดียวเทียบเท่าระบุค่าเดียวกันทั้ง 2 หลัก เช่น #ABC => #AABBCC เป็นต้น

การประยุกต์ด้วย RGBA + VAR

เพื่อให้การปรับเปลี่ยนสีเป็นไปได้โดยสะดวกขึ้น แนะนำให้ย้ายข้อมูลสีที่กำหนดไว้ในชิ้นส่วนต่างๆ ออกไปสร้างเป็น variable ในส่วนของ :root และทำการอ้างอิงถึงด้วยคำสั่ง var ดังนี้

<div id="main" style="height: 300px">
    <div id="content">
        Content
    </div>
</div>

:root {
   --main-bg-color: #003c71;
   --content-fg-color: lightgray;
   --content-fg-hover-color: rgb(255,255,255);
}

#main {
   background-color: var(--main-bg-color);
}

#content {
  color: var(--content-fg-color);
  padding-top: 30px;
  width: 70%;
  margin: auto;
  text-align: center;
}


#content:hover {
   color: var(--content-fg-hover-color);
}

เมื่อได้ดูตัวอย่างการใช้กำหนดค่าสีมากขึ้นพบว่า การกำหนดค่าสีใน :root ได้เปลี่ยนจากการกำหนดสีแบบตรงตัวดังตัวอย่างข้างต้น เป็นการกำหนดค่า 3 ช่วง ที่จะถูกนำไปประมวลผลค่าสีอีกครั้งด้วยคำสั่ง rgba ในตอนใช้งาน

:root {
    --content-fg-rgb: 211, 211, 211;
}

#content {
  /*color: var(--content-fg-color);*/
  color: rgba(var(--content-fg-rgb), 0.9);
}

ก่อนจบทบความนี้ ขอแนะนำเครื่องมือสำหรับช็อปสี และ ได้รหัสสี เพื่อนำไปใช้งานจากเว็บไซต์ w3schools : Colors Picker  หวังว่าข้อมูลนี้จะเป็นประโยชน์สำหรับนักพัฒนาทุกท่านครับ

NONTAPON RATTANAPITTAYAPORN

More Posts