นักพัฒนา

ตัวแปลงสี

วางค่า HEX, RGB หรือ HSL ใดก็ได้และรับการแปลงทันทีทั้งสามรูปแบบ พร้อมตัวอย่างสีสดเพื่อให้คุณเห็นว่าคุณกำลังทำงานกับสีก่อนนำไปใช้กับโค้ด

รูปแบบอินพุต

ความตัดกัน

พื้นหน้า

—

พื้นหลัง

#ffffff

เครื่องมือนี้ช่วยคุณได้ไหม?

ตัวแปลงสี คืออะไร?

ตัวแปลงสีเป็นเครื่องมือที่ขาดไม่ได้สำหรับนักพัฒนาเว็บ นักออกแบบกราฟิก และทุกคนที่ทำงานกับสีดิจิทัล ให้การแปลงทันทีและแม่นยำระหว่างสามรูปแบบสีที่ใช้กันอย่างแพร่หลายมากที่สุด: HEX (ฐานสิบหก), RGB (แดง-เขียว-น้ำเงิน) และ HSL (ฮิว-ความอิ่มตัว-ความสว่าง) รูปแบบ HEX เขียนด้วย # ตามด้วยหกหลักฐานสิบหก เช่น #FF5733 เป็นรูปแบบมาตรฐานสำหรับ CSSและการออกแบบเว็บ รูปแบบ RGB แสดงเป็น rgb(255, 87, 51) กำหนดสีโดยระบุความเข้มของช่องแสงแดง เขียว และน้ำเงิน รูปแบบ HSL เขียนเป็น hsl(11, 100%, 60%) อธิบายสีในแง่ของฮิว ความอิ่มตัว และความสว่าง

เมื่อไหร่ควรใช้เครื่องคำนวณนี้

เมื่อแปลงข้อกำหนดสีของนักออกแบบ
เมื่อสร้างระบบการออกแบบ
เมื่อสร้างจานสีโดยใช้ HSL
เมื่อตรวจสอบคอนทราสต์สีสำหรับ WCAG
เมื่อแปลงค่าสีเก่า
เมื่อแก้ไขปัญหาสี CSS

ขั้นตอน:

ป้อนค่าสีในรูปแบบใดก็ได้
เลือกรูปแบบอินพุต
ดูค่าที่แปลงแล้ว
คัดลอกผลลัพธ์
ตรวจสอบ badges คอนทราสต์ WCAG

สูตร

HEX → RGB: แยก #RRGGBB เป็นค่าทศนิยม RGB → HSL: ปรับค่า RGB เป็นมาตรฐาน → หาโทนสี/ความอิ่มตัว/ความสว่าง HSL → RGB: แปลงผ่านสูตร chroma HEX: #RRGGBB (0-255 แต่ละค่า) RGB: rgb(R, G, B) (0-255) HSL: hsl(H°, S%, L%) (H: 0-360, S/L: 0-100)

กรณีใช้งาน

แปลงค่าสี CSS
สร้างชุดสีจากสีพื้นฐาน
จับคู่สีของระบบดีไซน์
ทำความเข้าใจความสัมพันธ์ของสีผ่าน HSL

ประโยชน์หลัก

แปลงสีทันทีระหว่างรูปแบบ HEX, RGB และ HSL
ดูตัวอย่างสีแบบสด
ตรวจสอบอัตราส่วนคอนทราสต์ WCAG ด้วย_AA และ AAA อัตโนมัติ
เข้าถึงประวัติการแปลง
คัดลอกรูปแบบใดก็ได้ด้วยการคลิกเดียว
ทำงานในเบราว์เซอร์โดยไม่ส่งข้อมูล

เคล็ดลับ

ใช้ HSL เมื่อคุณต้องการสร้างสีที่หลากหลาย
ใช้ HEX เสมอสำหรับ CSS และ HTML
ตรวจสอบตัวเลือกสีของคุณกับข้อกำหนดคอนทราสต์ WCAG
กำหนดจานสีพื้นฐานของคุณใน HSL
ค่า HEX ไม่ไวตัวเล็ก-ตัวใหญ่

ข้อผิดพลาดที่พบบ่อย

