เครื่องมือเลือกสีออนไลน์

เลือกสีบนวงล้อ ปรับแต่งอย่างละเอียดบนพื้นที่ความอิ่มตัว แล้วอ่านค่ากลับมาในทุกฟอร์แมตที่โปรเจกต์ของคุณใช้ — ตั้งแต่ #RRGGBB ไปจนถึง oklch() เครื่องมือเลือกสีนี้ยังทำในสิ่งที่เครื่องมืออื่นมักมองข้าม: วงล้อสามรูปแบบเรขาคณิต รวมถึงวงล้อ RYB แบบจิตรกร โอเวอร์เลย์ความกลมกลืนสีที่สร้างจานสีให้คุณ ช่องอัลฟา และการส่งออกจานสีทั้งชุดด้วยคลิกเดียวในรูปแบบ CSS variables, SCSS หรือ JSON ทั้งหมดนี้คำนวณในเบราว์เซอร์ของคุณเอง

วงล้อสามแบบ ไม่ใช่แค่แบบเดียว

ตัวเลือก โหมดวงล้อ จะเปลี่ยนรูปทรงเรขาคณิตของวงล้อเอง:

• HSV และ HSL คือวงล้อดิจิทัล — โทนสีเรียงตามวิธีที่จอ RGB ผสมแสง ทั้งสองต่างกันตรงพฤติกรรมของพื้นที่สี่เหลี่ยม: มุมที่สว่างที่สุดของ HSV คือโทนสีบริสุทธิ์ ในขณะที่ HSL จะวางโทนสีบริสุทธิ์ไว้ที่ความสว่าง 50% โดยมีสีขาวอยู่ด้านบน
• RYB (จิตรกร) จัดเรียงโทนสีตามที่ศิลปินเรียนรู้กันมา: สีแดง เหลือง และน้ำเงินเป็นแม่สี โดยมีสีส้ม เขียว และม่วงอยู่ระหว่างกลาง คุณค่าในทางปฏิบัติของมันแสดงออกในความกลมกลืนสี — บนวงล้อ RYB สีตรงข้ามของสีแดงคือ สีเขียว และสีตรงข้ามของสีน้ำเงินคือ สีส้ม ซึ่งเป็นคู่สีตามหลักเม็ดสีคลาสสิก ในขณะที่วงล้อดิจิทัลจะจับคู่สีแดงกับสีฟ้าอมเขียว หากจานสี “ตรงข้าม” จากเครื่องมือเลือกสีทั่วไปเคยดูผิดสายตาคุณมาก่อน นี่คือเหตุผล

ความกลมกลืนสีที่สร้างจานสีให้คุณ

เลือกกฎภายใต้ ความกลมกลืนของสี แล้ววงล้อจะทำเครื่องหมายสีคู่หูให้ ซึ่งจะปรากฏเป็นจานสีพร้อมใช้:

• สีตรงข้าม — สีตรงข้ามหนึ่งสี คอนทราสต์ที่แรงที่สุด ใช้เป็นสีเน้นเดี่ยวคู่กับสีหลักของแบรนด์
• สีตรงข้ามแบบแยก — สองสีข้างเคียงของสีตรงข้าม คอนทราสต์เกือบเท่ากันแต่จัดสมดุลได้ง่ายกว่ามาก
• สีสามเส้า — สามโทนสีที่เว้นระยะเท่ากัน มีชีวิตชีวาแต่มั่นคง ให้สีหนึ่งเป็นสีหลักและใช้อีกสองสีอย่างประหยัด
• สีสี่เส้า (สี่เหลี่ยม) — สี่โทนสี ชุดสีที่หลากหลายสำหรับภาพประกอบและการแสดงข้อมูล จัดสมดุลได้ยากในงานอินเทอร์เฟซ
• สีข้างเคียง — สีที่อยู่ติดกันทันที ความตึงเครียดต่ำ เหมาะสำหรับพื้นหลังและการไล่ระดับสี
• สีเอกรงค์ — โทนสีเดียวในระดับความสว่างต่างๆ ตัวเลือกที่ปลอดภัยที่สุดสำหรับสถานะของอินเทอร์เฟซ (hover, active, disabled)

