ค้นหาชื่อสี CSS —
ป้อนรหัสสี hex หรือใช้ตัวเลือกสีเพื่อค้นหาชื่อสี CSS4 ที่ใกล้เคียงที่สุด เครื่องมือเปรียบเทียบสีของคุณกับสี CSS ที่มีชื่อมาตรฐาน 148 สีโดยใช้ระยะห่างสีเชิงการรับรู้ และจัดอันดับ 5 สีที่ใกล้เคียงที่สุด เหมาะสำหรับการค้นหาชื่อสีที่อ่านได้สำหรับโค้ดและเอกสาร
5 สี CSS ที่มีชื่อใกล้เคียงที่สุด:
วิธีการทำงาน
สี CSS ที่มีชื่อ: ประวัติโดยย่อ
สี CSS ที่มีชื่อได้พัฒนาผ่านมาตรฐานหลายเวอร์ชัน CSS 1 ดั้งเดิม (1996) กำหนดเพียง 16 สีพื้นฐาน ได้แก่ aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white และ yellow CSS 2 เพิ่ม orange CSS 3 ขยายรายการเป็น 147 สีโดยอิงตามรายการสี X11 ซึ่งสืบย้อนไปยังฐานข้อมูลสีของระบบ X Window ที่ MIT ดูแลรักษาในช่วงทศวรรษ 1980
CSS Color Level 4 เพิ่มชื่อหนึ่งชื่ออีก ได้แก่ rebeccapurple (#663399) สีนี้ถูกเพิ่มเพื่อเป็นเกียรติแก่ Rebecca Alissa Meyer ลูกสาวของนักพัฒนาเว็บ Eric Meyer ที่เสียชีวิตด้วยโรคมะเร็งสมองในปี 2014 ขณะอายุ 6 ปี สีโปรดของเธอคือสีม่วง และกลุ่มทำงาน CSS ลงคะแนนให้รวมชื่อของเธอไว้ในมาตรฐานเพื่อเป็นที่ระลึก ด้วยการเพิ่มนี้ มาตรฐาน CSS4 กำหนดสีที่มีชื่อทั้งหมด 148 สี ซึ่งเป็นชุดครบสมบูรณ์ที่เครื่องมือนี้ค้นหา
วิธีคำนวณระยะห่างสี
การเปรียบเทียบค่า RGB ด้วยระยะทางยุคลิดเพียงอย่างเดียวไม่สอดคล้องกับการรับรู้ของมนุษย์ ตาของเราไวต่อความแตกต่างในสีเขียวมากกว่าสีน้ำเงิน และความไวเปลี่ยนแปลงตลอดช่วงความสว่าง เครื่องมือนี้ใช้สูตรยุคลิดถ่วงน้ำหนักตาม 'Colour metric' ของ Thiadmer Riemersma ซึ่งปรับน้ำหนักของช่อง R, G และ B ตามค่าแดงเฉลี่ย ผลลัพธ์ใกล้เคียงกับวิธีที่มนุษย์รับรู้ความแตกต่างสีจริงๆ มากกว่า
สูตรคือ: ΔE = √[(2 + R̄/256)·ΔR² + 4·ΔG² + (2 + (255-R̄)/256)·ΔB²] โดย R̄ คือส่วนประกอบแดงเฉลี่ยของสองสี นี่เป็นตัวชี้วัดการรับรู้แบบง่าย วิทยาศาสตร์สีมืออาชีพใช้การคำนวณ CIELAB ΔE ที่คำนึงถึงความสว่าง, chroma และสีแยกกัน แต่สำหรับวัตถุประสงค์การตั้งชื่อในทางปฏิบัติ ตัวชี้วัดแบบง่ายให้ผลลัพธ์ที่สัญชาตญาณถูกต้องสำหรับสีส่วนใหญ่
เมื่อไหร่ควรใช้สีที่มีชื่อใน CSS
สีที่มีชื่อมีประโยชน์มากที่สุดสำหรับการสร้างต้นแบบอย่างรวดเร็ว ความสามารถในการอ่านโค้ด และการดีบัก การเขียน `color: tomato` พิมพ์เร็วกว่าและจำง่ายกว่า `color: #FF6347` ยังมีประโยชน์ในบริบทการศึกษา การแสดงข้อมูล (ที่ชื่อเชิงความหมายช่วยสื่อความหมาย) และในระบบออกแบบที่ชุดสีที่มีชื่อจำกัดก่อตัวเป็น palette W3C แนะนำให้ใช้สีที่มีชื่อในตัวอย่างและบทเรียนเพื่อปรับปรุงความสามารถในการอ่าน
สำหรับระบบออกแบบสำหรับโปรดักชัน สีที่มีชื่อแทบไม่ใช่ palette หลัก: ค่า hex แบบกำหนดเอง HSL หรือชื่อ design token เป็นที่นิยมกว่า อย่างไรก็ตาม การรู้จักสีที่มีชื่อใกล้เคียงกับค่าแบบกำหนดเองมีประโยชน์สำหรับเอกสาร การแสดงความคิดเห็นเกี่ยวกับสีในการ review โค้ด และเมื่อคุณต้องการชื่อโดยประมาณอย่างรวดเร็วเพื่อสื่อสารเกี่ยวกับสีด้วยวาจา เครื่องมือนี้เชื่อมช่องว่างโดยค้นหาชื่อ CSS ที่อธิบายสี hex ใดๆ ได้ดีที่สุด
คำถามที่พบบ่อย
›มีสี CSS ที่มีชื่อกี่สี?
CSS Color Level 4 กำหนดสีที่มีชื่อ 148 สี ซึ่งรวมถึงสีพื้นฐาน 16 สีดั้งเดิมจาก CSS 1, orange จาก CSS 2, 130 สีบน X11 จาก CSS 3 และ rebeccapurple ที่เพิ่มใน CSS 4 เพื่อเป็นเกียรติแก่ Rebecca Meyer โปรดทราบว่า aqua และ cyan เป็นนามแฝง (hex เดียวกัน #00FFFF) เช่นเดียวกับ fuchsia และ magenta (#FF00FF)
›ชื่อสี CSS คำนึงถึงตัวพิมพ์ใหญ่-เล็กหรือไม่?
ไม่ ชื่อสี CSS ไม่คำนึงถึงตัวพิมพ์ใหญ่-เล็กตามมาตรฐาน 'Red', 'RED', 'red' และ 'rEd' ล้วนอ้างถึงสีเดียวกัน ตามธรรมเนียม ตัวพิมพ์เล็กเป็นสไตล์ที่พบบ่อยที่สุดใน CSS สมัยใหม่
›rebeccapurple คืออะไร?
rebeccapurple (#663399) ถูกเพิ่มใน CSS Color Level 4 เพื่อรำลึกถึง Rebecca Alissa Meyer ลูกสาวของผู้เชี่ยวชาญ CSS Eric Meyer ที่เสียชีวิตด้วยโรคมะเร็งสมองในปี 2014 ขณะอายุ 6 ปี สีโปรดของเธอคือสีม่วง และกลุ่มทำงาน CSS ได้เชิดชูเธอโดยตั้งชื่อสีตามเธอ นี่เป็นสีเดียวที่เพิ่มใน CSS 4 และเป็นสีที่มีชื่อใหม่สีแรกนับตั้งแต่ CSS 2
›ทำไมสี CSS ที่มีชื่อไม่ครอบคลุมสีที่เป็นไปได้ทั้งหมด?
สีที่มีชื่อ 148 สีเป็นชุดที่คัดสรรจากรายการสี X11 ประวัติศาสตร์ ครอบคลุมเฉดสีทั่วไปแต่ปล่อยให้หลายสีไม่มีชื่อ ไม่มีชื่อ CSS สำหรับเฉดสีน้ำเงิน-เขียว ชมพู-ส้ม หรือน้ำตาล-แดงส่วนใหญ่ สำหรับงานออกแบบที่แม่นยำ จะใช้รหัส hex, rgb() หรือ hsl() แทน
›ความแตกต่างระหว่าง gray และ grey ใน CSS คืออะไร?
ทั้งสองการสะกดได้รับการยอมรับใน CSS 'gray' เป็นการสะกดภาษาอังกฤษอเมริกันอย่างเป็นทางการในมาตรฐาน แต่ 'grey' (ภาษาอังกฤษอังกฤษ) ก็เป็นคำพ้องความหมายที่ถูกต้องสำหรับสีเดียวกัน (#808080) เช่นเดียวกัน 'lightgray'/'lightgrey', 'darkgray'/'darkgrey', 'dimgray'/'dimgrey', 'slategray'/'slategrey' และ 'darkslategray'/'darkslategrey' ล้วนถูกต้อง
›การจับคู่สีที่ใกล้เคียงที่สุดแม่นยำแค่ไหน?
การจับคู่ใช้สูตรระยะห่างเชิงการรับรู้ที่ถ่วงน้ำหนักช่อง RGB ตามความไวของดวงตามนุษย์ สำหรับสีในชีวิตประจำวันส่วนใหญ่ เช่น สีแดง น้ำเงิน เขียวที่อิ่มตัว สีที่มีชื่อใกล้เคียงที่สุดจะรู้สึกถูกต้องตามสัญชาตญาณ สำหรับสีที่หม่นมาก มืด หรือมีโทนน้ำตาล การรับรู้ของมนุษย์มีความแปรปรวนมากกว่าและสีที่มีชื่อ 'ใกล้เคียงที่สุด' อาจรู้สึกผิดในเชิงอัตวิสัย คะแนนระยะห่าง (Δ) ที่แสดงช่วยให้คุณตัดสินว่าการจับคู่ใกล้เคียงแค่ไหน ยิ่งน้อยยิ่งดี
›ฉันสามารถใช้เครื่องมือนี้เพื่อค้นหาชื่อสีที่เข้าถึงได้สำหรับ alt text หรือไม่?
ได้ เครื่องมือนี้มีประโยชน์สำหรับการเขียนชื่อสีใน alt text เอกสาร หรือความคิดเห็นเกี่ยวกับการออกแบบ หากคุณต้องการอธิบายสีขององค์ประกอบ UI ให้กับผู้อ่านที่ไม่สามารถมองเห็นได้ สีที่มีชื่อ CSS ที่ใกล้เคียงที่สุดจะให้ชื่อที่เป็นที่รู้จักกันอย่างกว้างขวาง สำหรับเฉดสีที่เจาะจงมาก ให้รวมชื่อ CSS กับตัวปรับแต่ง (เช่น 'สีน้ำเงินเขียวเข้ม' สำหรับ #008080)
›สี hex ใดมีการจับคู่ที่แน่นอนกับชื่อ CSS?
สี CSS ที่มีชื่อมาตรฐานทั้ง 148 สีจะให้การจับคู่ที่แน่นอน ตัวอย่างทั่วไป: red = #FF0000, blue = #0000FF, white = #FFFFFF, black = #000000, coral = #FF7F50, tomato = #FF6347, skyblue = #87CEEB คุณสามารถตรวจสอบ hex ใดก็ได้โดยป้อนและมองหาข้อความ 'การจับคู่ที่แน่นอน'
เครื่องมือที่เกี่ยวข้อง
อัปเดตล่าสุด: