พัฒนาเว็บ

Color Converter

แปลงสีระหว่าง HEX, RGB, HSL, HSV/HSB และ CMYK — ป้อนค่าในช่องใดก็ได้ ช่องที่เหลือจะอัปเดตทันที

The same color can be written differently depending on context: HEX and RGB are convenient for code, HSL is intuitive for picking a hue and lightness, and CMYK is for print. This tool converts between all of them at once.

How to use it

Which format to use when

Things to keep in mind

CMYK on screen is only an approximation — the exact printed color depends on the printer, paper, and color profile used.

Conversion between color spaces isn't always exact for extreme, highly saturated colors, due to differences in gamut coverage between models.

บทความเกี่ยวกับเครื่องมือนี้: HEX, RGB, HSL: ทำไมสีจึงมีวิธีเขียนหลายแบบ

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

ตัวแปลงจัดการกับช่องอัลฟา (ความโปร่งใส) อย่างไร?

อัลฟารองรับใน HEX (#RRGGBBAA), RGBA และ HSLA — สิ่งที่คุณป้อนจะถูกส่งต่อไปยังรูปแบบอื่นที่รองรับความโปร่งใส ในขณะที่รูปแบบที่ไม่มีช่องอัลฟา เช่น CMYK ธรรมดา จะเพิกเฉยต่อมันเฉย ๆ

ทำไมค่าถึงเปลี่ยนเล็กน้อยหลังจากแปลงเป็น CMYK แล้วกลับมาเป็น HEX?

CMYK เป็นโมเดลที่เน้นการพิมพ์โดยไม่มีสูตรตายตัวเดียวสำหรับการแปลงไปมากับ RGB ดังนั้นการแปลงไปกลับอาจทำให้ค่าคลาดเคลื่อนจากการปัดเศษหนึ่งหรือสองหน่วย แต่ในทางสายตาสีจะยังคงเหมือนเดิม

ข้อมูลสีของฉันถูกส่งไปที่ไหนหรือไม่?

ไม่ การแปลงทั้งหมดเกิดขึ้นในเครื่องของคุณผ่านเบราว์เซอร์ด้วย JavaScript ไม่มีการอัปโหลดไปยังเซิร์ฟเวอร์

OKLCH ต่างจาก HSL อย่างไร?

OKLCH อธิบายสีผ่านความสว่าง (L) ความอิ่มตัวของสี (C) และโทนสี (H) แต่ต่างจาก HSL ตรงที่คำนึงถึงวิธีที่ดวงตามนุษย์รับรู้ความสว่างจริง ๆ — การเปลี่ยนค่า L ใน OKLCH จะไม่บิดเบือนความอิ่มตัวของสีที่รับรู้ได้ ทำให้การไล่โทนสีดูสม่ำเสมอกว่า

สีที่ "อยู่นอกช่วงสี" (out of gamut) หมายความว่าอย่างไร?

สีบางสีในปริภูมิสีที่กว้างอย่าง OKLCH หรือ Display P3 ไม่สามารถแสดงผลได้จริงบนจอแสดงผลที่รองรับเฉพาะ sRGB — ในกรณีนี้เบราว์เซอร์จะแทนที่ด้วยสีที่ใกล้เคียงที่สุดในช่วงสีที่รองรับ

บทความ: พัฒนาเว็บ

การมินิฟาย CSS: อะไรถูกลบออกจากไฟล์บ้างและเพื่ออะไร

เหตุใด CSS ที่ถูกมินิฟายแล้วยังคงทำงานในเบราว์เซอร์ได้เหมือนเดิม แม้จะอ่านยากขึ้นสำหรับมนุษย์

การมินิฟาย JavaScript: ความแตกต่างระหว่างการมินิฟายกับการอ๊อบฟัสเคต

เหตุใดโค้ดที่ถูกมินิฟายจึงยังพออ่านได้หากตั้งใจ แต่โค้ดที่ถูกอ๊อบฟัสเคตแล้วอ่านแทบไม่ออก

การมินิฟาย HTML: เหตุใดช่องว่างในมาร์กอัปจึงมีความสำคัญ

เหตุใดการลบช่องว่างใน <pre> หรือ textarea อาจทำให้หน้าเว็บแสดงผลผิดพลาด ต่างจากส่วนอื่น ๆ

CSS Gradient: linear ต่างจาก radial และ conic อย่างไร

เหตุใด conic-gradient จึงเหมาะกับแผนภูมิวงกลม ส่วน radial เหมาะกับเอฟเฟกต์แสงจุด

อัลกอริทึม Luhn: ตรวจสอบความถูกต้องของหมายเลขบัตรอย่างไร

เหตุใดหมายเลขบัตรที่ผ่านการตรวจสอบด้วยอัลกอริทึม Luhn จึงไม่ได้หมายความว่าบัตรนั้นมีอยู่จริง

IBAN: หมายเลขบัญชีธนาคารระหว่างประเทศมีโครงสร้างอย่างไร

เหตุใดตัวอักษรสองตัวแรกใน IBAN จึงเป็นรหัสประเทศ ไม่ใช่ส่วนหนึ่งของหมายเลขบัญชี

QR Code: ลิงก์ถูกบรรจุลงในตารางพิกเซลได้อย่างไร

เหตุใด QR Code ที่มีโลโก้อยู่ตรงกลางจึงยังสแกนได้ แม้ภาพบางส่วนจะถูกบัง

บาร์โค้ด: Code 128 ต่างจาก EAN-13 อย่างไร

เหตุใดสินค้าในร้านค้าส่วนใหญ่จึงใช้ EAN-13 แทนที่จะเป็น Code 128

ภาพ Placeholder: เหตุใดจึงต้องใช้ภาพตัวแทนในการพัฒนา

เหตุใดนักพัฒนาเว็บจึงจงใจใส่กล่องสีเทาแทนภาพถ่ายจริงในขั้นตอนการพัฒนา