แผงจานสีคัดลอกชุดสีทั้งหมดในคลิกเดียว ในรูปแบบที่คุณเลือก: HEX, RGB, HSL, OKLCH แบบธรรมดา, CSS custom properties พร้อมวาง (--color-1: …), ตัวแปร SCSS หรือ JSON สำหรับส่งต่อให้โค้ด

วางอะไรก็ได้ อ่านได้ทุกอย่าง

ช่องป้อนข้อมูลรับรูปแบบสีแทบทุกชนิดที่คุณป้อนเข้าไป: #f80, #ff8800, hex 8 หลักพร้อมอัลฟา, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 หรือชื่อสี CSS อย่าง rebeccapurple ไม่ว่าจะป้อนอะไรเข้ามา ผลลัพธ์ที่ซิงค์กันเจ็ดแบบจะแสดงกลับมา: HEX, RGB, HSL, HSV, LCH, OKLCH และ CMYK แต่ละแบบมีปุ่มคัดลอกของตัวเอง

ป้ายช่วยเหลือสองอันใต้ตัวอย่างจะบอกชื่อสีให้คุณ: ชื่อสี CSS ที่ใกล้เคียงที่สุด (มีประโยชน์สำหรับต้นแบบด่วนๆ และการพูดคุยเรื่องสี) และ โทเค็น Tailwind ที่ใกล้เคียงที่สุด (เช่น orange-500) เพื่อให้คุณอยู่ในดีไซน์ซิสเต็มของตัวเองได้โดยไม่ต้องคิดค่าเฉพาะกิจขึ้นมาเอง

ลากแถบเลื่อน ความทึบ (อัลฟา) ใต้ตัวอย่าง แล้วผลลัพธ์จะสลับเป็นรูปแบบโปร่งใส — #RRGGBBAA, rgba(), hsla() — พร้อมแสดงตัวอย่างบนพื้นลายตารางหมากรุกเพื่อให้คุณตัดสินความโปร่งใสได้

ควรใช้ฟอร์แมตไหน?

ฟอร์แมต	ชื่อเต็ม	ใช้เมื่อไหร่?
HEX	Hexadecimal	ค่าเริ่มต้นของเว็บ กะทัดรัด รองรับทุกที่ คัดลอกง่าย 8 หลักเพิ่มอัลฟาได้
RGB	Red, Green, Blue	วิธีที่หน้าจอคิด สามช่องแสง ค่า 0–255 ฟอร์แมตที่ API และโค้ด canvas ส่วนใหญ่ต้องการ
HSL	Hue, Saturation, Lightness	สำหรับมนุษย์ที่แก้ไขด้วยมือ “สว่างขึ้นอีกนิด” หรือ “อิ่มตัวน้อยลง” คือการเปลี่ยนตัวเลขค่าเดียว
HSV	Hue, Saturation, Value	ซอฟต์แวร์กราฟิก โมเดลเบื้องหลังตัวเลือกสีใน Photoshop และ GIMP
LCH	Lightness, Chroma, Hue	สอดคล้องกับการรับรู้ การเปลี่ยนตัวเลขเท่ากันจะดูเป็นการเปลี่ยนแปลงทางสายตาเท่ากัน ซึ่งเป็นสิ่งที่ HSL แค่แสร้งทำได้
OKLCH	OK Lightness, Chroma, Hue	ตัวเลือก CSS สมัยใหม่ แก้ปัญหาการเลื่อนโทนสีน้ำเงินของ LCH รองรับในเบราว์เซอร์ปัจจุบันทั้งหมด และเหมาะกับระบบดีไซน์โทเค็น
CMYK	Cyan, Magenta, Yellow, Key	แนวทางสำหรับงานพิมพ์ การแปลงค่าโดยประมาณสำหรับสื่อสารกับนักออกแบบงานพิมพ์ — ค่าสุดท้ายจริงมาจากโปรไฟล์สีของเครื่องพิมพ์เสมอ

รายละเอียดเล็กๆ ที่ช่วยประหยัดเวลา

