ตัวแปลงสี

สี HEX เช่น #FF5733 แปลงเป็น RGB โดยแบ่งเป็นคู่: FF=255 (แดง), 57=87 (เขียว), 33=51 (น้ำเงิน) แต่ละคู่เป็นเลขฐานสิบหก (0-FF) แทนค่า 0-255 ในฐานสิบ ดังนั้น #FF5733 = RGB(255, 87, 51) สำหรับ HEX แบบย่อเช่น #F53 ให้ขยายแต่ละหลัก: #FF5533 ตัวแปลงนี้คำนวณอัตโนมัติ—แค่ป้อนรูปแบบใดก็ได้และรับผลลัพธ์ทันที

RGB (แดง, เขียว, น้ำเงิน) กำหนดสีโดยผสมความเข้มของแสง (แต่ละค่า 0-255) HSL (เฉดสี, ความอิ่มตัว, ความสว่าง) เข้าใจง่ายกว่า: เฉดสีคือตำแหน่งบนวงล้อสี (0-360°), ความอิ่มตัวคือความเข้มของสี (0-100%), และความสว่างคือระดับสว่าง (0-100%) HSL ง่ายกว่าสำหรับการปรับ—เพื่อทำให้สีสว่างขึ้น แค่เพิ่ม L เพื่อลดความอิ่มตัว ลด S

ใช้ HEX (#FF5733) สำหรับสีคงที่—กระชับและรองรับทั่วไป ใช้ RGB หรือ RGBA เมื่อต้องการความโปร่งใส: rgba(255, 87, 51, 0.5) สร้างสีโปร่งใส 50% HSL เหมาะสำหรับการจัดการสีแบบโปรแกรม—การปรับความสว่างหรือความอิ่มตัวทำได้ง่าย CSS สมัยใหม่รองรับทั้งสามรูปแบบเท่าเทียมกัน เลือกตามความอ่านง่ายและว่าต้องการ alpha channel หรือไม่

สีเสริมอยู่ตรงข้ามกันบนวงล้อสี สร้างความคมชัดสูงสุด ใน HSL แค่บวกหรือลบ 180° จากเฉดสี ตัวอย่างเช่น ถ้าสีของคุณมี H=30° (ส้ม) สีเสริมคือ H=210° (น้ำเงิน) รักษา S และ L ให้เท่าเดิม แดง (#FF0000, H=0°) เสริมกับฟ้าอมเขียว (H=180°) ตัวแปลงนี้แสดงค่า HSL ทำให้ง่ายต่อการคำนวณสีเสริม สามสี (+120°) หรือสีเสริมแยก (+150°/+210°)

หน้าจอแตกต่างกันในขอบเขตสี (ช่วงสีที่แสดงได้), การปรับเทียบ และเทคโนโลยีแผง (IPS, OLED, TN) สีเช่น #FF5733 เป็นค่าดิจิทัลที่แม่นยำ แต่จอภาพตีความต่างกันตามโปรไฟล์สีและการตั้งค่า เพื่อสีที่สม่ำเสมอ ใช้จอภาพที่ปรับเทียบด้วยฮาร์ดแวร์ ออกแบบในพื้นที่สี sRGB และทดสอบบนอุปกรณ์หลายตัว สีพิมพ์ใช้ CMYK ซึ่งมีขอบเขตสีน้อยกว่า RGB