CSS กำหนดสีอย่างไรบ้าง

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

1.Keyword

      เป็นการกำหนดสีโดยใช้เป็นคำภาษาอังกฤษไปเลย สำหรับผมคิดว่าเป็นการกำหนดสีได้ง่ายที่สุดแต่จะได้สีที่พื้นฐานถ้าจะเล่นเฉดสีคงต้องเป็นรหัส RGB นะครับ การใข้ก็ง่ายๆ เช่น ถ้าเราต้องการสีแดงก็กำหนด red ลงไปได้เลยครับ

red

green

blue

pink

yellow

skyblue

2.Hex Code

        เป็นรหัสสีที่ใช้เลขฐานสิบหกเป็นหลัก ใช้หลักการผสมสีแบบ RGB (Red,Green,Blue) เลขฐานสิบหกที่กล่าวถึงนั้นจะมี 6 หลัก เช่น 00FFFF ก็จะได้ Red = 00,Green=FF,Blue=FF จะออกมาเป็นสีฟ้าอย่างที่เห็นด้านล่าง ทุกครั้งที่ใส่รหัสสีด้านหน้ารหัสต้องใส่#ด้วยนะครับ

#333333

#FF0000

#00FF00

#0000FF

#FF00FF

#FFFF00

#00FFFF

3.RGB แบบกำนหดเป็น %

       เป็นการผสมสีเหมือนกับ Hex code ครับแต่จะเป็นเหมือนการส่งค่าเป็น % เข้าไปใน function rgb

ตำแหน่งแรกคือ red ตำแหน่งที่ 2 คือ green ตำแหน่งที่ 3 คือ blue 100%เปรียบเสมือน FF ของ hex code 0% = 00 ของ hex code นั่นเอง ตามตัวอย่างด้านล่างเลยครับ 

rgb(30%,30%,30%)

rgb(100%,0%,0%)

rgb(0%,100%,0%)

rgb(0%,0%,100%)

rgb(100%,0%,100%)

rgb(100%,100%,0%)

rgb(0%,100%,100%)

4.RGB Absolute

      เป็นการผสมสีคล้ายกับ RGB%ด้านบนแต่จะใช้ตัวเลขฐานสิบในการกำหนดค่าใน RGB แทน FF ใน hex codeเท่ากับ 100% ใน RGB% และเท่ากับ 255 ในเลขฐานสิบที่ใช้ใน RGB Absolute ส่วน 0 ก็ตามนี้ครับ 00=0%=0 ดูตัวอย่างได้จากด้านล่างเลยครับ

rgb(50,50,50)

rgb(255,0, 0)

rgb(0,255,0)

rgb(0,0,255)

rgb(255,0,255)

rgb(255,255,0)

rgb(0,255,255)

 ด้านล่างนี้เป็นรหัสสีแบบต่างๆนอกเหนือจากตัวอย่างด้านบนนะครับผม

          เรื่องการเซ็ตสีต่างๆใน CSS นั้นไม่ยากเลยใช่มั้ยครับ สำหรับบทความนี้ก็ขอจบเพียงเท่านี้ก่อนนะครับ สวัสดีครับ