ลืม prefixes # เมื่อป้อนสี HEX
ใช้ค่า RGB เกิน 255 หรือต่ำกว่า 0
สับสนช่วงฮิว HSL (0-360) กับ RGB (0-255)
สมมติว่าความสว่าง HSL และ RGB เท่ากัน

คำศัพท์สำคัญ

HEX: การแสดงสีฐานสิบหกที่ใช้ในการออกแบบ CSS และเว็บ
RGB: โมเดลสีแดง-เขียว-น้ำเงิน
HSL: โมเดลฮิว-ความอิ่มตัว-ความสว่าง
พื้นที่สี: แบบจำลองทางคณิตศาสตร์สำหรับจัดระเบียบและแสดงสี
อัตราส่วนคอนทราสต์ WCAG: มาตรการตัวเลขของความแตกต่างระหว่างข้อความและพื้นหลัง

แนวคิดที่เกี่ยวข้อง

ตัวแปลงหน่วย CSS: แปลงระหว่าง px, rem, em, vw และหน่วย CSS อื่นๆ
ตัวเข้ารหัส/ถอดรหัส Base64: เข้ารหัสและถอดรหัสสตริง Base64
ตัวจัดรูปแบบ JSON: จัดรูปแบบและตรวจสอบข้อมูล JSON
ตัวทดสอบ Regex: ทดสอบนิพจน์ทั่วไปกับข้อความตัวอย่าง
ตัวเข้ารหัส/ถอดรหัส URL: เข้ารหัสและถอดรหัสสตริง URL-safe

ตัวอย่าง

อินพุต: #FF5733 (HEX) → RGB: rgb(255, 87, 51) → HSL: hsl(11, 100%, 60%) อินพุต: hsl(200, 50%, 50%) → RGB: rgb(64, 149, 191) → HEX: #4095BF

การตีความผลลัพธ์

ตัวแปลงแสดงสีของคุณในทั้งสามรูปแบบพร้อมกัน HEX เป็นรูปแบบที่พบบ่อยที่สุด RGB ให้การควบคุมโดยตรงต่อช่องสีแต่ละช่อง HSL เป็นรูปแบบที่ใช้งานง่ายที่สุดสำหรับความเข้าใจของมนุษย์

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

HEX, RGB และ HSL ต่างกันอย่างไร?