• ประวัติจดจำเอง สี 24 สีล่าสุดที่คุณใช้งานจะคงอยู่แม้รีเฟรชหน้าเว็บ — เก็บไว้ใน local storage ของเบราว์เซอร์คุณเท่านั้น ไม่มีการอัปโหลดที่ใดเลย
• เครื่องมือหยดสี (Eyedropper) ในเบราว์เซอร์ที่รองรับ EyeDropper API (Chrome และ Edge) คุณสามารถเลือกสีจากที่ใดก็ได้บนหน้าจอ แม้จะอยู่นอกหน้าต่างเบราว์เซอร์
• ควบคุมด้วยคีย์บอร์ด วงล้อและพื้นที่ความอิ่มตัวตอบสนองต่อปุ่มลูกศรเพื่อการปรับแต่งที่แม่นยำระดับพิกเซล
• ค่าที่ตั้งไว้ล่วงหน้า ครอบคลุมสีพื้นฐานทั่วไปเมื่อคุณแค่ต้องการจุดเริ่มต้นอย่างรวดเร็ว

---

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

ใช้ oklch() ในโค้ด CSS จริงได้อย่างปลอดภัยหรือไม่?

ได้ Chrome, Edge, Firefox และ Safari เวอร์ชันปัจจุบันทั้งหมดรองรับ oklch() และมันได้กลายเป็นสัญกรณ์ที่นิยมใช้สำหรับดีไซน์โทเค็น (Tailwind CSS 4 กำหนดจานสีทั้งหมดด้วยฟอร์แมตนี้) สำหรับเบราว์เซอร์เก่ามาก ให้เตรียมค่า HEX สำรองไว้บรรทัดก่อนหน้า — เครื่องมือนี้ให้ทั้งสองค่าแก่คุณ

ทำไมความกลมกลืนสีจึงเปลี่ยนไปเมื่อฉันสลับไปที่วงล้อ RYB?

เพราะ "สีตรงข้าม" ขึ้นอยู่กับวิธีจัดเรียงโทนสีรอบวงกลม วงล้อ RYB กระจายแม่สีเม็ดสีอย่างเท่าเทียม ทำให้คู่สีตรงข้ามตกลงบนคู่ที่ศิลปินคุ้นเคย — แดง–เขียว, น้ำเงิน–ส้ม, เหลือง–ม่วง ส่วนวงล้อ HSV/HSL จะเรียงโทนสีตามการผสมแสง RGB จับคู่สีแดงกับสีฟ้าอมเขียวแทน ไม่มีแบบไหนผิด RYB ตรงกับการฝึกฝนศิลปะแบบดั้งเดิม ส่วน HSV/HSL ตรงกับสิ่งที่หน้าจอทำ

ฉันเชื่อค่า CMYK สำหรับงานพิมพ์ได้หรือไม่?

ควรมองว่าเป็นแนวทาง ไม่ใช่ค่าที่แน่นอน การแปลงค่าสำหรับงานพิมพ์จริงขึ้นอยู่กับโปรไฟล์ ICC ของเครื่องพิมพ์ กระดาษ และหมึก — สี RGB เดียวกันจะแยกสีต่างกันสำหรับกระดาษเคลือบและไม่เคลือบ ค่าที่นี่ใช้สูตรมาตรฐานที่ให้ผลใกล้เคียง แต่การพิสูจน์อักษรสีขั้นสุดท้ายเป็นหน้าที่ของโรงพิมพ์

ปุ่มหยดสีอยู่ตรงไหนใน Firefox หรือ Safari?

มันถูกซ่อนไว้โดยตั้งใจ: EyeDropper API ที่ปุ่มนี้ใช้งานอยู่ในปัจจุบันมีใช้เฉพาะในเบราว์เซอร์ตระกูล Chromium (Chrome, Edge, Opera) เท่านั้น ในเบราว์เซอร์อื่น ฟีเจอร์อื่นๆ ทั้งหมดของเครื่องมือเลือกสีนี้ทำงานได้ตามปกติ มีเพียงการหยดสีจากหน้าจอเท่านั้นที่ใช้ไม่ได้

ประวัติสีของฉันเป็นส่วนตัวหรือไม่?

ใช่ ประวัติเก็บอยู่ใน localStorage ของเบราว์เซอร์บนอุปกรณ์ของคุณเท่านั้น ไม่มีสีที่คุณเลือก วาง หรือคัดลอกถูกส่งออกไปที่ใดเลย — เครื่องมือทั้งหมดเป็น JavaScript ฝั่งไคลเอ็นต์ ซึ่งคุณสามารถตรวจสอบได้เองโดยดูที่แท็บเครือข่ายในเครื่องมือสำหรับนักพัฒนา