ข้ามไปยังเครื่องมือเลือกสี

รหัสสี HEX คืออะไร: #RRGGBB ทำงานอย่างไร

รหัสสี HEX อย่าง #1e90ff คือเลขฐานสิบหกสามคู่ บอกปริมาณแสงสีแดง เขียว และน้ำเงิน แต่ละคู่ตั้งแต่ 00 (ไม่มีเลย) ถึง ff (เต็มที่ คือ 255) เพิ่มคู่ที่สี่เพื่อกำหนดความทึบแสง: 80 คือประมาณ 50% ส่วน ff คือทึบเต็มที่

อ่าน 3 นาที

รหัสสี HEX ทำงานอย่างไร

ทุกสีบนหน้าจอเกิดจากการผสมแสงสีแดง เขียว และน้ำเงิน รหัส HEX เขียนความแรงของแสงแต่ละสีเป็นอักขระสองตัวหลังเครื่องหมาย # เรียงจากแดง ตามด้วยเขียว แล้วจึงน้ำเงิน นี่คือรูปแบบ #RRGGBB

อักขระเหล่านี้เป็นเลขฐานสิบหก คือระบบนับที่มี 16 หลัก: 0 ถึง 9 แล้วต่อด้วย a (10), b (11), c (12), d (13), e (14) และ f (15) หนึ่งคู่แทนค่าได้ 256 ค่า ตั้งแต่ 00 (0) ถึง ff (255) ตรงกับช่วงของ rgb() พอดี

วิธีแปลงหนึ่งคู่เป็นเลขฐานสิบ ให้คูณหลักแรกด้วย 16 แล้วบวกหลักที่สอง ด้านล่างคือ #1e90ff หรือสี dodgerblue ใน CSS ในสี่รูปแบบ ตามด้วยการคำนวณทีละคู่

ตัวอย่าง: #1e90ff
รูปแบบค่า
HEX
RGB
HSL
OKLCH
คู่ช่องสีการคำนวณค่า
1eแดง1 × 16 + 1430
90เขียว9 × 16 + 0144
ffน้ำเงิน15 × 16 + 15255

ดังนั้น #1e90ff คือ rgb(30, 144, 255): แดงนิดหน่อย เขียวพอประมาณ และน้ำเงินเต็มที่ รวมกันได้สีฟ้าสดแบบท้องฟ้า สามคู่ คู่ละ 256 ค่า ให้สีที่เป็นไปได้ทั้งหมด 16,777,216 สี

รูปย่อ HEX แบบสามหลักและสี่หลัก

เมื่อทั้งสองหลักของทุกคู่เหมือนกัน เขียนแต่ละคู่แค่ตัวเดียวได้ #ffcc00 จะกลายเป็น #fc0 และเบราว์เซอร์จะเขียนแต่ละหลักซ้ำกลับให้เอง #1e90ff ไม่มีรูปย่อ เพราะ 1e และ 90 ไม่ใช่คู่ที่ซ้ำกัน

รูปย่อครอบคลุมได้แค่ 4,096 สีจากราว 16.7 ล้านสี แบบสี่หลักเพิ่มความทึบแสงด้วยหลักการเดียวกัน #f008 จึงหมายถึง #ff000088

แบบย่อแบบเต็มสี
#fff#ffffffขาว
#000#000000ดำ
#f00#ff0000แดง
#fc0#ffcc00เหลืองอมส้ม
#abc#aabbccฟ้าอมเทา
#f008#ff000088แดงที่ความทึบแสง 53%

ความโปร่งใสใน HEX: HEX แปดหลักพร้อมอัลฟา

รหัสแปดหลักเพิ่มคู่ที่สี่สำหรับอัลฟา หรือความทึบแสง: #RRGGBBAA โดย 00 คือโปร่งใสทั้งหมด และ ff คือทึบเต็มที่ เบราว์เซอร์ปัจจุบันทุกตัวรองรับใน CSS รวมถึงรูปย่อ #RGBA แบบสี่หลักด้วย