HEX เป็นตัวแทนเลขฐานสิบหก 6 หลัก (#FF0000) RGB กำหนดสีเป็นค่าแดง/เขียว/น้ำเงิน (rgb(255, 0, 0)) HSL ใช้ค่าโทนสี ความอิ่มตัว และความสว่าง (hsl(0, 100%, 50%))

ควรใช้รูปแบบสีใด?

HEX เป็นที่นิยมที่สุดในการพัฒนาเว็บสำหรับสีที่เรียบง่าย RGB ให้การควบคุมที่แม่นยำเหนือช่องสี HSL เป็นมิตรกับมนุษย์มากที่สุด — ปรับ hue สำหรับสีต่างกัน saturation สำหรับความเข้ม และ lightness สำหรับความสว่าง

ข้อดีของ HSL คืออะไร?

HSL อ่านง่ายกว่าสำหรับมนุษย์ คุณสามารถสร้างชุดสีโดยรักษา S และ L ให้คงที่ในขณะที่เปลี่ยน H ตัวอย่างเช่น hsl(0, 50%, 50%) = แดง, hsl(120, 50%, 50%) = เขียว, hsl(240, 50%, 50%) = น้ำเงิน

ความต่างของสีคืออะไรและทำไมถึงสำคัญ?

ความต่างของสีคือความแตกต่างของความสว่างระหว่างข้อความพื้นหน้าและพื้นหลัง ความต่างที่สูงกว่าทำให้อ่านง่ายขึ้น โดยเฉพาะสำหรับผู้มีปัญหาการมองเห็น แนวทาง WCAG กำหนดอัตราส่วนขั้นต่ำ: 4.5:1 สำหรับข้อความปกติ (AA) และ 7:1 สำหรับการอ่านที่ดีขึ้น (AAA) เครื่องมือนี้คำนวณอัตราส่วนความต่างอัตโนมัติ

ฉันสามารถแปลง CMYK เป็น HEX หรือ RGB ได้หรือไม่?

CMYK (ใช้ในการพิมพ์) ไม่สามารถแปลงเป็น RGB/HEX (ใช้บนหน้าจอ) ได้โดยตรง เพราะใช้ขอบเขตสีที่ต่างกัน การแปลงขึ้นอยู่กับโปรไฟล์สีของคุณ (sRGB, Adobe RGB ฯลฯ) เครื่องมือนี้เน้นรูปแบบที่ใช้บนหน้าจอ (HEX, RGB, HSL) เนื่องจากใช้ขอบเขตสีเดียวกัน สำหรับงานพิมพ์ ควรใช้เครื่องมือแปลง CMYK เฉพาะกับโปรไฟล์สีเป้าหมายของคุณ

Alpha channel ใน RGBA ทำหน้าที่อะไร?

Alpha channel ควบคุมความโปร่งใส ตั้งแต่ 0 (โปร่งใสทั้งหมด) ถึง 1 (ทึบทั้งหมด) RGBA ขยาย RGB ด้วยค่าที่สี่นี้ เครื่องมือนี้รองรับสีทึบใน HEX, RGB และ HSL สำหรับสีโปร่งใส ให้เพิ่มค่า alpha เองใน CSS (เช่น rgba(59, 130, 246, 0.5))

ทำไม HEX และ RGB บางครั้งแสดงสีที่ต่างกันเล็กน้อย?

ไม่ควร — HEX และ RGB แสดงค่าสีที่เหมือนกันทุกประการ แต่ในรูปแบบที่ต่างกัน #FF0000 เท่ากับ rgb(255, 0, 0) หากคุณเห็นความแตกต่าง น่าจะเกิดจากการสอบเทียบ monitor ของคุณ

จะสร้างจานสีที่กลมกลืนกันได้อย่างไร?

ใช้ HSL เพื่อสร้างจานสี: รักษา saturation (S) และ lightness (L) ให้คงที่ในขณะที่เปลี่ยน hue (H) สำหรับสีที่เข้ากัน สำหรับสีที่คล้ายกัน ให้เปลี่ยน H 30–60 องศา สำหรับสีสามส่วน ใช้ค่า H ห่างกัน 120 องศา เครื่องมือนี้ให้คุณสำรวจความสัมพันธ์ของสีแบบโต้ตอบโดยการปรับค่า HSL และดูผลลัพธ์ทันที

sRGB และ Display P3 ต่างกันอย่างไร?

sRGB เป็นพื้นที่สีมาตรฐานสำหรับเนื้อหาเว็บ รองรับช่วงสีที่จำกัด Display P3 (ใช้ในอุปกรณ์ Apple และจอมอนิเตอร์สมัยใหม่) รองรับขอบเขตกว้างกว่า แสดงสีแดงและเขียวที่สดใสกว่า สำหรับการออกแบบเว็บ ควรใช้ค่า sRGB เสมอเพื่อความเข้ากันได้ สี Display P3 จะดูสดใสขึ้นบนหน้าจอที่รองรับ แต่อาจดูซีดบนจอรุ่นเก่า

จะทดสอบสีสำหรับผู้ใช้ที่เป็นโรคตาบอดสีได้อย่างไร?

ใช้อัตราส่วนความต่างเพื่อให้แน่ใจว่าอ่านได้โดยไม่คำนึงถึงการรับรู้สี การผสมผสานความต่างสูงอ่านได้ทั่วถึง หลีกเลี่ยงการพึ่งพาสีเพียงอย่างเดียวในการสื่อสารข้อมูล

ทำไมค่า RGB ของฉันดูแตกต่างกันบนหน้าจอ?

monitor ที่แตกต่างกันมี profile สี ความสว่าง และการตั้งค่าความต่างที่ต่างกัน นอกจากนี้ เบราว์เซอร์อาจแสดงสีต่างกันเล็กน้อย สำหรับการจับคู่สีที่สำคัญ ให้สอบเทียบ monitor ของคุณ

ค้นพบเครื่องมือเพิ่มเติม

คัดสรรใหม่จากคลังเครื่องมือทั้งหมดของเรา