ทำไมสี "green" ใน CSS จึงเข้มกว่าสีเขียวในตัวเลือกสี RGB

คีย์เวิร์ด green คือ #008000 สีเขียวระดับกลางที่สืบทอดมาจากชุดสี HTML 16 สีแบบเก่า ส่วน #00FF00 ที่อิ่มตัวเต็มที่เรียกว่า lime รายการสี CSS ทั้งหมดก็มีเรื่องน่าแปลกใจคล้ายกัน เช่น gray (#808080) เข้มกว่า darkgray (#A9A9A9)

รูปภาพของฉันถูกอัปโหลดหรือไม่เมื่อดึงพาเลตสี

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

ข้อความเนื้อหาต้องมีอัตราส่วนคอนทราสต์เท่าไร

อย่างน้อย 4.5:1 เพื่อผ่าน WCAG 2.1 ระดับ AA และ 7:1 สำหรับระดับ AAA หัวข้อที่มีขนาด 18 พอยต์ขึ้นไป หรือ 14 พอยต์ตัวหนา ใช้ 3:1 สำหรับระดับ AA ได้ ระบบออกแบบจำนวนมากตั้งเป้า 4.5:1 ทุกกรณี เพื่อให้ข้อความอ่านง่ายบนหน้าจอที่สลัวและกลางแดด

ใช้รหัส HEX 8 หลักที่มีค่าความโปร่งใสได้หรือไม่

ได้ ใน CSS สองหลักสุดท้ายคือช่องอัลฟา ดังนั้น #2F6FED80 คือสีน้ำเงินเดียวกันที่ความทึบประมาณ 50% ตัวเลือกสีนี้ทำงานกับสีทึบ จึงแสดงหกหลัก หากต้องการค่าอัลฟา ให้เติมคู่เลขท้ายเอง

CSS มีชื่อสีทั้งหมดกี่สี

