HEX, RGB และ HSL ต่างกันอย่างไร?
HEX เป็นตัวแทนเลขฐานสิบหก 6 หลัก (#FF0000) RGB กำหนดสีเป็นค่าแดง/เขียว/น้ำเงิน (rgb(255, 0, 0)) HSL ใช้ค่าโทนสี ความอิ่มตัว และความสว่าง (hsl(0, 100%, 50%))
ควรใช้รูปแบบสีใด?
HEX เป็นที่นิยมที่สุดในการพัฒนาเว็บสำหรับสีที่เรียบง่าย RGB ให้การควบคุมที่แม่นยำเหนือช่องสี HSL เป็นมิตรกับมนุษย์มากที่สุด — ปรับ hue สำหรับสีต่างกัน saturation สำหรับความเข้ม และ lightness สำหรับความสว่าง
ข้อดีของ HSL คืออะไร?
HSL อ่านง่ายกว่าสำหรับมนุษย์ คุณสามารถสร้างชุดสีโดยรักษา S และ L ให้คงที่ในขณะที่เปลี่ยน H ตัวอย่างเช่น hsl(0, 50%, 50%) = แดง, hsl(120, 50%, 50%) = เขียว, hsl(240, 50%, 50%) = น้ำเงิน
ความต่างของสีคืออะไรและทำไมถึงสำคัญ?
ความต่างของสีคือความแตกต่างของความสว่างระหว่างข้อความพื้นหน้าและพื้นหลัง ความต่างที่สูงกว่าทำให้อ่านง่ายขึ้น โดยเฉพาะสำหรับผู้มีปัญหาการมองเห็น แนวทาง WCAG กำหนดอัตราส่วนขั้นต่ำ: 4.5:1 สำหรับข้อความปกติ (AA) และ 7:1 สำหรับการอ่านที่ดีขึ้น (AAA) เครื่องมือนี้คำนวณอัตราส่วนความต่างอัตโนมัติ
ฉันสามารถแปลง CMYK เป็น HEX หรือ RGB ได้หรือไม่?
CMYK (ใช้ในการพิมพ์) ไม่สามารถแปลงเป็น RGB/HEX (ใช้บนหน้าจอ) ได้โดยตรง เพราะใช้ขอบเขตสีที่ต่างกัน การแปลงขึ้นอยู่กับโปรไฟล์สีของคุณ (sRGB, Adobe RGB ฯลฯ) เครื่องมือนี้เน้นรูปแบบที่ใช้บนหน้าจอ (HEX, RGB, HSL) เนื่องจากใช้ขอบเขตสีเดียวกัน สำหรับงานพิมพ์ ควรใช้เครื่องมือแปลง CMYK เฉพาะกับโปรไฟล์สีเป้าหมายของคุณ
Alpha channel ใน RGBA ทำหน้าที่อะไร?
Alpha channel ควบคุมความโปร่งใส ตั้งแต่ 0 (โปร่งใสทั้งหมด) ถึง 1 (ทึบทั้งหมด) RGBA ขยาย RGB ด้วยค่าที่สี่นี้ เครื่องมือนี้รองรับสีทึบใน HEX, RGB และ HSL สำหรับสีโปร่งใส ให้เพิ่มค่า alpha เองใน CSS (เช่น rgba(59, 130, 246, 0.5))
ทำไม HEX และ RGB บางครั้งแสดงสีที่ต่างกันเล็กน้อย?
ไม่ควร — HEX และ RGB แสดงค่าสีที่เหมือนกันทุกประการ แต่ในรูปแบบที่ต่างกัน #FF0000 เท่ากับ rgb(255, 0, 0) หากคุณเห็นความแตกต่าง น่าจะเกิดจากการสอบเทียบ monitor ของคุณ
จะสร้างจานสีที่กลมกลืนกันได้อย่างไร?
ใช้ HSL เพื่อสร้างจานสี: รักษา saturation (S) และ lightness (L) ให้คงที่ในขณะที่เปลี่ยน hue (H) สำหรับสีที่เข้ากัน สำหรับสีที่คล้ายกัน ให้เปลี่ยน H 30–60 องศา สำหรับสีสามส่วน ใช้ค่า H ห่างกัน 120 องศา เครื่องมือนี้ให้คุณสำรวจความสัมพันธ์ของสีแบบโต้ตอบโดยการปรับค่า HSL และดูผลลัพธ์ทันที
sRGB และ Display P3 ต่างกันอย่างไร?
sRGB เป็นพื้นที่สีมาตรฐานสำหรับเนื้อหาเว็บ รองรับช่วงสีที่จำกัด Display P3 (ใช้ในอุปกรณ์ Apple และจอมอนิเตอร์สมัยใหม่) รองรับขอบเขตกว้างกว่า แสดงสีแดงและเขียวที่สดใสกว่า สำหรับการออกแบบเว็บ ควรใช้ค่า sRGB เสมอเพื่อความเข้ากันได้ สี Display P3 จะดูสดใสขึ้นบนหน้าจอที่รองรับ แต่อาจดูซีดบนจอรุ่นเก่า
จะทดสอบสีสำหรับผู้ใช้ที่เป็นโรคตาบอดสีได้อย่างไร?
ใช้อัตราส่วนความต่างเพื่อให้แน่ใจว่าอ่านได้โดยไม่คำนึงถึงการรับรู้สี การผสมผสานความต่างสูงอ่านได้ทั่วถึง หลีกเลี่ยงการพึ่งพาสีเพียงอย่างเดียวในการสื่อสารข้อมูล
ทำไมค่า RGB ของฉันดูแตกต่างกันบนหน้าจอ?
monitor ที่แตกต่างกันมี profile สี ความสว่าง และการตั้งค่าความต่างที่ต่างกัน นอกจากนี้ เบราว์เซอร์อาจแสดงสีต่างกันเล็กน้อย สำหรับการจับคู่สีที่สำคัญ ให้สอบเทียบ monitor ของคุณ
