คุณเห็นสีที่ชอบในรูปถ่าย ภาพหน้าจอเว็บไซต์ หรือทรัพย์สินแบรนด์ และต้องการรู้ว่ามันเป็นสีอะไรกันแน่ บางทีคุณกำลังออกแบบเว็บไซต์และต้องการจับคู่กับรูปถ่ายแบรนด์ของลูกค้า บางทีคุณกำลังสร้างงานนำเสนอและต้องการสีที่ส่งเสริมภาพผลิตภัณฑ์ หรือบางทีคุณเป็นนักพัฒนาที่ต้องการรหัส HEX แน่นอนสำหรับสไตล์ชีต CSS เครื่องมือดึงสีให้คุณคลิกพิกเซลใดก็ได้ในภาพและรับค่าสีที่แน่นอนทันที
ทำไมต้องดึงสีจากภาพ?
- ความสม่ำเสมอของแบรนด์ ดึงสีแน่นอนจากโลโก้หรือรูปถ่ายแบรนด์เพื่อใช้ในการออกแบบทั้งหมด ทำให้ทุกอย่างตรงกันอย่างสมบูรณ์แบบ
- การพัฒนาเว็บ รับค่า HEX หรือ RGB ที่แน่นอนที่คุณต้องการสำหรับ CSS และนำไปใช้โดยตรงในโค้ดของคุณ
- การออกแบบตกแต่งภายในและแฟชั่น ระบุสีจากรูปภาพแรงบันดาลใจเพื่อหาสีทาบ้าน ผ้า หรือวัสดุที่เข้ากัน
- ศิลปะและภาพประกอบ สุ่มตัวอย่างสีจากรูปภาพอ้างอิงเพื่อสร้างจานสีที่แม่นยำสำหรับงานศิลปะของคุณ
- การตรวจสอบการเข้าถึง ระบุสีพื้นหน้าและพื้นหลังเพื่อทดสอบอัตราส่วนคอนทราสต์สำหรับการปฏิบัติตาม WCAG
การทำความเข้าใจรูปแบบสี
เมื่อคุณดึงสี คุณจะเห็นมันแสดงในสามรูปแบบ แต่ละแบบมีวัตถุประสงค์ต่างกัน:
- HEX: รหัสหกอักขระที่นำหน้าด้วยสัญลักษณ์ # เช่น #3B82F6 นี่เป็นรูปแบบที่พบบ่อยที่สุดสำหรับการพัฒนาเว็บและเครื่องมือออกแบบ แต่ละคู่ตัวอักษรแทนส่วนประกอบแดง เขียว และน้ำเงินในรูปแบบเลขฐานสิบหก
- RGB: ระบุสีเป็นตัวเลขสามตัวตั้งแต่ 0 ถึง 255 เช่น rgb(59, 130, 246) แต่ละตัวเลขแทนความเข้มของแสงแดง เขียว และน้ำเงิน RGB ใช้กันอย่างแพร่หลายใน CSS โปรแกรมแก้ไขภาพ และจอแสดงผลดิจิตัล
- HSL: กำหนดสีโดยใช้ Hue (0-360 องศาบนวงล้อสี) Saturation (0-100%) และ Lightness (0-100%) เช่น hsl(217, 91%, 60%) HSL มักใช้งานง่ายกว่าสำหรับนักออกแบบเพราะคุณสามารถสร้างรูปแบบต่างๆ ได้ง่ายโดยการปรับความสว่างหรือความอิ่มตัวในขณะที่รักษาเฉดสีเดิม
วิธีใช้เครื่องมือดึงสีของ fileGOD
เครื่องมือดึงสี บน fileGOD ทำให้การดึงสีเป็นเรื่องง่าย:
- ขั้นตอนที่ 1: เปิดเครื่องมือดึงสีและวางภาพใดก็ได้ (JPEG, PNG, WebP หรือรูปแบบทั่วไปอื่นๆ)
- ขั้นตอนที่ 2: คลิกที่ใดก็ได้บนภาพเพื่อสุ่มตัวอย่างสีที่พิกเซลนั้น
- ขั้นตอนที่ 3: เครื่องมือแสดงค่าสีในรูปแบบ HEX, RGB และ HSL พร้อมกัน
- ขั้นตอนที่ 4: คัดลอกค่าที่คุณต้องการด้วยการคลิกเดียวและวางโดยตรงในเครื่องมือออกแบบ ตัวแก้ไขโค้ด หรือเอกสารของคุณ
เคล็ดลับสำหรับการดึงสีที่แม่นยำ
- ซูมเข้าเพื่อความแม่นยำ รูปถ่ายมีค่าสีนับพันที่แตกต่างกันเล็กน้อย ซูมเข้าเพื่อให้แน่ใจว่าคุณคลิกพิกเซลที่ถูกต้อง ไม่ใช่พิกเซลข้างเคียง
- สุ่มตัวอย่างหลายจุด สีที่ดูสม่ำเสมอสำหรับตาของคุณอาจแตกต่างกันในภาพเนื่องจากแสง เงา หรือสิ่งแปลกปลอมจากการบีบอัด สุ่มตัวอย่างพิกเซลใกล้เคียงสองสามจุดและเฉลี่ยสำหรับสีที่เป็นตัวแทนที่สุด
- ใช้รูปภาพต้นฉบับคุณภาพสูง JPEG ที่บีบอัดอย่างหนักสร้างสิ่งแปลกปลอมด้านสี ถ้าเป็นไปได้ ใช้ PNG หรือ JPEG คุณภาพสูงสำหรับการสุ่มตัวอย่างสีที่แม่นยำที่สุด
- ตรวจสอบการปรับเทียบจอของคุณ สีบนหน้าจอขึ้นอยู่กับการตั้งค่าจอของคุณ หากความแม่นยำของสีสำคัญ ตรวจสอบให้แน่ใจว่าจอของคุณได้รับการปรับเทียบอย่างถูกต้อง
เช่นเดียวกับเครื่องมือ fileGOD ทั้งหมด เครื่องมือดึงสีทำงานทั้งหมดในเบราว์เซอร์ของคุณ รูปภาพของคุณจะไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์ใดๆ ทำให้ปลอดภัยสำหรับการใช้กับทรัพย์สินการออกแบบที่เป็นความลับหรือวัสดุแบรนด์ที่ยังไม่เผยแพร่