กลับไปหน้าบทความ

อ่าน 10 นาที

สีเว็บ

สีเว็บหรือที่รู้จักกันในชื่อรหัสเลขฐานสิบหกและรหัสสีคือสีที่ใช้ในการแสดงหน้าเว็บในเวิลด์ไวด์เว็บสามารถอธิบายได้สามวิธี: สีอาจระบุเป็น ชุด ค่า RGBใน รูปแบบ เลขฐานสิบหก...

สีเว็บ

สีเว็บหรือที่รู้จักกันในชื่อรหัสเลขฐานสิบหกและรหัสสีคือสีที่ใช้ในการแสดงหน้าเว็บในเวิลด์ไวด์เว็บสามารถอธิบายได้สามวิธี: สีอาจระบุเป็น ชุด ค่า RGBใน รูปแบบ เลขฐานสิบหก (ชุดค่าเลขฐานสิบหก ) หรือตามชื่อภาษาอังกฤษทั่วไปในบางกรณีมักใช้เครื่องมือสีหรือซอฟต์แวร์กราฟิก อื่นๆ เพื่อสร้างค่าสี ในบางกรณี รหัส สีเลขฐานสิบหกจะระบุด้วยสัญลักษณ์โดยใช้เครื่องหมาย # นำหน้า [ 1 ] [ 2 ]สีจะถูกระบุตามความเข้มของส่วนประกอบสีแดง สีเขียว และสีน้ำเงิน โดยแต่ละส่วนแทนด้วยบิตแปดบิตดังนั้นจึงมี 24 บิตที่ใช้ในการระบุสีเว็บภายใน ขอบเขตสี sRGBและมีสี 16,777,216 สีที่สามารถระบุได้ ในเลขฐานสิบหก จะระบุด้วยตัวเลขฐานสิบหกสองหลักต่อสี ทำให้มีตัวเลขฐานสิบหกทั้งหมดหกหลัก ในบางบริบท สามารถระบุค่าประจำหลักเพิ่มเติมได้อีกสองค่า ซึ่งจะให้ช่องความโปร่งใส (อัลฟา)

สามารถระบุสีที่อยู่นอกขอบเขต sRGB ได้ในCascading Style Sheetsโดยการทำให้ส่วนประกอบสีแดง สีเขียว และสีน้ำเงินอย่างน้อยหนึ่งส่วนเป็นค่าลบหรือมากกว่า 100% ดังนั้นพื้นที่สีจึงเป็นการขยายขอบเขตที่ไม่จำกัดของ sRGB ในทางทฤษฎี คล้ายกับscRGB [ 3 ] การระบุสีที่ไม่ใช่ sRGB ด้วยวิธีนี้ต้องใช้RGB()การเรียกฟังก์ชัน ซึ่งเป็นไปไม่ได้ด้วยไวยากรณ์เลขฐานสิบหก (และด้วยเหตุนี้จึงเป็นไปไม่ได้ใน เอกสาร HTML รุ่นเก่าที่ไม่ใช้CSS )

MosaicและNetscape Navigatorเวอร์ชันแรกใช้ชื่อสี X11เป็นพื้นฐานสำหรับรายการสี เนื่องจากทั้งสองเริ่มต้นจากการเป็น แอปพลิเคชัน X Window Systemสีเว็บมีคำจำกัดความสีที่ชัดเจนsRGBซึ่งเชื่อมโยงค่าสีของ ชุด ฟอส ฟอร์เฉพาะ เส้นโค้งการถ่ายโอนที่กำหนด จุดสีขาวแบบปรับได้ และสภาวะการมองเห็น[ 4 ]สิ่งเหล่านี้ได้รับการเลือกให้คล้ายกับจอภาพและสภาวะการมองเห็นในโลกแห่งความเป็นจริงหลายๆ อย่าง เพื่อให้การแสดงผลใกล้เคียงกับค่าที่กำหนดไว้ แม้ว่าจะไม่มีการจัดการสีก็ตามตัวแทนผู้ใช้มีความแตกต่างกันในความแม่นยำในการแสดงสีที่กำหนดไว้ ตัวแทนผู้ใช้ขั้นสูงกว่าจะใช้การจัดการสีเพื่อให้ความแม่นยำของสีที่ดีขึ้น ซึ่งมีความสำคัญอย่างยิ่งสำหรับแอปพลิเคชันWeb-to-print

เลขสามเท่าหกเหลี่ยม

เลข ฐานสิบหก (หรือแปดหลัก) ประกอบด้วยสามไบต์ (หรือสี่ไบต์) เรียกว่า " hex triplet"ซึ่งใช้ในHTML , CSS , SVGและแอปพลิเคชันคอมพิวเตอร์อื่นๆ เพื่อแสดงสี ไบต์เหล่านี้แทนส่วนประกอบสีแดง สีเขียว และสีน้ำเงินของสี (ไบต์ที่สี่ซึ่งเป็นตัวเลือก หมายถึงช่องอัลฟา ) หนึ่งไบต์แทนตัวเลขในช่วง 00 ถึง FF (ในสัญกรณ์ฐานสิบหก) หรือ 0 ถึง 255 ในสัญกรณ์ฐานสิบ ซึ่งแสดงถึงความเข้มต่ำสุด (0) ถึงสูงสุด (255) ของส่วนประกอบสีแต่ละส่วน ดังนั้นสีบนเว็บจึงระบุสีในระบบสี RGB 24 บิตเลขฐานสิบหกถูกสร้างขึ้นโดยการต่อไบต์สามไบต์ในสัญกรณ์ฐานสิบหกตามลำดับต่อไปนี้:

  • ไบต์ที่ 1: ค่าสีแดง (ชนิดสีแดง)
  • ไบต์ที่ 2: ค่าสีเขียว (ชนิดสีเขียว)
  • ไบต์ที่ 3: ค่าสีน้ำเงิน (ชนิดสีน้ำเงิน)
  • ไบต์ที่ 4: ค่าอัลฟ่า (ความโปร่งใส, ตัวเลือกเสริม)

ตัวอย่างเช่น พิจารณาสีที่ค่าสีแดง/เขียว/น้ำเงินเป็นเลขฐานสิบ: แดง=123, เขียว=58, น้ำเงิน=30 (สีน้ำตาลไม้เนื้อแข็ง) เลขฐานสิบ 123, 58 และ 30 เทียบเท่ากับเลขฐานสิบหก 7B, 3A และ 1E ตามลำดับ เลขฐานสิบหกสามตัวนี้ได้มาจากการนำเลขฐานสิบหกหกหลักมาต่อกัน ในตัวอย่างนี้คือ 7B3A1E

