แปลงสีระหว่าง HEX, RGB และ HSL

สามรูปแบบการเขียนของสีเดียวกัน

สำรวจสี แสดงทั้งสามรูปแบบตามค่าเริ่มต้น พร้อมตัวอย่างสี สำหรับสีเขียว #2F4A3F:

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

รูปแบบการเขียนที่รองรับ

ชื่อสีอย่าง “rouge” และช่องสีที่อยู่นอกช่วง 0 ถึง 255 เช่น rgb(300, 0, 0) จะถูกปฏิเสธพร้อมข้อความที่แสดงรายการรูปแบบที่รองรับ

ความโปร่งใส

ความโปร่งใสเขียนใน HEX เป็นแปดหลัก หรือหลังเครื่องหมายทับที่มีช่องว่าง สี rgb(47 74 63 / 50%) ให้ #2f4a3f80 ใน HEX และ rgba(47, 74, 63, 0.5) ใน RGB ในทางกลับกัน #2F4A3F80 ให้ความทึบ 0.502 เพราะ 80 ในเลขฐานสิบหกคือ 128 จาก 255

ทำไมการแปลงไปกลับจึงเปลี่ยนหนึ่งระดับ

HSL แสดงเป็นจำนวนเต็ม คือเฉดสีเป็นองศา ความอิ่มตัวและความสว่างเป็นเปอร์เซ็นต์ การแปลงจาก HSL กลับเป็น HEX จึงไปลงที่สีข้างเคียง ไม่ใช่สีเริ่มต้น

ความต่างคือหนึ่งระดับในแต่ละช่องสี มองไม่เห็นด้วยตา สำหรับดีไซน์โทเค็นหรือแบรนด์ ให้เก็บ HEX เดิมเป็นค่าอ้างอิงและอย่าผ่าน HSL อีก

สีเทา

สีเทามีความอิ่มตัวเป็นศูนย์และเฉดสีไม่มีผล #808080 ให้ rgb(128, 128, 128) และ hsl(0, 0%, 50%)

สิ่งที่เครื่องมือไม่ได้วัด

การแปลงรูปแบบไม่ได้บอกอะไรเกี่ยวกับความอ่านง่าย เครื่องมือไม่คำนวณคอนทราสต์ระหว่างข้อความกับพื้นหลัง ให้ตรวจสอบแยกต่างหากก่อนเผยแพร่ กรณีของ QR Code ที่คอนทราสต์เป็นตัวกำหนดว่าอ่านได้หรือไม่ อธิบายไว้ใน สร้าง QR Code ที่สแกนติดตั้งแต่ครั้งแรก

ตรวจสอบการแปลง

1. วางสีลงในช่อง ตัวอย่างต้องตรงกับที่คุณคาดไว้
2. คัดลอกรูปแบบที่ระบบของคุณต้องการ
3. หากต้องการเก็บสีให้ตรงเป๊ะ ให้เก็บ HEX หรือ RGB แทน HSL

สำรวจสี