Go Toolstack

ตัวเลือกสี

เลือก ผสม และสกัดโค้ดสี HEX, RGB, HSL, HWB, CMYK พร้อมจานสีที่เข้ากัน

ตัวเลือกสี

เลือก ผสม และสกัดโค้ดสี HEX, RGB, HSL, HWB, CMYK พร้อมจานสีที่เข้ากัน

วิธีการทำงาน

1
Enter Query Details
Specify the parameters, location, or query data you want to look up.
2
Fetch or Validate Data
Retrieve or validate information securely within your session.
3
Inspect Detailed Results
Review schedules, reference figures, or comprehensive data tables.

Discover more client side utilities in this category

ศูนย์รูปภาพ & การออกแบบ • เวิร์กโฟลว์และคู่มือเปรียบเทียบ

สำรวจเครื่องมือรูปภาพ & การออกแบบทั้งหมด ขีดจำกัดของเบราว์เซอร์ และคู่มือการเลือกเครื่องมือ

สำรวจศูนย์ →
ตัวสร้าง QR Code

สร้างรหัส QR กำหนดระดับแก้ไขข้อผิดพลาด Reed-Solomon ปรับแต่งสี และส่งออกเป็น SVG หรือ PNG
บีบอัดรูปภาพ

ลดขนาดไฟล์รูปภาพ JPEG, PNG, WebP ในหน่วย KB/MB โดยรักษาคุณภาพการมองเห็นสูงสุด
ปรับขนาดรูปภาพ

ปรับเปลี่ยนมิติพิกเซล กว้างxสูง ของภาพ พร้อมล็อกอัตราส่วนภาพและเลือกวิธีสุ่มตัวอย่างใหม่

คู่มือบล็อกที่เกี่ยวข้อง

คู่มือทางเทคนิค การแก้ไขปัญหา และขั้นตอนการปฏิบัติที่ดีที่สุด

รูปภาพ & การออกแบบ • ~4 นาทีในการอ่าน

เปรียบเทียบการบีบอัดรูปภาพ WebP, AVIF, JPEG และ PNG: คุณภาพ ขนาดไฟล์ และการประมวลผลจริง | GoToolstack

วิเคราะห์เชิงเปรียบเทียบรูปแบบการบีบอัดรูปภาพ WebP, AVIF, JPEG และ PNG ทำความเข้าใจความแตกต่างระหว่าง Lossy และ Lossless การประมวลผลด้วย HTML5 Canvas และ WebAssembly ในเบราว์เซอร์

อ่านคู่มือ →
รูปภาพ & การออกแบบ • ~4 นาทีในการอ่าน

วิธีตรวจดูและลบข้อมูล EXIF ในภาพถ่าย: ปกป้องตำแหน่ง GPS และข้อมูลส่วนบุคคลก่อนแชร์ออนไลน์ | GoToolstack

วิธีตรวจสอบและลบข้อมูลเมทาดาตา EXIF ที่ฝังอยู่ในรูปภาพ รวมถึงพิกัดดาวเทียม GPS รุ่นกล้อง และวันเวลาถ่ายภาพ ด้วยการเรนเดอร์ใหม่บน Canvas ในเบราว์เซอร์เพื่อความปลอดภัย

อ่านคู่มือ →
ศูนย์ความรู้และแนวคิด

ตัวเลือกโค้ดสี จานสีฮาร์โมนี และตัวแปลงพิกัดสี HSL / RGB / HEX

เครื่องมือตัวเลือกโค้ดสี (Interactive Color Picker) ช่วยให้นักออกแบบและนักพัฒนาเว็บไซต์สามารถเลือก ตรวจสอบ และสร้างจานสีที่กลมกลืนกันได้อย่างแม่นยำ รองรับการทำงานในปริภูมิสี HSL, RGB และรหัส HEX พร้อมฟังก์ชัน Eyedropper สุ่มสีจากหน้าจอและเครื่องมือคำนวณฮาร์โมนีของสี เช่น สีตรงข้าม (Complementary), สามเหลี่ยมสี (Triadic), สีข้างเคียง (Analogous) เพื่อสร้างระบบสี UI ที่สวยงามและถูกต้องตามหลักสรีรวิทยาการมองเห็น