ถ้าค่าสีใดค่าหนึ่งในสามค่ามีค่าน้อยกว่า 10 ในเลขฐานสิบหก (16 ในเลขฐานสิบ) จะต้องแทนค่าด้วยเลขศูนย์นำหน้าเพื่อให้ชุดตัวเลขสามหลักนั้นมีจำนวนหลักครบหกหลักเสมอ ตัวอย่างเช่น ชุดตัวเลขฐานสิบ 4, 8, 16 จะถูกแทนด้วยเลขฐานสิบหก 04, 08, 10 ซึ่งจะได้เป็นชุดตัวเลขฐานสิบหก 040810

จำนวนสีที่สามารถแสดงได้ด้วยระบบนี้คือ 2⁵⁶³ , 16⁶ หรือ 2²⁴ = 16,777,216 สี

รูปแบบเลขฐานสิบหกแบบย่อ

สามารถใช้รูปแบบย่อที่มีตัวเลขสามหลัก (เลขฐานสิบหก) หรือสี่หลักได้[ 5 ]แต่อาจทำให้เกิดข้อผิดพลาดได้หากซอฟต์แวร์หรือสคริปต์การบำรุงรักษาคาดหวังเฉพาะรูปแบบเต็มเท่านั้น การขยายรูปแบบนี้ไปเป็นรูปแบบหกหลักนั้นทำได้ง่ายเพียงแค่ทำซ้ำตัวเลขแต่ละตัว: 09C กลายเป็น 0099CC ดังที่แสดงใน ตัวอย่าง CSS ต่อไปนี้ :

