ตัวเลือกสี
เลื่อนไปบนช่องสี่เหลี่ยมเพื่อเลือกสี หรือจะหยิบสีที่มีอยู่แล้วก็ได้ ทั้งจากรูปภาพด้วยหลอดดูดสี และจากจุดใดก็ได้บนหน้าจอเท่าที่เบราว์เซอร์อนุญาต รหัสสีจะปรากฏทันทีครบทั้งสามรูปแบบ
เลื่อนตัวชี้ไปบนรูป แล้วคลิกเพื่อเก็บสีนั้นไว้
ใช้ล่าสุด
การดูดสีจากจุดใดก็ได้บนหน้าจอเป็นความสามารถของเบราว์เซอร์ที่มีเฉพาะใน Chrome และ Edge ใน Safari กับ Firefox จะไม่แสดงปุ่มนี้เลย เพราะสัญญาไว้แล้วปฏิเสธย่อมแย่กว่าไม่เสนอตั้งแต่ต้น ที่นั่นให้ใช้รูปแทน ภาพหน้าจอก็ใช้ได้ดีไม่แพ้กัน
รูปอยู่ในแท็บนี้ สีถูกอ่านจากแคนวาสตรงนี้เอง ไม่มีอะไรถูกอัปโหลด ส่วนสีที่ใช้ล่าสุดจะจำไว้เฉพาะบนเครื่องนี้
ใกล้เคียง: ตัวแปลงรหัสสี · ตัวสร้างพาเลตสี · สร้างไล่สี CSS · HEX เป็น RGB
- ฟรี
- ไฟล์ไม่ออกจากเครื่องของคุณ
- ไม่ต้องสมัคร
- ไม่จำกัดไฟล์
วิธีใช้
- ลากบนช่องสี่เหลี่ยมเพื่อเลือกเฉดสี และเลื่อนแถบเนื้อสีด้านล่างเพื่อเปลี่ยนกลุ่มสี
- ตั้งค่าความทึบแสงหากต้องการสีกึ่งโปร่งใส ค่านี้จะปรากฏในรหัสเป็น rgba หรือเป็นอักขระเพิ่มอีกสองตัวในค่า HEX
- หากต้องการหยิบสีที่มีอยู่แล้ว ให้กด «ดูดสีจากรูป» แล้วคลิกบนภาพ ส่วนใน Chrome และ Edge ยังดูดสีจากหน้าจอได้โดยตรงด้วย
- กด «คัดลอก» ข้างรูปแบบที่คุณต้องการ สีนั้นจะไปอยู่ในแถบสีล่าสุด คุณจึงกลับมาหยิบใช้ได้อีก
สิ่งที่ควรรู้
ทำไมช่องเลือกสีถึงสร้างบน HSV
ในระบบ HSV ช่องสี่เหลี่ยมที่วางความอิ่มตัวคู่กับความสว่างจะเต็มไปด้วยสีตั้งแต่ขอบจรดขอบ ทุกจุดคือสีของตัวเอง แต่ถ้าสร้างช่องเดียวกันบน HSL มันจะเสียรูป แถวบนสุดจะขาวทั้งแถว แถวล่างสุดจะดำทั้งแถว และพื้นที่ครึ่งหนึ่งเลือกอะไรไม่ได้เลย นี่คือเหตุผลทั้งหมดของการเลือกแบบนี้ และเป็นสิ่งที่ชุดทดสอบคอยเฝ้าไว้
ทางเข้าสามทาง เพราะคนเข้ามาด้วยคำถามต่างกัน
การเลือกสีกับการหาสีเป็นคนละงานกัน ช่องสี่เหลี่ยมมีไว้เพื่อเลือก หลอดดูดสีบนรูปภาพมีไว้สำหรับสีที่มีอยู่แล้วที่ไหนสักแห่ง ทั้งในภาพหน้าจอ ในโลโก้ หรือในรูปถ่าย ส่วนการดูดสีจากหน้าจอก็คือเรื่องเดียวกันโดยไม่ต้องออกจากหน้าต่าง และมีเพียง Chrome กับ Edge เท่านั้นที่ทำได้
ความโปร่งใสโผล่มาตรงไหน
ค่าความทึบแสงจะถูกเขียนก็ต่อเมื่อยังไม่เต็มร้อย จึงได้ «rgb(31, 95, 214)» แทนที่จะเป็น «rgba(31, 95, 214, 1)» เพราะแบบหลังยังไงก็ต้องมาไล่ลบเองอยู่ดี ส่วนใน HEX ความโปร่งใสจะกลายเป็นอักขระเพิ่มสองตัวท้ายรหัส เบราว์เซอร์ยุคนี้เข้าใจกันหมด แต่เครื่องมือรุ่นเก่าไม่เข้าใจ ดังนั้นเมื่อทึบเต็มร้อยจึงตัดหางนั้นทิ้ง
คำถามที่พบบ่อย
ทำไมเบราว์เซอร์ของฉันไม่มีปุ่ม «ดูดสีจากหน้าจอ»
เพราะ Safari และ Firefox ทำไม่ได้ ความสามารถนี้เป็นของเบราว์เซอร์ ไม่ใช่ของเรา และมีเฉพาะใน Chrome กับ Edge การขึ้นปุ่มไว้แล้วปฏิเสธทีหลังย่อมแย่กว่าการไม่เสนอตั้งแต่แรก ปุ่มจึงไม่มีอยู่ ให้จับภาพหน้าจอแล้วใช้วิธีดูดสีจากรูปแทน ผลลัพธ์เหมือนกันทุกประการ
จะเอาสีของพิกเซลในรูปถ่ายได้อย่างไร
กด «ดูดสีจากรูป» เลือกไฟล์ แล้วเลื่อนตัวชี้ไปบนภาพ สีจะเปลี่ยนตามตัวชี้ คลิกเพื่อล็อกค่าไว้ ภาพไม่ถูกอัปโหลดไปไหน มันถูกวาดลงบนแคนวาสในแท็บนี้และอ่านค่าจากตรงนั้น
พิมพ์รหัสสีแทนการเลือกได้ไหม
ได้ พิมพ์ลงในช่องใดช่องหนึ่งจากสามช่องด้วยรูปแบบที่คุ้นเคย เช่น #1f5fd6, 1f5fd6 หรือ rgb(31, 95, 214) อีกสองช่องจะเติมตัวเองพร้อมกับช่องสี่เหลี่ยม ถ้าคุณต้องการแค่แปลงระหว่างรูปแบบ ตัวแปลงรหัสสีที่อยู่ข้าง ๆ คือทางที่สั้นกว่า
แถบเนื้อสีกระโดดเวลาฉันลากความสว่างลงจนเป็นศูนย์
มันไม่ควรกระโดด และก็ไม่กระโดดจริง ๆ เพราะสีดำและสีขาวไม่มีเนื้อสีเลย แถบจึงคงค่าเดิมไว้แทนที่จะเด้งกลับไปเป็นสีแดง นี่เป็นความตั้งใจ ไม่อย่างนั้นทุกครั้งที่คุณลากลงไปก้นช่อง คุณจะเสียกลุ่มสีที่กำลังทำงานอยู่ไป
สีที่ใช้ล่าสุดเก็บไว้ที่ไหน
เก็บไว้ในเครื่องนี้ ในเบราว์เซอร์ ไม่ถูกส่งไปที่ใดและไม่ผูกกับตัวคุณ ถ้าล้างข้อมูลเว็บไซต์ แถบสีนั้นก็ว่างเปล่าอีกครั้ง
เครื่องมือที่เกี่ยวข้อง
- ตัวแปลงรหัสสี พิมพ์สีในรูปแบบที่คุ้นเคยแบบใดก็ได้ เช่น #1f5fd6, 1f5fd6, #1f5 หรือ rgb(31, 95, 214) แล้วรูปแบบ…
- ตัวสร้างพาเลตสี เลือกสีตั้งต้นหนึ่งสี แล้วเครื่องมือจะคำนวณสีที่เหลือให้ตามวงล้อสี คลิกที่ช่องสีใดก็ได้เพื่อคัด…
- สร้างไล่สี CSS ลากแถบเลื่อนแล้วดูแผงด้านบนเปลี่ยนตาม พอได้หน้าตาที่ต้องการ ก็คัดลอกบรรทัดนั้นไปวางในสไตล์ชีตขอ…
- HEX เป็น RGB วางรหัส HEX ลงไปแล้วอ่านค่าช่องสี RGB ได้เลย #1f5fd6 จะกลายเป็น rgb(31, 95, 214) และถ้ารหัสนั้น…
- แปลง RGB เป็น HEX วางค่า rgb(31, 95, 214) ลงไป จะคั่นด้วยจุลภาคหรือเว้นวรรคก็ได้ แล้วรับค่า #1f5fd6 ที่พร้อมใช้ใน…
- ตัวสร้างเงา CSS เลื่อนแถบปรับแล้วตัวอย่างจะเปลี่ยนตาม ซ้อนหลายชั้นได้เมื่อเงาชั้นเดียวไม่พอ นั่นคือวิธีสร้างควา…