สี CSS HEX

สารบัญ

ระบุสีเลขฐานสิบหกด้วย: #RRGGBB โดยที่ RR (สีแดง), GG (สีเขียว) และ BB (สีน้ำเงิน) จำนวนเต็มฐานสิบหกระบุส่วนประกอบของ สี.

ค่าฐานสิบหก

ใน CSS สีสามารถระบุได้โดยใช้ค่าเลขฐานสิบหกในรูปแบบ:

#rrggbb

โดยที่ rr (สีแดง), gg (สีเขียว) และ bb (สีน้ำเงิน) เป็นค่าเลขฐานสิบหกระหว่าง 00 ถึง ff (เหมือนกับทศนิยม 0-255)

ตัวอย่างเช่น #ff0000 จะแสดงเป็นสีแดง เนื่องจากสีแดงถูกกำหนดไว้ที่ค่าสูงสุด (ff) และส่วนที่เหลือถูกตั้งค่าเป็น ค่าต่ำสุด (00)

หากต้องการแสดงสีดำ ให้ตั้งค่าทั้งหมดเป็น 00 ดังนี้: #000000

หากต้องการแสดงสีขาว ให้ตั้งค่าทั้งหมดเป็น ff เช่น นี่: #ffffff.

ทดลองโดยผสมค่า HEX ด้านล่าง:

RED

ff

GREEN

0

BLUE

0

ตัวอย่าง

#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>Specify colors using HEX values</h1>

<h2 style="background-color:#ff0000;">#ff0000</h2>
<h2 style="background-color:#0000ff;">#0000ff</h2>
<h2 style="background-color:#3cb371;">#3cb371</h2>
<h2 style="background-color:#ee82ee;">#ee82ee</h2>
<h2 style="background-color:#ffa500;">#ffa500</h2>
<h2 style="background-color:#6a5acd;">#6a5acd</h2>

</body>
</html>

เฉดสีเทามักถูกกำหนดโดยใช้ค่าที่เท่ากันสำหรับแหล่งกำเนิดแสงทั้ง 3 ดวง:

ตัวอย่าง

#3c3c3c
#616161
#787878
#b4b4b4
#f0f0f0
#f9f9f9

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>Shades of gray</h1>

<p>By using equal values for red, green, and blue, you will get different shades of gray:</p>

<h2 style="background-color:#3c3c3c;">#3c3c3c</h2>
<h2 style="background-color:#616161;">#616161</h2>
<h2 style="background-color:#787878;">#787878</h2>
<h2 style="background-color:#b4b4b4;">#b4b4b4</h2>
<h2 style="background-color:#f0f0f0;">#f0f0f0</h2>
<h2 style="background-color:#f9f9f9;">#f9f9f9</h2>

</body>
</html>

ค่า HEX 3 หลัก

บางครั้งคุณจะเห็นรหัสเลขฐานสิบหก 3 หลักในซอร์ส CSS

รหัสเลขฐานสิบหก 3 หลักเป็นตัวย่อสำหรับรหัสเลขฐานสิบหก 6 หลักบางรหัส

รหัสเลขฐานสิบหก 3 หลักมีรูปแบบดังนี้

#rgb

โดยที่ r, g และ b แทนส่วนประกอบสีแดง เขียว และน้ำเงินที่มีค่าระหว่าง 0 ถึง f

รหัสฐานสิบหก 3 หลักสามารถใช้ได้เมื่อทั้งค่า (RR, GG และ BB) เหมือนกันเท่านั้น แต่ละองค์ประกอบ ดังนั้น หากเรามี #ff00cc ก็สามารถเขียนได้ดังนี้: #f0c

นี่คือตัวอย่าง:

ตัวอย่าง

 body {
  background-color: #fc9; /* same as #ffcc99 */
}
h1 {
  
  color: #f0f; /* same as #ff00ff */
}
p {
  
  color: #b58; /* same as #bb5588 */
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #fc9; /* same as #ffcc99 */
}

h1 {
  color: #f0f; /* same as #ff00ff */
}

p {
  color: #b58; /* same as #bb5588 */
}
</style>
</head>
<body>

<h1>CSS 3-digit Hex Code</h1>
<p>This is a paragraph.</p>

</body>
</html>