สร้าง CSS Gradient สวยงามโดยไม่มี "gray dead zone"

 (joshwcomeau.com)
14 คะแนน โดย xguru 2022-01-13 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เมื่อสร้าง linear gradient ที่เปลี่ยนจากสีเหลืองไปเป็นสีน้ำเงิน จะเกิด "gray dead zone" ขึ้นตรงกลาง

→ เพราะอัลกอริทึม linear-gradient ของ CSS ใช้ค่าเฉลี่ยทางคณิตศาสตร์ใน RGB เพื่อกำหนดค่าสีของพิกเซล

→ ใน color space แบบ RGB ถ้าค่า RGB ทั้งหมดเท่ากัน ก็จะกลายเป็นสีระดับ grayscale เสมอ

  • หากคำนวณค่าเฉลี่ยด้วย HSL (Hue / Saturation / Lightness) จะไม่เกิด gray dead zone

  • แต่ถ้าสร้าง gradient ด้วย HSL แบบตรงๆ ก็จะดูสว่างและ vivid เกินไป เพราะ "ไม่ได้คำนึงถึงการรับรู้ของมนุษย์"

→ แม้จะเป็นสีที่มีความสว่างเท่ากัน แต่สีเหลืองจะถูกรับรู้ว่าสว่างกว่า

  • ดังนั้นการใช้โหมดอย่าง HCL ซึ่งจำลองจากการมองเห็นของมนุษย์ อาจให้ผลลัพธ์ที่ดีกว่า

  • ปัญหาคือใน CSS ยังไม่มีฟังก์ชันสำหรับระบุ color mode อย่าง HSL/HCL โดยตรง

→ เนื่องจาก CSS Gradient ไม่ได้ถูกจำกัดไว้แค่ 2 สี จึงแก้ปัญหาได้ด้วยการกำหนดหลายสีตั้งแต่ 10 สีขึ้นไป

  • สามารถใช้ Gradient Generator ที่เผยแพร่ร่วมกันนี้ เพื่อสร้าง CSS gradient ด้วย color mode เช่น LRGB/HSL/HSV/HCL แล้วนำไปใช้งานได้

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
xguru 2022-01-13

เนื้อหาเกี่ยวกับ HSL ได้สรุปไว้ในโพสต์ที่เคยลงก่อนหน้านี้แล้ว