เครื่องมือเลือกสี — รหัสสี Master HEX, RGB และ HSL สำหรับการออกแบบ
สีเป็นองค์ประกอบเดียวที่ทรงพลังที่สุดในการออกแบบภาพ ผลการศึกษาพบว่าสีช่วยเพิ่มการจดจำแบรนด์ได้มากถึง 80% และผู้ใช้สร้างความประทับใจด้วยการมองเห็นครั้งแรกภายใน 90 มิลลิวินาที โดย 62–90% นั้นขึ้นอยู่กับสีเพียงอย่างเดียว ไม่ว่าคุณจะเป็นนักพัฒนาเว็บไซต์ นักออกแบบกราฟิก หรือนักการตลาดดิจิทัล การทำความเข้าใจรหัสสีถือเป็นทักษะพื้นฐาน
HEX กับ RGB กับ HSL — เมื่อใดจึงควรใช้แต่ละรายการ
| รูปแบบ | ดีที่สุดสำหรับ | ตัวอย่าง |
|---|---|---|
| ฐานสิบหก | สไตล์ชีต CSS, รหัสที่คัดลอกได้, แฮนด์ออฟการออกแบบ | #667ee |
| RGB | การควบคุมความทึบ การเรนเดอร์แคนวาส การประมวลผลภาพ | RGB(102, 126, 234) |
| HSL | การสร้างจานสี ปรับความสว่างโดยทางโปรแกรม | เอชเอสแอล(231, 77%, 66%) |
เหตุใดนักออกแบบจึงชอบ HSL สำหรับการสร้าง Palette
HSL (Hue, Saturation, Lightness) เป็นรูปแบบที่ใช้งานง่ายที่สุดสำหรับการสร้างระบบสีที่กลมกลืนกัน หากต้องการสร้างสีแบรนด์แบบสว่าง เพียงเพิ่มค่า L หากต้องการปิดเสียง ให้ลด S คุณสามารถสร้างสเกล 10 เฉดที่สมบูรณ์จากสีพื้นฐานเดียวได้โดยการปรับ L จาก 10 ถึง 90 ในขั้นตอนที่เท่ากัน ซึ่งเป็นสิ่งที่เป็นไปไม่ได้ที่จะทำใน HEX หรือ RGB โดยสังหรณ์ใจ
เคล็ดลับระดับมืออาชีพสำหรับเวิร์กโฟลว์สี
- เลือกโดยตรงจากองค์ประกอบหน้าจอใดก็ได้— ใช้หลอดดูดสีของเราเพื่อสุ่มตัวอย่างสีจากหน้าต่างเบราว์เซอร์ รูปภาพ หรือส่วนประกอบ UI
- ตรวจสอบอัตราส่วนความคมชัด— ความสามารถในการเข้าถึง WCAG AA ต้องใช้อัตราส่วนคอนทราสต์ 4.5:1 สำหรับข้อความเนื้อหา ทดสอบการผสมผสานพื้นหน้าและพื้นหลังของคุณ
- สร้างจานสีที่สอดคล้องกัน— เมื่อคุณพบค่า H ที่ต้องการแล้ว ให้สร้าง 9 เฉดสีที่ L=10, 20, 30...90 เพื่อให้ได้โทเค็นระบบการออกแบบที่สมบูรณ์
- บันทึกสีของแบรนด์ของคุณ— บุ๊กมาร์กหน้าด้วยรหัส HEX ของคุณใน URL เพื่อแชร์สีกับเพื่อนร่วมทีมได้ทันที
- ใช้ HSL สำหรับสถานะโฮเวอร์— ปรับ L เข้มขึ้น 10% เมื่อโฮเวอร์สำหรับปุ่มและลิงก์เพื่อรักษาความกลมกลืนของสี
คำถามที่พบบ่อย
อะไรคือความแตกต่างระหว่าง HEX #000000 และ rgb(0,0,0)?
พวกมันแสดงถึงสีเดียวกัน — สีดำล้วน — ในรูปแบบที่แตกต่างกัน เบราว์เซอร์ปฏิบัติต่อพวกเขาเหมือนกัน HEX มีขนาดกะทัดรัดกว่า RGB มีความชัดเจนมากขึ้น
ฉันสามารถเลือกสีจากภาพได้หรือไม่?
ใช่ — คลิกที่ไอคอนหยดตา และเลือกที่ใดก็ได้บนหน้าจอของคุณ รวมถึงรูปภาพที่เรนเดอร์โดยเบราว์เซอร์ด้วย
ทำไมสีที่พิมพ์ออกมาจึงดูแตกต่างจากสีหน้าจอ?
หน้าจอใช้โมเดลสี RGB (สารเติมแต่ง) เครื่องพิมพ์ใช้ CMYK (ลบ) หากต้องการสีที่แม่นยำในการพิมพ์ ให้แปลงค่า HEX ของคุณเป็น CMYK โดยใช้เครื่องมือระดับมืออาชีพ เช่น Adobe Color