สูตรและหลักการทางเทคนิค

ฮาร์โมนีของสี: สีตรงข้าม = (Hue + 180°) mod 360° | สามเหลี่ยมสี = (Hue ± 120°) mod 360° | สีข้างเคียง = (Hue ± 30°) mod 360°

คำนวณองศาบนวงล้อสี HSL ในพิกัดเชิงขั้ว เพื่อสร้างชุดสีที่มีความสมดุลทางสายตาและรักษาระดับความสว่างและความอิ่มตัวของสีให้เป็นระบบ

ข้อแนะนำและวิธีปฏิบัติที่ถูกต้อง

  • ใช้รูปแบบ HSL ในการสร้าง Design System: การปรับแต่งค่า Lightness (ความสว่าง) ใน HSL ช่วยให้คุณสร้างสถานะ Hover หรือ Active ของปุ่มได้อย่างเป็นระบบโดยที่เฉดสีหลักไม่ผิดเพี้ยน
  • ตรวจสอบคอนทราสต์ตามมาตรฐาน WCAG เสมอ: ก่อนสรุปเลือกสีตัวอักษรและสีพื้นหลัง ควรตรวจสอบอัตราส่วนคอนทราสต์ให้ผ่านเกณฑ์ WCAG AA (อย่างน้อย 4.5:1) เพื่อให้อ่านง่ายสำหรับทุกคน
  • ใช้เครื่องมือ Eyedropper ดูดสีจริงจากองค์ประกอบบนจอ: ใช้ API ดูดสีที่ปลอดภัยในเบราว์เซอร์เพื่อดึงค่าสีพิกเซลที่แท้จริงจากภาพถ่ายหรือโลโก้มาใช้งานได้อย่างรวดเร็ว
  • คัดลอกรหัสสี HEX ไปยังสไตล์ชีต CSS ได้ทันที: คลิกปุ่มคัดลอกเพื่อนำรหัสสี 6 หลักไปวางในโค้ด CSS หรือเครื่องมือกราฟิก เช่น Figma ได้อย่างไร้รอยต่อ

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

ทำไมนักพัฒนาเว็บยุคใหม่จึงนิยมใช้ระบบสี HSL มากกว่า RGB?
เพราะระบบ HSL (Hue, Saturation, Lightness) สอดคล้องกับวิธีที่มนุษย์รับรู้สี: การปรับค่าความสว่าง (Lightness) หรือความสดของสี (Saturation) ทำได้ง่ายดายโดยไม่ต้องคำนวณสมดุลแม่สีแดง เขียว น้ำเงิน ใหม่เหมือนในระบบ RGB
เครื่องมือนี้รองรับช่องสัญญาณความโปร่งใส (RGBA / 8-digit HEX) หรือไม่?
เครื่องมือหลักเน้นการเลือกค่าสีทึบ 24-bit เพื่อความแม่นยำของรหัสสีมาตรฐาน แต่คุณสามารถนำค่า RGB ที่ได้ไปใส่ในฟังก์ชัน rgba() ของ CSS และกำหนดค่าความโปร่งใสได้ตามต้องการ
สามารถนำชุดจานสีที่สร้างขึ้นไปใช้งานในโปรแกรมออกแบบได้อย่างไร?
คุณสามารถคัดลอกรหัส HEX หรือค่า RGB ของแต่ละเฉดสีในจานสีฮาร์โมนีไปวางลงในโปรแกรมออกแบบอย่าง Figma, Adobe XD หรือไฟล์ CSS ตัวแปรสีได้อย่างง่ายดาย
เครื่องมือนี้ใช้งานฟรีโดยไม่มีข้อจำกัดจริงหรือไม่?
ใช่ ฟรี 100% โดยไม่มีโควตารายวัน ไม่มีการสมัครสมาชิกแอบแฝง และไม่มีเพย์วอลล์ คุณสามารถประมวลผล แปลง และบีบอัดไฟล์ได้มากเท่าที่คุณต้องการโดยไม่มีข้อจำกัดหรือลายน้ำ