. หลักสามหลัก{ สี: #09C ; } . หลักหกหลัก{ สี: #0099CC ; } /* สีเดียวกับด้านบน */

รูปแบบย่อนี้ลดจำนวนสีในจานสีเหลือเพียง 4,096 สี ซึ่งเทียบเท่ากับสี 12 บิต ต่างจากสี 24 บิตที่ใช้รูปแบบหกหลักเต็ม (16,777,216 สี) ข้อจำกัดนี้เพียงพอสำหรับเอกสารข้อความจำนวนมาก

การแปลงค่า RGB เป็นเลขฐานสิบหก

ค่า RGB โดยทั่วไปจะอยู่ในช่วง 0–255 หากอยู่ในช่วง 0–1 จะต้องคูณค่าด้วย 255 ก่อนแปลง จากนั้นนำค่าที่ได้มาหารด้วยสิบหก (การหารจำนวนเต็ม โดยไม่สนใจเศษเหลือ) จะได้ตัวเลขฐานสิบหกหลักแรก (อยู่ระหว่าง 0 ถึง F โดยที่ตัวอักษร A ถึง F แทนตัวเลข 10 ถึง 15 ดู รายละเอียดเพิ่มเติมได้ที่หัวข้อ ฐานสิบหก ) เศษที่เหลือจะได้ตัวเลขฐานสิบหกหลักที่สอง ตัวอย่างเช่น ค่า RGB 58 (ดังแสดงในตัวอย่างก่อนหน้านี้ของเลขฐานสิบหกสามตัว) หารได้ 3 กลุ่ม กลุ่มละ 16 ดังนั้นหลักแรกคือ 3 เศษเหลือคือ 10 จะได้เลขฐานสิบหก 3A ในทำนองเดียวกัน ค่า RGB 201 หารได้ 12 กลุ่ม กลุ่มละ 16 ดังนั้นหลักแรกคือ C เศษเหลือคือ 9 จะได้เลขฐานสิบหก C9 กระบวนการนี้จะทำซ้ำสำหรับค่าสีทั้งสามค่า

การแปลงระหว่างฐานตัวเลขเป็นคุณสมบัติทั่วไปของเครื่องคิดเลข ทั้งรุ่นพกพาและเครื่องคิดเลขซอฟต์แวร์ที่มาพร้อมกับระบบปฏิบัติการ สมัยใหม่ส่วนใหญ่ นอกจากนี้ยังมีเครื่องมือบนเว็บที่ใช้สำหรับการแปลงค่าสีโดยเฉพาะอีกด้วย

ชื่อสี HTML

แผนภาพที่แสดงสี HTML พื้นฐานทั้งหมด
แผนภาพที่แสดงสี HTML พื้นฐานทั้งหมด

ข้อกำหนด ล่าสุด ของ W3Cเกี่ยวกับชื่อสีแยกความแตกต่างระหว่าง สี พื้นฐานและสีเพิ่มเติม[ 6 ]ใน HTML และ XHTML สามารถใช้สีสำหรับข้อความ พื้นหลัง เส้นขอบเฟรม ตาราง และเซลล์ตารางแต่ละเซลล์ได้[ 7 ]

สีพื้นฐาน

สีพื้นฐานมีทั้งหมด 16 สีตามที่กำหนดไว้ใน ข้อกำหนด HTML 4.01 ซึ่งได้รับการอนุมัติในปี 1999 [ 8 ]ดังต่อไปนี้ (กำหนดโดยไม่คำนึงถึงตัวพิมพ์ใหญ่เล็ก):

ชื่อสีตามมาตรฐาน CSS 1–2.0, HTML 3.2–4 และ VGA
ชื่อเลขฐานสิบหก(RGB)สีแดง(RGB)สีเขียว(RGB)สีน้ำเงิน(RGB)เฉดสี(HSL/HSV)วันเสาร์(HSL)แสงสว่าง(HSL)วันเสาร์(HSV)ค่า(HSV)หมายเลข CGA (ชื่อ); ชื่อเล่น
สีขาว#FFFFFF100%100%100%0 °0%100%0%100%15 (สีขาว)
เงิน#C0C0C075%75%75%0 °0%75%0%75%07 (สีเทาอ่อน)
สีเทา#80808050%50%50%0 °0%50%0%50%08 (  สีเทาเข้ม)
สีดำ#0000000%0%0%0 °0%0%0%0%00 (สีดำ)
สีแดง#FF0000100%0%0%0 °100%50%100%100%12 (  สีแดงเข้ม)
สีแดงเข้ม#80000050%0%0%0 °100%25%100%50%04 (สีแดงอ่อน)
สีเหลือง#FFFF00100%100%0%60 °100%50%100%100%14 (สีเหลือง)
มะกอก#80800050%50%0%60 °100%25%100%50%06 (สีน้ำตาล)
มะนาว#00FF000%100%0%120 °100%50%100%100%10 (  สีเขียวเข้ม); สีเขียว
สีเขียว#0080000%50%0%120 °100%25%100%50%02 (  สีเขียวอ่อน)
อควา#00FFFF0%100%100%180 °100%50%100%100%11 (  สีฟ้าเข้ม); สีฟ้า
สีเขียวอมฟ้า#0080800%50%50%180 °100%25%100%50%03 (  สีฟ้าอ่อน)
สีฟ้า#0000FF0%0%100%240 °100%50%100%100%09 (  สีน้ำเงินเข้ม)
กองทัพเรือ#0000800%0%50%240 °100%25%100%50%01 (  สีน้ำเงินอ่อน)
ฟูเชีย#FF00FF100%0%100%300 °100%50%100%100%13 (  สีม่วงแดงเข้ม); สีม่วงแดง
สีม่วง#80008050%0%50%300 °100%25%100%50%05 (  สีม่วงอ่อน)

สีทั้ง 16 สีนี้ถูกระบุว่าเป็น sRGB และรวมอยู่ในข้อกำหนด HTML 3.0 ซึ่งระบุว่าเป็น "สีมาตรฐาน 16 สีที่รองรับโดย จานสี VGA ของ Windows " [ 9 ]

สีเพิ่มเติม

ชื่อสีของ X11 ในรูปแบบ SVG
ชื่อสีของ X11 ในรูปแบบ SVG
สีที่ระบุชื่อในรูปแบบ SVG1.1 พร้อมรหัสเลขฐานสิบหก/ฐานสิบของ sRGB และรหัส HSL ที่ความละเอียด UHD (4K)
สีที่ระบุชื่อในรูปแบบ SVG1.1 พร้อมรหัสเลขฐานสิบหก/ฐานสิบของ sRGB และรหัส HSL ที่ความละเอียด UHD (4K)

สีที่ขยายออกไปเป็นผลมาจากการรวมข้อกำหนดจาก HTML 4.01, CSS 2.0, SVG 1.0 และ CSS3 User Interfaces (CSS3 UI) [ 6 ]

เว็บเบราว์เซอร์แต่ละตัวกำหนดสีไว้หลายสีเบราว์เซอร์บางตัวอาจไม่รู้จักสีทั้งหมดเหล่านี้ แต่ตั้งแต่ปี 2005 เป็นต้นมา เบราว์เซอร์กราฟิกทั่วไปที่ทันสมัยทั้งหมดรองรับสีทั้งหมดในรายการสีเหล่านี้ สีหลายสีมาจากรายการชื่อสี X11ที่แจกจ่ายมาพร้อมกับระบบ X Window Systemสีเหล่านี้ได้รับการกำหนดมาตรฐานโดยSVG 1.0และได้รับการยอมรับจาก เอเจนต์ผู้ใช้ SVG Fullแต่ไม่ได้เป็นส่วนหนึ่งของSVG Tiny

รายการสีที่จัดส่งมาพร้อมกับผลิตภัณฑ์ X11 แตกต่างกันไปตามการใช้งานและขัดแย้งกับชื่อ HTML บางชื่อ เช่น สีเขียว สีของ X11 ถูกกำหนดเป็นRGB แบบง่าย (ดังนั้นจึงไม่มีพื้นที่สีเฉพาะ) แทนที่จะเป็นsRGBซึ่งหมายความว่ารายการสีที่พบใน X11 (เช่น ใน /usr/lib/X11/rgb.txt) ไม่ควรนำไปใช้โดยตรงเพื่อเลือกสีสำหรับเว็บ[ 10 ]

รายการสี "X11" บนเว็บจากข้อกำหนด CSS3 พร้อมด้วยค่าเลขฐานสิบหกและเลขฐานสิบเทียบเท่า แสดงอยู่ด้านล่าง เปรียบเทียบรายการตามตัวอักษรในมาตรฐาน W3C ซึ่งรวมถึงคำพ้องความหมายทั่วไป: aqua (ชื่อมาตรฐาน HTML4/CSS 1.0) และcyan (ชื่อ sRGB ทั่วไป), fuchsia (ชื่อมาตรฐาน HTML4/CSS 1.0) และmagenta (ชื่อ sRGB ทั่วไป), gray (ชื่อมาตรฐาน HTML4/CSS 1.0) และ grey [ 11 ] [ 12 ]

ชื่อHTMLอาร์จีบี
เฮกซ์ทศนิยม
สีชมพู
สีม่วงแดงปานกลางซี71585199, 21, 133
สีชมพูเข้มFF1493255, 20, 147
สีม่วงอ่อนแดงDB7093219, 112, 147
สีชมพูฮอตพิงค์FF69B4255, 105, 180
สีชมพูอ่อนเอฟบี6ซี1255, 182, 193
สีชมพูFFC0CB255, 192, 203
สีแดง
สีแดงเข้ม8B0000139, 0, 0
สีแดงFF0000255, 0, 0
อิฐทนไฟบี22222178, 34, 34
สีแดงเข้มดีซี143ซี220, 20, 60
อินเดียนเรดซีดี5ซี5ซี205, 92, 92
ไลท์คอรัลเอฟ08080240, 128, 128
ปลาแซลมอนFA8072250, 128, 114
ดาร์กแซลมอนอี9967เอ233, 150, 122
แซลมอนอ่อนเอฟเอฟเอ07เอ255, 160, 122
สีส้ม
สีส้มแดงFF4500255, 69, 0
มะเขือเทศFF6347255, 99, 71
สีส้มเข้มFF8C00255, 140, 0
ปะการังFF7F50255, 127, 80
ส้มเอฟเอฟเอ500255, 165, 0
สีเหลือง
สีกากีเข้มบีดีบี76บี189, 183, 107
ทองเอฟดี700255, 215, 0
กากีF0E68C240, 230, 140
พีชพัฟเอฟดีเอบี9255, 218, 185
สีเหลืองFFFF00255, 255, 0
โกลเด้นร็อดสีอ่อนอีอีอี8เอเอ238, 232, 170
แตะFFE4B5255, 228, 181
ปาปาย่าวิปเอฟเอฟดี5255, 239, 213
สีเหลืองทองอ่อนฟาฟัด2250, 250, 210
เลมอนชีฟฟอนFFFACD255, 250, 205
สีเหลืองอ่อนFFFFE0255, 255, 224
สีน้ำตาล
สีแดงเข้ม800000128, 0, 0
สีน้ำตาลเอ52เอ2เอ165, 42, 42
แซดเดิลบราวน์8B4513139, 69, 19
เซียนน่าA0522D160, 82, 45
ช็อคโกแลตดี2691อี210, 105, 30
ดาร์คโกลเด้นร็อดบี8860บี184, 134, 11
เปรูซีดี853เอฟ205, 133, 63
โรซี่บราวน์บีซี8เอฟ8เอฟ188, 143, 143
โกลเด้นร็อดดาเอเอ520218, 165, 32
แซนดี้บราวน์เอฟ4เอ460244, 164, 96
แทนดี2บี48ซี210, 180, 140
เบอร์ลีวูดดีบี887222, 184, 135
ข้าวสาลีเอฟ5เดบ3245, 222, 179
นาวาโฮไวท์FFDEAD255, 222, 173
บิสก์FFE4C4255, 228, 196
อัลมอนด์ลวกFFEBCD255, 235, 205
ไหมข้าวโพดFFF8DC255, 248, 220
ชื่อHTMLอาร์จีบี
เฮกซ์ทศนิยม
สีม่วง สีม่วงอ่อน และสีม่วงแดง
คราม4B008275, 0, 130
สีม่วง800080128, 0, 128
สีม่วงเข้ม8B008B139, 0, 139
ดาร์กไวโอเล็ต9400D3148, 0, 211
สีน้ำเงินเข้มอมเทา483D8B72, 61, 139
บลูไวโอเล็ต8A2BE2138, 43, 226
ดาร์กออร์คิด9932ซีซี153, 50, 204
ฟูเชียFF00FF255, 0, 255
แมเจนต้าFF00FF255, 0, 255
สีน้ำเงินอมเทา6A5ACD106, 90, 205
สีน้ำเงินอมเทาขนาดกลาง7B68EE123, 104, 238
กล้วยไม้ขนาดกลางBA55D3186, 85, 211
สีม่วงปานกลาง9370DB147, 112, 219
กล้วยไม้DA70D6218, 112, 214
ไวโอเล็ตอีอี82อีอี238, 130, 238
ลูกพลัมดีดีเอ0ดี221, 160, 221
ต้นธิสเซิลดี8บีเอฟดี8216, 191, 216
ลาเวนเดอร์อี6อี6เอฟเอ230, 230, 250
สีน้ำเงิน
สีน้ำเงินเที่ยงคืน19197025, 25, 112
กองทัพเรือ0000800, 0, 128
สีน้ำเงินเข้ม00008B0, 0, 139
สีน้ำเงินกลาง0000CD0, 0, 205
สีฟ้า0000FF0, 0, 255
สีน้ำเงินรอยัลบลู4169E165, 105, 225
สตีลบลู4682B470, 130, 180
ดอดเจอร์บลู1E90FF30, 144, 255
สีน้ำเงินเข้ม00BFFF0, 191, 255
สีฟ้าคอร์นฟลาวเวอร์6495ED100, 149, 237
สีฟ้าอ่อน87CEEB135, 206, 235
สีฟ้าอ่อน87ซีเอฟเอ135, 206, 250
ไลท์สตีลบลูบี0ซี4ดี176, 196, 222
สีฟ้าอ่อนแอด8อี6173, 216, 230
สีฟ้าอ่อนบี0อี0อี6176, 224, 230
สีฟ้าอมเขียว
สีเขียวอมฟ้า0080800, 128, 128
สีน้ำเงินเข้ม008B8B0, 139, 139
สีเขียวทะเลอ่อน20B2AA32, 178, 170
แคดเด็ตบลู5F9EA095, 158, 160
สีเทอร์ควอยซ์เข้ม00CED10, 206, 209
สีเทอร์ควอยซ์กลาง48D1CC72, 209, 204
สีเทอร์ควอยซ์40E0D064, 224, 208
อควา00FFFF0, 255, 255
สีฟ้าอมเขียว00FFFF0, 255, 255
อความารีน7FFFD4127, 255, 212
สีเทอร์ควอยซ์อ่อนอะฟฟี่175, 238, 238
สีฟ้าอ่อนอี0FFFF224, 255, 255
ชื่อHTMLอาร์จีบี
เฮกซ์ทศนิยม
สีเขียว
สีเขียวเข้ม0064000, 100, 0
สีเขียว0080000, 128, 0
สีเขียวมะกอกเข้ม556B2F85, 107, 47
ฟอเรสต์กรีน228B2234, 139, 34
ซีกรีน2E8B5746, 139, 87
มะกอก808000128, 128, 0
สีเขียวมะกอก6B8E23107, 142, 35
สีเขียวทะเลปานกลาง3CB37160, 179, 113
สีเขียวมะนาว32CD3250, 205, 50
มะนาว00FF000, 255, 0
สปริงกรีน00FF7F0, 255, 127
สีเขียวฤดูใบไม้ผลิขนาดกลาง00FA9A0, 250, 154
ดาร์กซีกรีน8FBC8F143, 188, 143
อความารีนขนาดกลาง66CDAA102, 205, 170
เหลืองเขียว9ACD32154, 205, 50
ลอว์นกรีน7CFC00124, 252, 0
ชาร์ทรูส7FFF00127, 255, 0
สีเขียวอ่อน90EE90144, 238, 144
เขียวเหลืองADFF2F173, 255, 47
สีเขียวอ่อน98FB98152, 251, 152
สีขาว
มิสตี้โรสFFE4E1255, 228, 225
สีขาวโบราณเอฟเอบีดี7250, 235, 215
ผ้าลินินFAF0E6250, 240, 230
สีเบจเอฟ5เอฟ5ดีซี245, 245, 220
ไวท์สโมค5F5F5245, 245, 245
ลาเวนเดอร์บลัชเอฟเอฟ0เอฟ5255, 240, 245
โอลด์เลซเอฟดีเอฟ5อี6253, 245, 230
อลิซบลูเอฟ0เอฟ8เอฟเอฟ240, 248, 255
เปลือกหอยเอฟเอฟ5อีอี255, 245, 238
โกสต์ไวท์เอฟ8เอฟ8เอฟเอฟ248, 248, 255
ฮันนี่ดิวเอฟ0ฟฟ0240, 255, 240
ดอกไม้สีขาวเอฟเอฟเอฟเอเอฟ0255, 250, 240
อะซัวร์ฟฟฟฟ240, 255, 255
มินต์ครีมเอฟ5เอฟเอฟเอฟเอ245, 255, 250
หิมะFFFAFA255, 250, 250
งาช้างฟฟฟฟ0255, 255, 240
สีขาวFFFFFF255, 255, 255
สีเทาและสีดำ
สีดำ0000000, 0, 0
สีเทาเข้ม2F4F4F47, 79, 79
สีเทาเข้ม696969105, 105, 105
สีเทาเข้ม708090112, 128, 144
สีเทา808080128, 128, 128
สีเทาอ่อน778899119, 136, 153
สีเทาเข้มเอ9เอ9เอ9169, 169, 169
เงินซีซีซี0192, 192, 192
สีเทาอ่อนดี3ดี3ดี3211, 211, 211
เกนส์โบโรดีซีดีซีดีซี220, 220, 220

สี CSS

ข้อกำหนดCascading Style Sheetsกำหนดจำนวนสีที่มีชื่อเท่ากับข้อกำหนด HTML 4 กล่าวคือสี HTML 16 สี และสี 124 สีจากรายการสี Netscape X11รวมเป็นชื่อทั้งหมด 140 ชื่อที่ได้รับการยอมรับโดย Internet Explorer (IE) 3.0 และ Netscape Navigator 3.0 [ 13 ] Blooberry.com ตั้งข้อสังเกตว่า Opera 2.1 และ Safari 1 ยังรวมรายการชื่อสี 140 ชื่อที่ขยายของ Netscape ด้วย แต่ต่อมาพบว่ามี 14 ชื่อที่ไม่รวมอยู่ใน Opera 3.5 บน Windows 98 [ 14 ]

ใน CSS 2.1 สี 'ส้ม' (หนึ่งใน 140 สี) ถูกเพิ่มเข้าไปในส่วนที่มีสี HTML4 16 สี เป็นสีที่ 17 [ 15 ]ข้อกำหนด CSS 3.0 ไม่ได้รวมสีส้ม ไว้ ในส่วน "คำหลักสี HTML4" ซึ่งถูกเปลี่ยนชื่อเป็น "คำหลักสีพื้นฐาน" [ 16 ]ในเอกสารอ้างอิงเดียวกัน ส่วน "คำหลักสี SVG" ถูกเปลี่ยนชื่อเป็น "คำหลักสีเพิ่มเติม" หลังจากเริ่มต้นเป็น "คำหลักสี X11" ในร่างงานก่อนหน้านี้[ 17 ]ร่างงานสำหรับโมดูลสีระดับ 4 รวมส่วนพื้นฐานและส่วนเพิ่มเติมเข้าด้วยกันในส่วน "สีที่มีชื่อ" ที่เรียบง่าย[ 18 ]

CSS 2, SVGและ CSS 2.1 อนุญาตให้ผู้เขียนเว็บใช้สีระบบซึ่งเป็นชื่อสีที่มีค่ามาจากระบบปฏิบัติการโดยเลือกสีข้อความที่ไฮไลต์ของระบบปฏิบัติการ หรือสีพื้นหลังสำหรับตัวควบคุม tooltip ซึ่งช่วยให้ผู้เขียนเว็บสามารถจัดรูปแบบเนื้อหาให้สอดคล้องกับระบบปฏิบัติการของตัวแทนผู้ใช้ได้[ 19 ]โมดูลสีCSS3 ได้ ยกเลิกการใช้สีระบบและหันมาใช้คุณสมบัติ CSS3 UI System Appearance แทน[ 20 ] [ 21 ]ซึ่งต่อมาก็ถูกยกเลิกจาก CSS3 เช่นกัน[ 22 ]

ตัวอย่างคำหลักสีของระบบ
รูปร่างคำหลัก
ข้อความลิงก์
เยี่ยมชมข้อความ
แอคทีฟเท็กซ์
ไฮไลท์
เครื่องหมาย

ข้อกำหนด CSS3 ยังแนะนำ ค่า พื้นที่สี HSLให้กับสไตล์ชีตด้วย: [ 23 ]

/* โมเดล RGB */ p { color : #F00 } /* #rgb */ p { color : #FF0000 } /* #rrggbb */ p { color : rgb ( 255 , 0 , 0 ) } /* ช่วงจำนวนเต็ม 0 - 255 */ p { color : rgb ( 100 % , 0 % , 0 % ) } /* ช่วงค่าทศนิยม 0.0% - 100.0% *//* RGB พร้อมช่องอัลฟา เพิ่มใน CSS3 */ p { color : rgba ( 255 , 0 , 0 , 0.5 ) } /* ความทึบ 50% โปร่งแสง *//* โมเดล HSL เพิ่มใน CSS3 */ p { color : hsl ( 0 , 100 % , 50 % ) } /* สีแดง */ p { color : hsl ( 120 , 100 % , 50 % ) } /* สีเขียว */ p { color : hsl ( 120 , 100 % , 25 % ) } /* สีเขียวเข้ม */ p { color : hsl ( 120 , 100 % , 75 % ) } /* สีเขียวอ่อน */ p { color : hsl ( 120 , 50 % , 50 % ) } /* สีเขียวพาสเทล *//* โมเดล HSL พร้อมช่องอัลฟา */ p { color : hsla ( 120 , 100 % , 50 % , 1 ) } /* สีเขียว */ p { color : hsla ( 120 , 100 % , 50 % , 0.5 ) } /* สีเขียวโปร่งแสง */ p { color : hsla ( 120 , 100 % , 50 % , 0.1 ) } /* สีเขียวโปร่งแสงมาก */

CSS ยังรองรับสีพิเศษtransparentซึ่งแสดงค่าอัลฟ่าเป็นศูนย์ โดยค่าเริ่มต้นtransparentจะแสดงผลเป็นสีดำที่มองไม่เห็น: rgba(0, 0, 0, 0)มีการแนะนำสีนี้ใน CSS1 แต่ขอบเขตการใช้งานได้ขยายออกไปในเวอร์ชันต่อๆ มา[ 23 ]

สี CSS 4

ข้อกำหนด CSS Color ระดับ 4 ได้แนะนำรูปแบบสี CSS ใหม่หลายรูปแบบ[ 24 ]

นอกจากวิธีการเขียนสีแบบใหม่แล้ว ยังมีการแนะนำแนวคิดการผสมสีในพื้นที่สีที่ไม่ใช่sRGBซึ่งเป็นขั้นตอนแรกในการแก้ไขปัญหาที่รู้จักกันดีในเรื่องการไล่ระดับสี นอกจากนี้ยังมีการเพิ่ม ส่วนต่างๆ ที่อธิบายทฤษฎีสีและการดำเนินการทั่วไป เช่นการแมปขอบเขตสีเพื่อช่วยในการใช้งาน[ 24 ]

p { color : #F80A } /* #rgba */ p { color : #FF8800 AA } /* #rrggbbaa */ p { color : rgb ( 255.0 136.0 0.0 / 0.667 ) } /* ช่วงค่า float 0.0 - 255.0 สำหรับความแม่นยำสูงกว่า 8 บิต */ p { color : rgb ( 100 % 53.3 % 0 % / 66.7 % ) } /* ช่วงค่า float 0.0% - 100.0% */ p { color : color ( sRGB 1 0.533 0 / 0.667 ) } /* ฟังก์ชัน color() พร้อมพื้นที่สี */

สีที่ไม่ขึ้นกับอุปกรณ์

CSS Color 4 นำเสนอรูปแบบต่างๆ สำหรับสีที่ไม่ขึ้นกับอุปกรณ์ซึ่งสามารถแสดงสีที่มองเห็นได้ทั้งหมด (บนหน้าจอที่มีความสามารถ) รวมถึง: [ 25 ]

พื้นที่สีที่กำหนดไว้ล่วงหน้า

นอกจากนี้ ยังมีการแนะนำ พื้นที่RGBจำนวนหนึ่ง ที่มี ขอบเขตสีที่กว้างกว่าsRGBผ่านcolor()ฟังก์ชันใหม่นี้ด้วย: [ 25 ]

ตัวแปรเชิงเส้นของ sRGB ยังถูกกำหนดไว้สำหรับการผสมสีด้วย[ 24 ]

รูปแบบอื่นๆ

เมื่อวันที่ 21 มิถุนายน 2014 CSS WGได้เพิ่มสี RebeccaPurple ลงใน Editor's Draft ของโมดูล Colors ระดับ 4 เพื่อเป็นการระลึกถึง Rebecca ลูกสาวของ Eric Meyerซึ่งเสียชีวิตเมื่อวันที่ 7 มิถุนายน 2014 ซึ่งตรงกับวันเกิดครบรอบ 6 ปีของเธอ[ 26 ]

เพิ่มสีในโมดูลสี CSS4
ชื่อเลขฐานสิบหก(RGB)สีแดง(RGB)สีเขียว(RGB)สีน้ำเงิน(RGB)เฉดสี(HSL/HSV)วันเสาร์(HSL)แสงสว่าง(HSL)วันเสาร์(HSV)ค่า(HSV)
รีเบคก้าเพอร์เพิล#66339940%20%60%270 °50%40%67%60%

CSS4 ยังแนะนำโมเดลสี HWBเป็นทางเลือกแทน HSL/HSV อีกด้วย [ 18 ]

สี CSS 5

ข้อกำหนด ร่าง CSS Color 5 [ 27 ]แนะนำไวยากรณ์สำหรับการผสมและการจัดการสีที่มีอยู่ รวมถึง:

  • ฟังก์ชันcolor-mix()สำหรับผสมสี
  • ไวยากรณ์สีเชิงสัมพัทธ์สำหรับการปรับแต่งส่วนประกอบของสีที่มีอยู่

พื้นที่สีแบบกำหนดเองยังได้รับการสนับสนุนผ่านโปรไฟล์ ICC ด้วย ซึ่งช่วยให้สามารถใช้CMYKบนหน้าเว็บได้[ 27 ]

สีที่ปลอดภัยต่อการใช้งานบนเว็บ

ในช่วงกลางทศวรรษ 1990 จอแสดงผลจำนวนมากสามารถแสดงสีได้เพียง 256 สี[ 28 ]ซึ่งกำหนดโดยฮาร์ดแวร์หรือสามารถเปลี่ยนแปลงได้โดย "ตารางสี" เมื่อพบสี (เช่น ในภาพ) ที่ไม่มีอยู่ จะต้องใช้สีอื่นแทน ซึ่งทำได้โดยการใช้สีที่ใกล้เคียงที่สุดหรือโดยการใช้การกระจายสี

มีการพยายามสร้างชุดสี "มาตรฐาน" หลายครั้ง จำเป็นต้องมีชุดสีที่สามารถแสดงผลได้โดยไม่ต้องใช้เทคนิค Dithering บนจอแสดงผล 256 สี จึงเลือกเลข 216 ส่วนหนึ่งเป็นเพราะระบบปฏิบัติการคอมพิวเตอร์มักจะสงวนสีไว้ 16-20 สีสำหรับใช้งานเอง และยังเลือกเพราะทำให้มีเฉดสีแดง เขียว และน้ำเงินที่เท่ากัน 6 เฉด (6 × 6 × 6 = 216) แต่ละเฉดมีค่าตั้งแต่ 00 ถึง FF (รวมค่าขอบทั้งสองด้วย)

รายการสีถูกนำเสนอราวกับว่ามีคุณสมบัติพิเศษที่ทำให้ไม่เกิดการกระจายสี แต่ในจอแสดงผล 256 สี แอปพลิเคชันต่างๆ สามารถตั้งค่าจานสีตามที่เลือกได้ โดยปล่อยให้สีที่เหลือเกิดการกระจายสี สีเหล่านี้ถูกเลือกมาโดยเฉพาะเพราะตรงกับจานสีที่แอปพลิเคชันเบราว์เซอร์ต่างๆ เลือกใช้ ซึ่งจานสีที่ใช้ในเบราว์เซอร์ต่างๆ นั้นไม่แตกต่างกันมากนัก

สี "ปลอดภัยสำหรับเว็บ" มีข้อบกพร่องตรงที่ ในระบบอย่างเช่นX11ที่ใช้จานสีร่วมกันระหว่างแอปพลิเคชัน เบราว์เซอร์จะจัดสรรลูกบาศก์สีขนาดเล็กกว่า (5×5×5 หรือ 4×4×4) ซึ่งทำให้สี "ปลอดภัยสำหรับเว็บ" เกิดการกระจายสีไม่สม่ำเสมอในระบบดังกล่าว จึงต้องใช้ภาพที่มีช่วงสีที่กว้างกว่าและปล่อยให้เบราว์เซอร์ทำการปรับปริมาณสีเองหากจำเป็น แทนที่จะต้องสูญเสียคุณภาพจากการปรับปริมาณสีสองครั้ง

ในช่วงทศวรรษ 2000 การใช้จอแสดงผล 256 สีในคอมพิวเตอร์ส่วนบุคคลลดลงอย่างมาก โดยหันมาใช้จอแสดงผล 24 บิต ( TrueColor ) แทน [ 29 ]และสี "ปลอดภัยสำหรับเว็บ" ก็ไม่เป็นที่นิยมใช้บนเว็บอีกต่อไป

สีที่ "ปลอดภัยสำหรับเว็บ" อาจไม่มีชื่อมาตรฐานทั้งหมด แต่แต่ละสีสามารถระบุได้ด้วยค่าRGBสามค่า โดยแต่ละองค์ประกอบ (แดง เขียว และน้ำเงิน) จะใช้ค่าใดค่าหนึ่งจากหกค่าในตารางต่อไปนี้ (จากทั้งหมด 256 ค่าที่เป็นไปได้สำหรับแต่ละองค์ประกอบในระบบสี 24 บิตเต็มรูปแบบ)

แต่ละสีมี 6 เฉดสี
สำคัญเฮกซ์ทศนิยมเศษส่วน
00000
333510.2
6661020.4
9991530.6
C (12)ซีซี2040.8
เอฟ (15)เอฟเอฟ2551

ตารางต่อไปนี้แสดงสี "ปลอดภัยสำหรับเว็บ" ทั้งหมด ข้อเสียอย่างหนึ่งของชุดสีที่ปลอดภัยสำหรับเว็บคือช่วงสีอ่อนสำหรับพื้นหลังเว็บเพจมีน้อย ในขณะที่ความเข้มของสีในช่วงต่ำ เช่น สองสีที่เข้มที่สุด มีความคล้ายคลึงกัน ทำให้ยากต่อการแยกแยะ ค่าที่ล้อมรอบด้วยเครื่องหมาย "*" (ดอกจัน) เป็นส่วนหนึ่งของ "ชุดสีที่ปลอดภัยจริงๆ" โปรดดูสีที่ปลอดภัยที่สุดสำหรับเว็บด้านล่าง

ตารางสี

216 สีที่ "ปลอดภัยต่อการใช้งานบนเว็บ"
*000*300600900C00*F00*
*003*303603903ซี03*F03*
006306606906ซี06เอฟ06
009309609909ซี09เอฟ09
00C30 องศาเซลเซียส60 องศาเซลเซียส90 องศาเซลเซียสซี0ซีเอฟ0ซี
*00F*30 องศาฟาเรนไฮต์60 องศาฟาเรนไฮต์90 องศาฟาเรนไฮต์ซีเอฟ*F0F*
030330630930ซี30เอฟ30
033333633933ซี33เอฟ33
036336636936ซี36เอฟ36
039339639939ซี39เอฟ39
03C33 องศาเซลเซียส63 องศาเซลเซียส93 องศาเซลเซียสซี3ซีเอฟ3ซี
03F33F63 องศาฟาเรนไฮต์93 องศาฟาเรนไฮต์ซี3เอฟเอฟ3เอฟ
060360660960ซี60เอฟ60
063363663963ซี63เอฟ63
066366666966ซี66เอฟ66
069369669969ซี69เอฟ69
06C36 องศาเซลเซียส66C96 องศาเซลเซียสซี6ซีเอฟ6ซี
06F36F66F96Fซี6เอฟเอฟ6เอฟ
090390690990ซี90เอฟ90
093393693993ซี93เอฟ93
096396696996ซี96เอฟ96
099399699999ซี99เอฟ99
09C39 องศาเซลเซียส69 องศาเซลเซียส99 องศาเซลเซียสซี9ซีเอฟ9ซี
09F39F69F99Fซี9เอฟเอฟ9เอฟ
0C03C06C09C0ซีซีโอเอฟซี0
0C33C36C39C3ซีซี3เอฟซี3
0C63C66C69C6ซีซี6เอฟซี6
0C93C96C99C9ซีซี9เอฟซี9
0ซีซี3ซีซี6ซีซี9ซีซีซีซีซีเอฟซีซี
0CF3ซีเอฟ6ซีเอฟ9ซีเอฟซีซีเอฟเอฟซีเอฟ
*0F0*3F0*6F0*9F0ซีเอฟโอ*FF0*
0F3*3F3**6F3*9F3ซีเอฟ3*FF3*
*0F6**3F6*6F69F6*ซีเอฟ6**FF6*
0F93F96F99F9ซีเอฟ9FF9
*0FC**3FC*6FC9FCซีเอฟซีเอฟเอฟซี
*0FF**3FF**6FF*9FFซีเอฟเอฟ*FFF*

รหัสสีแต่ละรหัสที่ระบุไว้เป็นตัวย่อของค่า RGB ตัวอย่างเช่น รหัส 609 เทียบเท่ากับรหัส RGB 102-0-153 หรือรหัส HEX # 660099

สีเว็บที่ปลอดภัยที่สุด

นักออกแบบได้รับการสนับสนุนให้ใช้สี "ปลอดภัยสำหรับเว็บ" ทั้ง 216 สีในเว็บไซต์ของตน เนื่องจากมีจอแสดงผลสี 8 บิตจำนวนมากในขณะที่พัฒนาจานสี 216 สี David Lehn และ Hadley Stern ค้นพบว่ามีเพียง 22 สีจาก 216 สีในจานสีปลอดภัยสำหรับเว็บเท่านั้นที่แสดงผลได้อย่างน่าเชื่อถือโดยไม่ต้องมีการแมปใหม่ที่ไม่สอดคล้องกันบนจอแสดงผลคอมพิวเตอร์ 16 บิตพวกเขาเรียกสีทั้ง 22 สีนี้ว่า "จานสีที่ปลอดภัยอย่างแท้จริง" ซึ่งส่วนใหญ่ประกอบด้วยเฉดสีเขียว เหลือง และฟ้าคราม[ 30 ] [ 31 ]

สีเว็บที่ปลอดภัยที่สุด
อาร์--
-GB
0369ซีเอฟ
00*000**F00*
03*003**F03*
06
09
0 องศาเซลเซียส
0F*00F**F0F*
เอฟ0*0F0**6F0**FF0*
เอฟ3*3F3**6F3**FF3*
เอฟ6*0F6**3F6**ซีเอฟ6**FF6*
เอฟ9
เอฟซี*0FC**3FC*
เอฟเอฟ*0FF**3FF**6FF**FFF*

การเข้าถึง

การเลือกสี

เบราว์เซอร์ และอุปกรณ์ บางชนิดไม่รองรับสี สำหรับจอแสดงผลเหล่านี้ หรือผู้ใช้ที่ตาบอดและตาบอดสี เนื้อหาบนเว็บที่ขึ้นอยู่กับสีอาจใช้งานได้ยากหรือเป็นไปไม่ได้เลย

ไม่ควรระบุสีใดๆ (เพื่อเรียกใช้สีเริ่มต้นของเบราว์เซอร์) หรือควรระบุทั้งสีพื้นหลังและสีพื้นหน้าทั้งหมด (เช่น สีของข้อความธรรมดา ลิงก์ที่ยังไม่ได้เยี่ยมชม ลิงก์ที่วางเมาส์เหนือ ลิงก์ที่ใช้งานอยู่ และลิงก์ที่เยี่ยมชมแล้ว) เพื่อหลีกเลี่ยงเอฟเฟกต์สีดำบนสีดำหรือสีขาวบนสีขาว[ 32 ]

ความแตกต่างของสี

แนวทางการเข้าถึงเนื้อหาเว็บแนะนำอัตราส่วนความคมชัดอย่างน้อย 4.5:1 ระหว่างความสว่างสัมพัทธ์ของข้อความและสีพื้นหลัง[ 33 ]หรืออย่างน้อย 3:1 สำหรับข้อความขนาดใหญ่ การเข้าถึงที่ได้รับการปรับปรุงต้องใช้อัตราส่วนความคมชัดมากกว่า 7:1

อย่างไรก็ตาม การแก้ไขปัญหาการเข้าถึงไม่ได้เป็นเพียงเรื่องของการเพิ่มอัตราส่วนความคมชัดเท่านั้น ดังที่รายงานของWeb Accessibility Initiativeระบุไว้[ 34 ] ผู้อ่าน ที่มีภาวะดิสเล็กเซียจะได้รับประโยชน์มากกว่าจากอัตราส่วนความคมชัดที่ต่ำกว่าค่าสูงสุด คำแนะนำที่พวกเขาอ้างถึงคือสีดำ (#0A0A0A) บนสีขาว (#FFFFE5) และสีดำ (#000000) บนสีครีม (#FAFAC8) มีอัตราส่วนความคมชัด 11.7:1 และ 20.3:1 ตามลำดับ ในบรรดาคู่สีอื่นๆ สีน้ำตาล (#282800) บนสีเขียวเข้ม (#A0A000) มีอัตราส่วนความคมชัด 3.24:1 ซึ่งน้อยกว่า คำแนะนำของ WCAGสีน้ำตาลเข้ม (#1E1E00) บนสีเขียวอ่อน (#B9B900) มีอัตราส่วนความคมชัด 4.54:1 และสีน้ำเงิน (#00007D) บนสีเหลือง (#FFFF00) มีอัตราส่วนความคมชัด 11.4:1 สีที่ระบุในรายงานนี้มีค่าสีที่แตกต่างจากสีบนเว็บที่มีชื่อเดียวกัน

ดูเพิ่มเติม

สรุปเนื้อหา

ข้อมูลสำคัญจากบทความ

ข้อมูลสำคัญเกี่ยวกับ สีเว็บ

สีเว็บหรือที่รู้จักกันในชื่อรหัสเลขฐานสิบหกและรหัสสีคือสีที่ใช้ในการแสดงหน้าเว็บในเวิลด์ไวด์เว็บสามารถอธิบายได้สามวิธี: สีอาจระบุเป็น ชุด ค่า RGBใน รูปแบบ เลขฐานสิบหก...

เลขสามเท่าหกเหลี่ยม

เลข ฐาน สิบหก (หรือแปดหลัก) ประกอบด้วยสาม ไบต์ (หรือสี่ไบต์) เรียกว่า " hex triplet" ซึ่งใช้ใน HTML , CSS , SVG และแอปพลิเคชันคอมพิวเตอร์อื่นๆ เพื่อแสดงสี ไบต์เหล่านี้แทนส่วนประกอบสีแดง สีเขียว และสีน้ำเงินของสี (ไบต์ที่สี่ซึ่งเป็นตัวเลือก หมายถึง ช่องอัลฟา )...

รูปแบบเลขฐานสิบหกแบบย่อ

สามารถใช้รูปแบบย่อที่มีตัวเลขสามหลัก (เลขฐานสิบหก) หรือสี่หลักได้ [ 5 ] แต่อาจทำให้เกิดข้อผิดพลาดได้หากซอฟต์แวร์หรือสคริปต์การบำรุงรักษาคาดหวังเฉพาะรูปแบบเต็มเท่านั้น การขยายรูปแบบนี้ไปเป็นรูปแบบหกหลักนั้นทำได้ง่ายเพียงแค่ทำซ้ำตัวเลขแต่ละตัว: 09C กลายเป็น...

การแปลงค่า RGB เป็นเลขฐานสิบหก

ค่า RGB โดยทั่วไปจะอยู่ในช่วง 0–255 หากอยู่ในช่วง 0–1 จะต้องคูณค่าด้วย 255 ก่อนแปลง จากนั้นนำค่าที่ได้มาหารด้วยสิบหก (การหารจำนวนเต็ม โดยไม่สนใจเศษเหลือ) จะได้ตัวเลขฐานสิบหกหลักแรก (อยู่ระหว่าง 0 ถึง F โดยที่ตัวอักษร A ถึง F แทนตัวเลข 10 ถึง 15 ดู...