Stax
Tools

Image Color Picker

Pick any color from an image and get HEX, RGB, and HSL values.

🎨

Drop image here or click to upload

Hover to pick colors · click to save

การทำงานของ Image Color Picker

Image color picker ช่วยให้คุณสุ่มตัวอย่างสีพิกเซลจากรูปภาพที่อัปโหลดใดก็ได้และดึงชุดสีหลักโดยอัตโนมัติ เลื่อนเมาส์เหนือพื้นที่ใดก็ได้ของรูปภาพเพื่อดูค่า HEX, RGB และ HSL ของพิกเซลนั้นแบบเรียลไทม์ คลิกเพื่อคัดลอกค่าไปยังคลิปบอร์ด นักออกแบบใช้เพื่อดึงสีแบรนด์ ตรวจสอบความคมชัดสำหรับการเข้าถึง และสร้างชุดสีที่สอดคล้องกัน

Eyedropper สุ่มตัวอย่างสีที่แน่นอนของพิกเซลเดียวที่ตำแหน่งเคอร์เซอร์ ซึ่งแม่นยำกว่าการประมาณสีด้วยสายตาหรือใช้สีตัวอย่างที่ใกล้ที่สุดในชุดสี เมื่อสุ่มตัวอย่างจากภาพถ่าย สีที่พิกเซลใดๆ เป็นผลจากแสง เงา และการบีบอัด

เครื่องดึงชุดสีใช้อัลกอริทึม k-means clustering (หรือ median cut) เพื่อระบุ 5–8 สีที่โดดเด่นที่สุดในรูปภาพ โดยถ่วงน้ำหนักตามความถี่ของพิกเซล เครื่องมือกรองสีที่ซ้ำกันใกล้เคียงและจัดอันดับสีตามความโดดเด่นทางสายตา ทำให้ชุดสีที่ดึงออกมามีประโยชน์ทันทีสำหรับ UI theming

HEX (#RRGGBB) เป็นรูปแบบมาตรฐานสำหรับ CSS และเครื่องมือออกแบบส่วนใหญ่ RGB ใช้ในซอฟต์แวร์แก้ไขรูปภาพ HSL เป็นรูปแบบที่เข้าใจง่ายที่สุดสำหรับมนุษย์ — การปรับค่าความสว่างใน HSL สร้างสีอ่อนและสีเข้มโดยไม่เปลี่ยนสีฐาน

WCAG 2.1 กำหนดอัตราส่วนความคมชัดขั้นต่ำ 4.5:1 ระหว่างข้อความและพื้นหลังสำหรับข้อความปกติ (มาตรฐาน AA) และ 3:1 สำหรับข้อความขนาดใหญ่ หลังจากเลือกสีพื้นหน้าและพื้นหลังจากรูปภาพ เครื่องมือคำนวณอัตราส่วนความคมชัดและแสดงผลผ่าน/ล้มเหลว WCAG AA และ AAA

คำถามที่พบบ่อย

How do I pick a specific color from an image?
Upload the image, then hover over it — the tool shows the HEX, RGB, and HSL values of the pixel under your cursor in real time. Click to save that color to your picked list. Click any saved color to copy its HEX value.
What is the difference between HEX, RGB, and HSL?
HEX is the shorthand for RGB used in CSS (#FF5733). RGB defines colors as Red, Green, Blue values (0–255). HSL defines colors as Hue (0–360°), Saturation (%), and Lightness (%) — easier for designers to reason about. All three represent the same colors.
How are dominant colors extracted?
The tool downsamples the image and quantizes pixels into color buckets, then ranks buckets by pixel count. The top 12 most common color groups are shown as the dominant palette. Click any swatch to copy its hex value.

เครื่องมือที่เกี่ยวข้อง