วิธีหาค่าคู่นี้ ให้คูณความทึบแสงด้วย 255 ปัดเป็นจำนวนเต็ม แล้วแปลงเป็นเลขฐานสิบหก 50% ได้ 127.5 ปัดเป็น 128 เขียนเป็น 80 ด้านล่างคือตารางเต็ม ใช้กับสี #1e90ff

ความทึบแสงอัลฟา (0–255)คู่ HEX#1e90ff พร้อมอัลฟา
100%255ff#1e90ffff
95%242f2#1e90fff2
90%230e6#1e90ffe6
85%217d9#1e90ffd9
80%204cc#1e90ffcc
75%191bf#1e90ffbf
70%179b3#1e90ffb3
65%166a6#1e90ffa6
60%15399#1e90ff99
55%1408c#1e90ff8c
50%12880#1e90ff80
45%11573#1e90ff73
40%10266#1e90ff66
35%8959#1e90ff59
30%774d#1e90ff4d
25%6440#1e90ff40
20%5133#1e90ff33
15%3826#1e90ff26
10%261a#1e90ff1a
5%130d#1e90ff0d
0%000#1e90ff00

CSS

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

มีสองจุดที่ต้องระวัง ข้อแรก 80 คือ 128 จาก 255 เท่ากับ 50.2% ไม่ใช่ 50% พอดี เพราะอัลฟาใน HEX มีแค่ 256 ระดับ เปอร์เซ็นต์ลงตัวส่วนใหญ่จึงเป็นค่าประมาณที่ใกล้เคียง ข้อสอง Android วางอัลฟาไว้ข้างหน้า ในไฟล์ color resource ของ Android #801e90ff มีความหมายเดียวกับ #1e90ff80 ใน CSS

อ่านรหัส HEX ด้วยตาเปล่า

เดาสีได้โดยไม่ต้องแปลงอะไรเลย ให้ดูหลักแรกของแต่ละคู่ เพราะเกือบทั้งหมดของข้อมูลอยู่ที่หลักนั้น

ชื่อใน CSSHEXRGBอ่านอย่างไร
tomato#ff6347255, 99, 71แดงเต็มที่ มีเขียวและน้ำเงินเล็กน้อย: แดงอ่อนโทนอุ่น
gold#ffd700255, 215, 0แดงและเขียวสูง ไม่มีน้ำเงิน: เหลือง
chocolate#d2691e210, 105, 30แดงนำ เขียวครึ่งหนึ่ง น้ำเงินต่ำ: น้ำตาลอมส้ม
darkturquoise#00ced10, 206, 209เขียวและน้ำเงินสูง ไม่มีแดง: ฟ้าอมเขียว
dodgerblue#1e90ff30, 144, 255น้ำเงินนำ เขียวอยู่กลาง ๆ: ฟ้าท้องฟ้า
mediumorchid#ba55d3186, 85, 211แดงและน้ำเงินสูง เขียวต่ำ: ม่วง
teal#0080800, 128, 128เขียวและน้ำเงินครึ่งหนึ่ง: ฟ้าอมเขียวเข้ม
navy#0000800, 0, 128มีแค่น้ำเงินครึ่งหนึ่ง: น้ำเงินเข้ม
slategray#708090112, 128, 144เกือบเท่ากัน น้ำเงินนำเล็กน้อย: เทาอมฟ้า
  • หลักแรกที่มีค่ามากที่สุดคือแสงที่เด่น #d2691e มี d ในช่องแดง 6 ในช่องเขียว และ 1 ในช่องน้ำเงิน จึงเป็นสีน้ำตาลอมส้ม
  • สองช่องที่สูงจะผสมกัน: แดงกับเขียวได้เหลือง เขียวกับน้ำเงินได้ฟ้าอมเขียว (cyan) แดงกับน้ำเงินได้ชมพูม่วง (magenta) หรือม่วง
  • สามคู่เท่ากันได้สีเทา #333333 คือเทาเข้ม #999999 คือเทาอ่อน คู่ที่เกือบเท่ากัน เช่น #708090 จะได้สีหม่น ๆ อมเทา
  • ตัวเลขสูงโดยรวมหมายถึงสีอ่อน ตัวเลขต่ำหมายถึงสีเข้ม เมื่อทั้งสามคู่ตั้งแต่ c0 ขึ้นไป สีจะอ่อนจาง เมื่อทั้งสามคู่ไม่เกิน 30 สีจะเข้มมาก
  • ที่ตัวเลขเท่ากัน เขียวดูสว่างกว่าน้ำเงินมาก #00ff00 มีความสว่าง OKLCH อยู่ที่ 0.866 ส่วน #0000ff มีแค่ 0.452

