เครื่องมือแปลงรหัสสีและจานสี
แปลงรหัสสี HEX, RGB, HSL, HSV, CMYK ได้ทันที
มาพร้อมฟังก์ชันสร้างจานสีและการตรวจสอบคอนทราสต์
เครื่องมือเลือกสี
รหัสสี
/* ตัวแปร CSS */ --color-primary: #3b82f6; --color-primary-rgb: 59, 130, 246; --color-primary-hsl: 217, 90%, 60%;
จานสี
อัตราส่วนคอนทราสต์
ข้อความสีขาว Aa
Ratio: -
ข้อความสีดำ Aa
Ratio: -
สีที่บันทึกไว้
บันทึกสีโดยใช้ปุ่ม ⭐ (สูงสุด 20 สี)
เกี่ยวกับเครื่องมือแปลงสี
เครื่องมือแปลงรหัสสีและสร้างจานสี เป็นเครื่องมือออนไลน์ฟรีที่ช่วยให้คุณแปลงสลับไปมาระหว่างรูปแบบสียอดนิยม 5 รูปแบบ ได้แก่ HEX, RGB, HSL, HSV และ CMYK ได้อย่างรวดเร็ว มาพร้อมกับเครื่องมือเลือกสีที่ใช้งานง่าย และมีระบบสร้างจานสีที่สอดคล้องกันหรือสีตรงข้ามให้โดยอัตโนมัติ
นอกจากนี้ ยังมีฟังก์ชันการตรวจสอบอัตราส่วนคอนทราสต์ตามมาตรฐาน WCAG (มาตรฐานการเข้าถึงเว็บไซต์) ซึ่งช่วยให้คุณตัดสินใจได้ทันทีว่าสีพื้นหลังที่คุณเลือกเหมาะกับข้อความสีขาวหรือสีดำ รหัสที่ได้สามารถคัดลอกได้ในพริบตาหรือดึงเป็นตัวแปร CSS เพื่อเพิ่มความรวดเร็วในการทำงานของทั้งนักออกแบบและนักพัฒนา Front-end
วิธีใช้งาน
เลือกหรือป้อนรหัสสี
คลิกที่เครื่องมือเลือกสี หรือปรับแถบเลื่อนเฉดสี ความสว่าง หรือความโปร่งใสเพื่อผสมสี คุณสามารถวางรหัสสีที่มีอยู่ลงในช่องอินพุต HEX หรือ RGB ได้โดยตรง
คัดลอกรหัสที่แปลงแล้ว
เมื่อคุณเปลี่ยนสี รหัสทุกรูปแบบ (HEX, RGB, HSL, HSV, CMYK) จะได้รับการอัปเดตแบบเรียลไทม์ เพียงคลิกปุ่ม "คัดลอก" รหัสก็จะถูกบันทึกลงในคลิปบอร์ดของคุณ นอกจากนี้ยังมีปุ่มคัดลอกตัวแปร CSS ทั้งหมดอีกด้วย
ตรวจสอบจานสีและคอนทราสต์
เปลี่ยนแท็บ "จานสี" ที่ด้านล่างเพื่อดูสีที่แนะนำ เช่น สีตรงข้าม ในส่วน "อัตราส่วนคอนทราสต์" ระบบจะประเมินโดยอัตโนมัติว่าข้อความสีขาวหรือสีดำสามารถอ่านได้ชัดเจนบนสีพื้นหลังหรือไม่
คำศัพท์เกี่ยวกับสี
- HEX (รหัสสีฐานสิบหก)
- รูปแบบมาตรฐานที่ใช้มากที่สุดในการออกแบบเว็บไซต์ ประกอบด้วยตัวอักษร 6 ตัว เช่น "#RRGGBB" (หรือแบบย่อ 3 ตัว "#RGB") ซึ่งกำหนดระดับของสีแดง (R) สีเขียว (G) และสีน้ำเงิน (B) ด้วยระบบฐานสิบหก (00-FF) หากรวมความโปร่งใส จะเขียนเป็นรูปแบบ 8 ตัวอักษร เช่น "#RRGGBBAA" ซึ่งรองรับทั้งใน HTML และ CSS
- RGB / RGBA
- โมเดลสีแบบบวกที่อิงจากแม่สีของแสง (แดง เขียว น้ำเงิน) ตามหลักการแสดงผลของหน้าจอทีวีหรือคอมพิวเตอร์ แต่ละสีจะถูกแทนด้วยค่าตั้งแต่ 0 ถึง 255 ใน CSS มักเขียนเป็น "rgb(255, 0, 0)" และสามารถเพิ่มค่า Alpha (ความโปร่งใส) ที่ท้ายสุดเพื่อกำหนดค่า 0.0 - 1.0 ด้วย "rgba"
- HSL
- โมเดลสีที่แสดงถึง เฉดสี (Hue) ความอิ่มตัว (Saturation) และความสว่าง (Lightness) เนื่องจากเป็นรูปแบบที่ปรับเปลี่ยนได้ง่ายตามการรับรู้ของสมองมนุษย์ เช่น "ทำให้สีเข้มขึ้น" หรือ "ทำให้สว่างขึ้น" HSL จึงเหมาะอย่างยิ่งสำหรับการสร้างระบบธีมที่ยืดหยุ่นใน CSS (ฟังก์ชัน hsl)
- CMYK
- โมเดลสีแบบลบที่ใช้ 4 สี ได้แก่ ฟ้า (Cyan) ม่วงแดง (Magenta) เหลือง (Yellow) และดำ (Key) เป็นรูปแบบที่ใช้ในอุตสาหกรรมการพิมพ์ ค่า CMYK ที่แสดงบนเบราว์เซอร์เป็นเพียงค่าทางทฤษฎีโดยประมาณเท่านั้น ดังนั้นเพื่อไม่ให้สีผิดเพี้ยนในการพิมพ์จริง จำเป็นต้องปรับแต่งในซอฟต์แวร์ออกแบบระดับมืออาชีพ
- อัตราส่วนคอนทราสต์ (ตามมาตรฐาน WCAG)
- อัตราส่วนความสว่างสัมพัทธ์ระหว่างสีพื้นหลังและสีของข้อความ ซึ่งเป็นมาตรฐานสำคัญที่กำหนดโดย Web Accessibility Guidelines เพื่อให้ผู้ใช้ทั่วไปสามารถอ่านข้อความได้ชัดเจน แนะนำให้มีอัตราส่วนอย่างน้อย "4.5:1 (ระดับ AA)" สำหรับข้อความปกติ และ "3:1" สำหรับข้อความขนาดใหญ่
คำถามที่พบบ่อย (FAQ)
- Q.ผลการแปลง CMYK แม่นยำ 100% สำหรับการพิมพ์หรือไม่?
- ค่า CMYK ที่คำนวณบนเบราว์เซอร์เป็นเพียงค่าทางทฤษฎีโดยประมาณ สีที่พิมพ์จริงจะแตกต่างกันไปตามโปรไฟล์ ICC และลักษณะหมึกของเครื่องพิมพ์ หากคุณต้องการข้อมูล CMYK ที่แม่นยำสำหรับการพิมพ์ โปรดแปลงและตรวจสอบโดยใช้ซอฟต์แวร์จัดการสีระดับมืออาชีพ เช่น Adobe Illustrator หรือ Photoshop
- Q.รองรับการแปลงความโปร่งใส (Alpha) หรือไม่?
- รองรับครับ คุณสามารถปรับแถบเลื่อน "ความโปร่งใส (Alpha)" ในเครื่องมือเลือกสีหรือป้อนค่า Alpha ลงในรหัสสีโดยตรง รหัสรูปแบบต่างๆ เช่น HEX (#RRGGBBAA), RGBA และ HSLA จะถูกแสดงผลอย่างถูกต้อง ซึ่งมีประโยชน์อย่างยิ่งสำหรับการออกแบบ Web UI สมัยใหม่ที่ต้องการความโปร่งใส
- Q.ฟังก์ชัน "คัดลอกตัวแปร CSS" คืออะไร?
- ฟังก์ชันนี้ใช้เพื่อส่งออกสีที่คุณเลือกเป็นรูปแบบตัวแปร CSS (CSS Variables) โดยจะสร้างรหัสในรูปแบบ --color-primary: #3b82f6; พร้อมกับค่าที่คั่นด้วยเครื่องหมายจุลภาคสำหรับ RGB และ HSL ทำให้ง่ายต่อการนำไปใช้วางในไฟล์การตั้งค่าของ Tailwind CSS หรือระบบธีมไดนามิก
- Q.ข้อมูลสีที่ฉันป้อนจะถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?
- ไม่มีการส่งข้อมูลใดๆ ครับ การทำงานทั้งหมดของเครื่องมือนี้เกิดขึ้นบนฝั่งไคลเอนต์ (ในเบราว์เซอร์ของคุณ) 100% รหัสสีหรือจานสีทั้งหมดจะไม่มีการส่งหรือจัดเก็บไว้ในเซิร์ฟเวอร์ภายนอก แม้แต่ "รายการโปรด" ก็จะถูกบันทึกไว้ใน Local Storage ของเบราว์เซอร์ของคุณเองเท่านั้น จึงมั่นใจได้ในความเป็นส่วนตัวอย่างสมบูรณ์
กรณีการใช้งาน
การเข้ารหัสเว็บไซต์และ UI Design
แปลงรหัส HEX ที่ระบุในเครื่องมือออกแบบอย่าง Figma หรือ XD ไปเป็นรูปแบบ RGB หรือ HSL เพื่อใช้ในการพัฒนา ช่วยให้ตั้งค่าตัวแปร CSS ที่นำไปใช้ต่อใน Design System ของโปรเจกต์ได้ง่ายขึ้น
การปรับปรุงการเข้าถึงข้อมูล
ตรวจสอบว่าการจับคู่สีพื้นหลังและสีตัวอักษรเป็นไปตามมาตรฐานอัตราส่วนคอนทราสต์ของ WCAG หรือไม่ ซึ่งช่วยในการตัดสินใจขณะเขียนโค้ดและส่งเสริม UX ของผลิตภัณฑ์ให้ดียิ่งขึ้น
การจัดชุดสีของระบบ
ใช้เพื่อค้นหาไอเดียในการผสมสี โดยป้อนสีแบรนด์และรอให้ระบบสร้างชุดสีที่ใกล้เคียงหรือตรงกันข้ามให้ มีประโยชน์อย่างยิ่งสำหรับงานกราฟิกและแบรนดิ้ง
สะพานเชื่อมสู่สิ่งพิมพ์
แปลงสีที่ใช้บนเว็บไปเป็นค่า CMYK เพื่อใช้เป็นค่าประมาณอ้างอิงเมื่อเตรียมการพิมพ์แบนเนอร์ ใบปลิว หรือนามบัตร
ส่งความคิดเห็น
โปรดแจ้งให้เราทราบความคิดเห็นของคุณเพื่อช่วยปรับปรุงเครื่องมือ
การส่งความคิดเห็นถูกระงับชั่วคราว
เซิร์ฟเวอร์ไม่ว่างหรือระบบป้องกันสแปมทำงานอยู่ โปรดลองอีกครั้งในภายหลัง