CSS Color Module Level 4 กำหนดคีย์เวิร์ดสีไว้ 148 ชื่อ โดยนับรวมการสะกดซ้ำ เช่น gray และ grey ชื่อล่าสุดคือ rebeccapurple (#663399) ที่เพิ่มเข้ามาในปี 2014 เพื่อระลึกถึง Rebecca Meyer ลูกสาวของ Eric Meyer ผู้เขียน CSS

เครื่องมือเลือกสี

เลือกสีใดก็ได้แล้วรับรหัสสีในทุกรูปแบบที่ใช้กันทั่วไปพร้อมคัดลอกได้ทันที สร้างพาเลตสีที่เข้ากัน ดึงสีหลักจากรูปถ่ายโดยไม่ต้องอัปโหลด และทดสอบว่าคู่สีตัวอักษรกับพื้นหลังผ่านเกณฑ์คอนทราสต์ WCAG หรือไม่

สีที่เลือก#2F6FED

เลือกHEX

เฉดสี (Hue)220°ความอิ่มตัว84%ความสว่าง56%

รหัสสีในทุกรูปแบบ

HEX#2F6FED
RGB47, 111, 237
HSL220°, 84%, 56%
HSB / HSV220°, 80%, 93%
CMYK (ค่าประมาณ)80%, 53%, 0%, 7%
CSS rgb()rgb(47 111 237)
CSS hsl()hsl(220 84% 56%)

ชุดสีจากสีนี้

สีคู่ตรงข้าม

สีใกล้เคียง

สีสามเส้า

สีอ่อน (ผสมสีขาว)

สีเข้ม (ผสมสีดำ)

ชุดสีจากรูปภาพ

รูปภาพของคุณถูกอ่านโดยเบราว์เซอร์ของคุณเองและไม่ถูกอัปโหลด พิกเซลจะถูกสุ่มตัวอย่างบน canvas ในอุปกรณ์นี้ และไม่มีข้อมูลใดถูกส่งออกไป

วางรูปถ่าย ภาพหน้าจอ หรือโลโก้ที่นี่

หกสีหลักของรูปภาพจะแสดงที่นี่ คลิกที่แถบสีเพื่อโหลดสีนั้นลงในตัวเลือกสี

ตรวจสอบคอนทราสต์สี (WCAG 2.1)

สีข้อความ

สีพื้นหลัง

ตัวอย่างข้อความขนาดใหญ่

เป็นมนุษย์สุดประเสริฐเลิศคุณค่า กว่าบรรดาฝูงสัตว์เดรัจฉาน 0123456789

อัตราส่วนคอนทราสต์14.67:1

AA · ข้อความปกติผ่าน
AAA · ข้อความปกติผ่าน
AA · ข้อความขนาดใหญ่ผ่าน
AAA · ข้อความขนาดใหญ่ผ่าน

ข้อความขนาดใหญ่หมายถึงตัวอักษรปกติขนาดอย่างน้อย 18 pt (24 px) หรือตัวหนาขนาด 14 pt (ประมาณ 18.7 px) ระดับ AA ต้องการอัตราส่วน 4.5:1 สำหรับข้อความปกติและ 3:1 สำหรับข้อความขนาดใหญ่ ส่วนระดับ AAA ต้องการ 7:1 และ 4.5:1

ชื่อสี CSS ที่ใช้บ่อย

คีย์เวิร์ดยี่สิบคำที่ทุกเบราว์เซอร์เข้าใจ พร้อมค่า HEX, RGB และ HSL ที่แน่นอน

ชื่อ	HEX	RGB	HSL
`black`	#000000	0, 0, 0	0°, 0%, 0%
`white`	#ffffff	255, 255, 255	0°, 0%, 100%
`gray`	#808080	128, 128, 128	0°, 0%, 50%
`silver`	#c0c0c0	192, 192, 192	0°, 0%, 75%
`red`	#ff0000	255, 0, 0	0°, 100%, 50%
`crimson`	#dc143c	220, 20, 60	348°, 83%, 47%
`maroon`	#800000	128, 0, 0	0°, 100%, 25%
`tomato`	#ff6347	255, 99, 71	9°, 100%, 64%
`coral`	#ff7f50	255, 127, 80	16°, 100%, 66%
`orange`	#ffa500	255, 165, 0	39°, 100%, 50%
`gold`	#ffd700	255, 215, 0	51°, 100%, 50%
`yellow`	#ffff00	255, 255, 0	60°, 100%, 50%
`olive`	#808000	128, 128, 0	60°, 100%, 25%
`green`	#008000	0, 128, 0	120°, 100%, 25%
`teal`	#008080	0, 128, 128	180°, 100%, 25%
`aqua`	#00ffff	0, 255, 255	180°, 100%, 50%
`blue`	#0000ff	0, 0, 255	240°, 100%, 50%
`navy`	#000080	0, 0, 128	240°, 100%, 25%
`purple`	#800080	128, 0, 128	300°, 100%, 25%
`rebeccapurple`	#663399	102, 51, 153	270°, 50%, 40%

HEX, RGB, HSL และ HSB บอกอะไรเกี่ยวกับสี

ทุกสีในหน้านี้อยู่ใน sRGB ซึ่งเป็นปริภูมิสีมาตรฐานของเว็บตั้งแต่เบราว์เซอร์นำมาใช้ในช่วงปลายทศวรรษ 1990 หน้าจอผสมแสงสีแดง สีเขียว และสีน้ำเงิน โดยแต่ละช่องสีมี 256 ระดับ (0–255) ทำให้เกิดสีได้ 16,777,216 สี RGB เขียนตัวเลขทั้งสามค่านี้ตรง ๆ ส่วน HEX เขียนตัวเลขชุดเดียวกันในเลขฐาน 16 ช่องละสองหลัก ดังนั้น #FF6600 คือสีแดง 255 สีเขียว 102 สีน้ำเงิน 0 รูปแบบย่อสามหลักจะใช้แต่ละหลักซ้ำสองครั้ง เช่น #F60 คือ #FF6600

HSL และ HSB (หรือเรียกว่า HSV) อธิบายสีชุดเดียวกันในแบบที่ปรับด้วยมือได้ง่ายกว่า Hue คือมุมบนวงล้อสี: 0° คือสีแดง 120° คือสีเขียว 240° คือสีน้ำเงิน ความต่างอยู่ที่ค่าสุดท้าย ใน HSL ความสว่าง (lightness) 100% คือสีขาวเสมอ และ 50% คือเฉดที่บริสุทธิ์ที่สุดของสีนั้น ส่วนใน HSB ความสว่าง (brightness) 100% คือเฉดบริสุทธิ์ และสีขาวต้องใช้ความอิ่มตัว 0% แอปออกแบบอย่าง Photoshop และ Figma ใช้ HSB ในตัวเลือกสี ขณะที่ CSS รองรับ hsl() โดยตรง จึงแสดงไว้ทั้งสองแบบข้างต้น

ทำไมค่า CMYK จึงเป็นเพียงค่าประมาณ

หน้าจอเพิ่มแสง ส่วนเครื่องพิมพ์ลบแสงด้วยหมึกสีฟ้า ม่วงแดง เหลือง และดำ ทั้งสองระบบครอบคลุมช่วงสีต่างกัน เรียกว่าขอบเขตสี (gamut) สีที่อิ่มตัวมากบนหน้าจอ เช่น สีเขียว RGB สว่าง สีน้ำเงินอิเล็กทริก หรือสีส้มนีออน อยู่นอกช่วงที่หมึกพิมพ์สร้างได้ จึงพิมพ์ออกมาหม่นกว่าที่เห็นบนจอ

ค่า CMYK ที่แสดงที่นี่ใช้การแปลงทางคณิตศาสตร์แบบตรง ๆ โดยไม่มีโปรไฟล์ ICC เหมาะสำหรับใช้ประกอบการสั่งงานคร่าว ๆ แต่ไม่เหมาะกับงานพิมพ์จริง โรงพิมพ์จะแปลงด้วยโปรไฟล์ของกระดาษและเครื่องพิมพ์ เช่น FOGRA39 ในยุโรป หรือ GRACoL ในสหรัฐอเมริกา และสี RGB เดียวกันอาจได้เปอร์เซ็นต์หมึกต่างกันในแต่ละโปรไฟล์ สำหรับงานพิมพ์ ให้ส่งค่า RGB หรือ HEX พร้อมโปรไฟล์ที่โรงพิมพ์ต้องการ

วิธีคำนวณอัตราส่วนคอนทราสต์

WCAG 2.1 เปรียบเทียบความสว่างสัมพัทธ์ของสองสี คือสีที่สว่างกว่าบวก 0.05 หารด้วยสีที่เข้มกว่าบวก 0.05 ผลลัพธ์อยู่ในช่วง 1:1 (สีเหมือนกัน) ถึง 21:1 (ดำบนขาว) ระดับ AA ต้องการอย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ คือ 18 พอยต์ หรือ 14 พอยต์ตัวหนา ระดับ AAA เพิ่มเป็น 7:1 และ 4.5:1 ส่วนองค์ประกอบของส่วนติดต่อผู้ใช้ เช่น เส้นขอบช่องกรอกและไอคอน ต้องมี 3:1 เมื่อเทียบกับพื้นรอบข้างตามเกณฑ์ความสำเร็จ 1.4.11

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

การดึงพาเลตสีจากรูปถ่ายหรือโลโก้

พาเล็ตสีจากรูปภาพอ่านไฟล์ของคุณด้วยแคนวาสของเบราว์เซอร์ ย่อให้ด้านยาวไม่เกิน 200 พิกเซล แล้วจัดกลุ่มพิกเซลที่คล้ายกันด้วยวิธี median-cut ที่ Paul Heckbert อธิบายไว้ในปี 1982 คือแบ่งช่วงสีซ้ำ ๆ ตามช่องสีที่กว้างที่สุดจนเหลือหกกลุ่ม แล้วใช้ค่าเฉลี่ยของแต่ละกลุ่มเป็นตัวอย่างสี พิกเซลโปร่งใสจะถูกข้าม ดังนั้นโลโก้บนพื้นหลังโปร่งใสจะได้สีของตัวโลโก้

เมื่อได้สีแล้ว โลโก้แบบสีเรียบมักใช้งานได้ดีกว่าในรูปแบบเวกเตอร์ ตัวแปลงรูปเป็น SVG จะลากเส้นตามรูปเป็นรูปทรงที่คงสีเดิมไว้ และหากคุณกำลังออกแบบส่วนหัวช่อง เครื่องมือปรับขนาดแบนเนอร์ YouTube จะปรับงานให้พอดี 2560 × 1440 โดยคำนึงถึงพื้นที่ปลอดภัย

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

ทำไมสี "green" ใน CSS จึงเข้มกว่าสีเขียวในตัวเลือกสี RGB: คีย์เวิร์ด green คือ #008000 สีเขียวระดับกลางที่สืบทอดมาจากชุดสี HTML 16 สีแบบเก่า ส่วน #00FF00 ที่อิ่มตัวเต็มที่เรียกว่า lime รายการสี CSS ทั้งหมดก็มีเรื่องน่าแปลกใจคล้ายกัน เช่น gray (#808080) เข้มกว่า darkgray (#A9A9A9)
รูปภาพของฉันถูกอัปโหลดหรือไม่เมื่อดึงพาเลตสี: ไม่ เบราว์เซอร์ของคุณเปิดไฟล์ วาดบนแคนวาสในหน่วยความจำ และวิเคราะห์ที่นั่น ไม่มีการส่งคำขอพร้อมรูปภาพไปที่ใด และเมื่อปิดแท็บ ข้อมูลรูปจะถูกทิ้งไป
ข้อความเนื้อหาต้องมีอัตราส่วนคอนทราสต์เท่าไร: อย่างน้อย 4.5:1 เพื่อผ่าน WCAG 2.1 ระดับ AA และ 7:1 สำหรับระดับ AAA หัวข้อที่มีขนาด 18 พอยต์ขึ้นไป หรือ 14 พอยต์ตัวหนา ใช้ 3:1 สำหรับระดับ AA ได้ ระบบออกแบบจำนวนมากตั้งเป้า 4.5:1 ทุกกรณี เพื่อให้ข้อความอ่านง่ายบนหน้าจอที่สลัวและกลางแดด
ใช้รหัส HEX 8 หลักที่มีค่าความโปร่งใสได้หรือไม่: ได้ ใน CSS สองหลักสุดท้ายคือช่องอัลฟา ดังนั้น #2F6FED80 คือสีน้ำเงินเดียวกันที่ความทึบประมาณ 50% ตัวเลือกสีนี้ทำงานกับสีทึบ จึงแสดงหกหลัก หากต้องการค่าอัลฟา ให้เติมคู่เลขท้ายเอง
CSS มีชื่อสีทั้งหมดกี่สี: CSS Color Module Level 4 กำหนดคีย์เวิร์ดสีไว้ 148 ชื่อ โดยนับรวมการสะกดซ้ำ เช่น gray และ grey ชื่อล่าสุดคือ rebeccapurple (#663399) ที่เพิ่มเข้ามาในปี 2014 เพื่อระลึกถึง Rebecca Meyer ลูกสาวของ Eric Meyer ผู้เขียน CSS