ทำไม #808080 ไม่ใช่สีเทากลาง

#808080 อยู่ตรงกลางพอดีในเชิงตัวเลข คือ 128 จาก 255 ในทุกช่องสี แต่ไม่ได้ดูอยู่กึ่งกลางระหว่างดำกับขาว ความสว่าง OKLCH ของมันคือ 0.600 จึงดูเหมือนไปทางขาวแล้ว 60%

ค่า HEX ถูกเข้ารหัสด้วยเส้นโค้ง sRGB มาแล้ว ซึ่งใกล้เคียงกับการมองเห็นแต่ไม่ตรงทั้งหมด #808080 ปล่อยแสงราว 21.6% ของสีขาว และโมเดลตามการรับรู้วางจุดกึ่งกลางทางสายตาไว้ต่ำกว่านั้น: OKLCH อยู่ที่ #636363 ส่วน CIELAB อยู่ที่ #777777

สีเทาคืออะไรOKLCH Lคอนทราสต์บนขาวคอนทราสต์บนดำ
#808080กึ่งกลางเชิงตัวเลข 1280.6003.95:15.32:1
#777777กึ่งกลางของ CIELAB, L* 500.5694.48:14.69:1
#767676เทาอ่อนที่สุดที่ได้ 4.5:1 บนขาว0.5664.54:14.62:1
#636363กึ่งกลางของ OKLCH, L 0.50.5006.01:13.50:1

เรื่องนี้สำคัญกับข้อความ สีเทา #808080 บนพื้นขาวได้ 3.95:1 ซึ่งไม่ผ่าน WCAG AA สำหรับเนื้อหา #767676 คือเทาที่อ่อนที่สุดที่ผ่าน 4.5:1 ส่วน #777777 ที่อ่อนกว่าแค่ขั้นเดียวก็ไม่ผ่านแล้วที่ 4.48:1

ตัวพิมพ์ใหญ่หรือเล็ก มีหรือไม่มี #

รหัส HEX ไม่สนตัวพิมพ์ใหญ่หรือเล็ก #1E90FF, #1e90ff และ #1E90ff คือสีเดียวกันใน CSS, SVG และเครื่องมือออกแบบ เลือกสไตล์เดียวแล้วใช้ให้เหมือนกันทุกที่ เวลาค้นหาในโค้ดจะได้เจอทุกจุดที่ใช้ ใน CSS นิยมใช้ตัวพิมพ์เล็ก

เครื่องหมาย # เป็นส่วนหนึ่งของไวยากรณ์ CSS ไม่ใช่ส่วนของสี Figma และเครื่องมือออกแบบหลายตัวแสดงโค้ดโดยไม่มี # ส่วนภาษาโปรแกรมมักเขียนเป็นตัวเลขที่ขึ้นต้นด้วย 0x เช่นใน Flutter ที่ Color(0xFF1E90FF) เริ่มต้นด้วยคู่อัลฟา

วิธีหารหัส HEX ของสีบนหน้าจอ

