pixel → HEX · RGB · HSL
ตัวเลือกสีจากรูปภาพ
คลิกพิกเซลของรูปภาพเพื่ออ่านสี: พิกเซลสี #0060fd อ่านได้เป็น rgb(0, 96, 253) และ hsl(217, 100%, 50%) เพิ่มรูปภาพเพื่อเลือกสีจากรูปของคุณเอง
- rgb(0, 96, 253) = #0060fd
- rgb(255, 128, 0) = #ff8000
- #0060fd 75% + #ffffff 25%
เลือกด้วยการคลิก การแตะ หรือปุ่มลูกศร รูปภาพของคุณถูกวาดในแท็บนี้เท่านั้น และไม่ถูกอัปโหลด
Scanned by 
NortonTM Safe Web
ภาพรวมโดยสรุป
- ราคา
- ไม่มีค่าใช้จ่าย
- บัญชี
- ไม่ต้องมี
- การอัปโหลด
- ไม่มี — รูปภาพถูกวาดในแท็บเบราว์เซอร์ของคุณ และไม่มีอะไรถูกส่งไปที่ใด
- รูปแบบ
- PNG, JPEG, WebP, GIF, AVIF, BMP และ SVG เท่าที่เบราว์เซอร์ของคุณถอดรหัสได้
- ขนาดรูปภาพ
- วาดที่ด้านยาวที่สุดไม่เกิน 1600 พิกเซล; ไฟล์ไม่เกิน 200 MB และ 120 ล้านพิกเซล
- พาเลตต์
- หกสีเด่นด้วย median cut จากพิกเซลตัวอย่างราว 20,000 พิกเซล
สีที่เลือกและวิธีทำงานของพาเลตต์
แถวเหล่านี้สร้างจากโค้ดเดียวกับเครื่องมือ ตารางพาเลตต์ใช้รูปภาพขนาด 4 × 4 พิกเซล ที่มีพิกเซลสีน้ำเงินสิบสองพิกเซลและพิกเซลสีขาวสี่พิกเซล
| สีของพิกเซล | HEX | RGB | HSL |
|---|---|---|---|
| #0060fd | #0060fd | rgb(0, 96, 253) | hsl(217, 100%, 50%) |
| #ff8000 | #ff8000 | rgb(255, 128, 0) | hsl(30, 100%, 50%) |
| #00a86b | #00a86b | rgb(0, 168, 107) | hsl(158, 100%, 33%) |
| #767676 | #767676 | rgb(118, 118, 118) | hsl(0, 0%, 46%) |
| #fdd835 | #fdd835 | rgb(253, 216, 53) | hsl(49, 98%, 60%) |
| สีในพาเลตต์ | สัดส่วนของพิกเซล |
|---|---|
| #0060fd | 75% |
| #ffffff | 25% |
วิธีเลือกสีจากรูปภาพ
เพิ่มรูปภาพ
ลากไฟล์ PNG, JPEG, WebP, GIF, AVIF, BMP หรือ SVG มาวางบนกล่อง เลือกไฟล์ด้วยปุ่มเรียกดู หรือวางรูปภาพจากคลิปบอร์ด ระบบแสดงรูปตัวอย่างไว้จนกว่าคุณจะเพิ่มรูปของคุณเอง
คลิก แตะ หรือใช้ปุ่มลูกศร
คลิกหรือแตะจุดหนึ่ง หรือลากข้ามรูปภาพ เมื่อโฟกัสที่รูปภาพ ปุ่มลูกศรจะเลื่อนเป้าเล็งทีละหนึ่งพิกเซล และ Shift กับลูกศรจะเลื่อนสิบพิกเซล ช่องต่าง ๆ แสดงสีเป็น HEX, RGB และ HSL
คัดลอกสีหรือรายการในพาเลตต์
กดคัดลอกที่ช่องใดก็ได้ หรือกดแถบสีในพาเลตต์เพื่อคัดลอกรหัส HEX พาเลตต์แสดงหกสีเด่นของรูปภาพทั้งภาพ พร้อมสัดส่วนของภาพที่แต่ละสีครอบคลุม
อ่านสีอย่างไร
เบราว์เซอร์ถอดรหัสไฟล์ของคุณ และหน้านี้วาดลงบนองค์ประกอบ canvas ในแท็บนี้ รูปภาพที่ด้านยาวที่สุดเกิน 1600 พิกเซลจะถูกย่อให้พอดี สีที่คุณอ่านจากรูปขนาดใหญ่มากจึงมาจากสำเนาที่ย่อแล้ว ซึ่งพิกเซลข้างเคียงถูกเฉลี่ยรวมกัน จากนั้นหน้านี้ขอค่าแดง เขียว น้ำเงิน และอัลฟาของพิกเซลเดียวใต้เป้าเล็งจาก canvas แล้วพิมพ์เป็น HEX, RGB และ HSL พิกเซลที่มีความโปร่งใสจะพิมพ์พร้อมค่าอัลฟา canvas เก็บสีโดยคูณด้วยอัลฟา ช่องสีของพิกเซลที่โปร่งใสบางส่วนจึงอาจคลาดไปหนึ่งหน่วย: 200 อ่านเป็น 199 ที่ความทึบ 50%
พาเลตต์ใช้วิธี median cut หน้านี้ดูพิกเซลทุกตัวที่ n โดยมากที่สุดราว 20,000 พิกเซล และข้ามพิกเซลที่โปร่งใสเกินครึ่ง นำสีเหล่านี้ใส่ในกล่องเดียว แล้วตัดกล่องที่มีช่วงกว้างที่สุดในช่องสีหนึ่งที่ค่ามัธยฐานของช่องนั้นซ้ำ ๆ จนมีหกกล่อง หรือไม่มีกล่องใดมีสองสีที่ต่างกัน แต่ละกล่องแสดงเป็นค่าเฉลี่ยของพิกเซลในกล่อง พร้อมสัดส่วนของพิกเซลตัวอย่างที่กล่องนั้นมี เรียงจากมากไปน้อย ผลลัพธ์เหมือนเดิมทุกครั้งสำหรับรูปเดิม รูปที่มีสีต่างกันน้อยกว่าหกสีจะได้พาเลตต์ที่สั้นลง และรูปเคลื่อนไหวจะถูกอ่านเป็นภาพนิ่งภาพเดียว
คำถามเกี่ยวกับตัวเลือกสีจากรูปภาพ
ดูรหัส HEX ของสีในรูปภาพได้อย่างไร
เพิ่มรูปภาพ แล้วคลิกจุดที่ต้องการ ช่อง HEX จะแสดงรหัสของพิกเซลนั้น เช่น #0060fd และปุ่มคัดลอกจะนำไปไว้ในคลิปบอร์ด หากต้องการสีหลักโดยไม่ต้องเลือกจุด ให้กดแถบสีในพาเลตต์แทน
รองรับรูปแบบรูปภาพอะไรบ้าง
PNG, JPEG, WebP, GIF, AVIF, BMP และ SVG ตราบที่เบราว์เซอร์ของคุณถอดรหัสได้ AVIF ขึ้นอยู่กับเวอร์ชันของเบราว์เซอร์ ไฟล์อื่น เช่น PDF หรือ TIFF จะถูกปฏิเสธพร้อมข้อความ ไฟล์ที่เกิน 200 MB หรือเกิน 120 ล้านพิกเซลก็จะถูกปฏิเสธเช่นกัน
เลือกพาเลตต์หกสีอย่างไร
ด้วย median cut บนตัวอย่างราว 20,000 พิกเซล: สีถูกแบ่งเป็นกล่องที่ค่ามัธยฐานของช่องสีที่กว้างที่สุด จนมีหกกล่อง และแต่ละกล่องกลายเป็นค่าเฉลี่ยของพิกเซลในกล่อง เปอร์เซ็นต์ใต้แต่ละแถบสีคือสัดส่วนของพิกเซลตัวอย่างในกล่องนั้น พิกเซลที่ส่วนใหญ่โปร่งใสจะถูกข้าม
ทำไมสองพิกเซลที่อยู่ใกล้กันจึงให้สีต่างกันเล็กน้อย
รูปถ่ายและรูปที่บีบอัดอย่าง JPEG มีค่าแตกต่างเล็กน้อยในแต่ละพิกเซล สองจุดที่ดูเหมือนกันจึงอาจต่างกันไม่กี่หน่วยต่อช่องสี คลิกหลายจุด หรือใช้พาเลตต์ซึ่งเฉลี่ยพิกเซลจำนวนมาก เมื่อต้องการสีตัวแทน
รูปภาพของฉันถูกอัปโหลดไปที่ไหนไหม
ไม่ เบราว์เซอร์ของคุณถอดรหัสและวาดไฟล์ในแท็บนี้ สีถูกอ่านจากภาพที่วาดนั้น และไม่มีอะไรถูกส่งไปยังเซิร์ฟเวอร์ การปิดหรือโหลดหน้าใหม่จะทิ้งรูปภาพ
ปุ่มเลือกจากหน้าจอทำอะไร
ในเบราว์เซอร์ที่มีฟีเจอร์ EyeDropper ปุ่มนี้ให้คุณคลิกจุดใดก็ได้บนหน้าจอ รวมถึงหน้าต่างอื่น และแสดงสีของจุดนั้น เบราว์เซอร์ที่ไม่มีฟีเจอร์นั้นจะไม่แสดงปุ่ม ส่วนการเลือกจากรูปภาพใช้ได้ทุกที่