ใช้หลอดดูดสี (eyedropper) เครื่องมือที่อ่านสีใต้เคอร์เซอร์แล้วแสดงโค้ดออกมา ใช้ได้ฟรีและส่วนใหญ่ติดตั้งมาในเครื่องอยู่แล้ว

  • Chrome และ Edge: เปิด DevTools ด้วย F12 คลิกช่องสีใดก็ได้ในแผง Styles แล้วใช้ไอคอนหลอดดูดสีเลือกสีจากหน้าเว็บ
  • PickShade: เครื่องมือเลือกสีในหน้าแรกมีปุ่มหลอดดูดสีใน Chrome และ Edge ที่ดูดสีได้จากทุกที่บนหน้าจอ
  • Windows: ติดตั้ง Microsoft PowerToys แล้วกด Win + Shift + C เพื่อเปิด Color Picker
  • macOS: เปิด Digital Color Meter จาก Applications > Utilities ตั้งค่าเป็น sRGB แล้วเลือก View > Display Values > as Hexadecimal
  • Figma, Photoshop และแอปออกแบบส่วนใหญ่: กด I เพื่อใช้หลอดดูดสี
  • ในรูปภาพหรือภาพหน้าจอ: เปิดในเครื่องมือดูดสีจากรูปภาพแล้วคลิกพิกเซลใดก็ได้ รูปจะอยู่ในอุปกรณ์ของคุณเท่านั้น

ค่าที่ดูดมาอาจคลาดจากต้นฉบับไปเล็กน้อย เพราะหน้าจอใช้โปรไฟล์สีและรูปภาพถูกบีบอัด เมื่อต้องการค่าที่แม่นยำ ให้คัดลอกจากไฟล์ดีไซน์หรือ CSS ไม่ใช่จากภาพหน้าจอ

คำถามที่พบบ่อย

รหัสสี HEX คืออะไร

รหัสสี HEX คือโค้ดหกหลักอย่าง #1e90ff ที่บอกสีด้วยปริมาณแสงสีแดง เขียว และน้ำเงิน เลขฐานสิบหกแต่ละคู่มีค่าตั้งแต่ 00 (0) ถึง ff (255) ดังนั้น #1e90ff คือ rgb(30, 144, 255)

จะเพิ่มความทึบแสงให้สี HEX ได้อย่างไร

เพิ่มตัวเลขคู่ที่สี่ต่อท้าย: #RRGGBBAA คูณความทึบแสงด้วย 255 ปัดเศษ แล้วแปลงเป็นเลขฐานสิบหก 50% คือ 80, 25% คือ 40 และ 75% คือ bf เช่น #1e90ff80 คือ dodgerblue ที่ความทึบแสงประมาณ 50%

ความทึบแสง 50% ใน HEX คือค่าอะไร

ความทึบแสง 50% ใน HEX คือ 80 เช่น #00000080 สำหรับสีดำโปร่งใสครึ่งหนึ่ง 80 เท่ากับ 128 จาก 255 คือ 50.2% เพราะอัลฟาใน HEX มี 256 ระดับ และ 50% พอดีตกอยู่ระหว่าง 7f กับ 80

HEX กับ RGB ต่างกันอย่างไร

สีไม่ต่างกันเลย ต่างกันแค่วิธีเขียน HEX เขียนค่าแดง เขียว และน้ำเงินเป็นคู่เลขฐาน 16 ส่วน rgb() เขียนเป็นเลขฐานสิบตั้งแต่ 0 ถึง 255 ดังนั้น #ff6347 และ rgb(255, 99, 71) คือสีแดงมะเขือเทศสีเดียวกัน

รหัสสี HEX แยกตัวพิมพ์ใหญ่เล็กหรือไม่

ไม่แยก #FF6347, #ff6347 และ #Ff6347 คือสีเดียวกันใน CSS, HTML, SVG และเครื่องมือออกแบบ โค้ด CSS ส่วนใหญ่ใช้ตัวพิมพ์เล็ก แต่จะใช้แบบไหนก็ได้ถ้าใช้ให้สม่ำเสมอ

รหัส HEX ของสีเทากลางคืออะไร

#808080 คือกึ่งกลางเชิงตัวเลข แต่ดูอ่อนกว่ากึ่งกลาง ด้วยความสว่าง OKLCH ที่ 0.600 สีเทาที่ดูอยู่กึ่งกลางระหว่างดำกับขาวอยู่ระหว่าง #636363 (OKLCH L 0.5) และ #777777 (CIELAB L* 50)

ลองใช้ใน PickShade

คู่มือที่เกี่ยวข้อง