แปลงสี HEX เป็น RGB

HEX และ RGB: สองวิธีเขียนสีเดียวกัน

ทุกสีที่คุณเห็นบนหน้าจอผสมมาจากแสงสามสี ได้แก่ แดง เขียว และน้ำเงิน เปิดทั้งสามขึ้นเต็มที่จะได้สีขาว ปิดทั้งหมดจะได้สีดำ HEX และ RGB คือเพียงสัญลักษณ์สองแบบสำหรับอธิบายว่าแต่ละ channel ทั้งสามนั้นควรสว่างแค่ไหน พวกมันชี้ไปยังสีเดียวกันทุกประการ ดังนั้น converter ที่ดีจึงแปลระหว่างระบบการเขียนสองแบบโดยไม่เปลี่ยนโทนสีจริงๆ เลย นั่นคือสิ่งที่เครื่องมือนี้ทำ ทั้งหมดในเบราว์เซอร์ของคุณ พร้อมแสดง swatch สดๆ เพื่อให้คุณยืนยันผลลัพธ์ด้วยตาของคุณเอง

วิธีอ่าน hex code

Hex color มีลักษณะเช่น #1E90FF เครื่องหมาย hash แค่ระบุจุดเริ่มต้น อักขระหกตัวที่ตามมาคือสามคู่ เขียนตามรูปแบบ #RRGGBB คู่แรกคือสีแดง คู่ที่สองคือสีเขียว คู่ที่สามคือสีน้ำเงิน แต่ละคู่คือตัวเลขเขียนในเลขฐานสิบหก หมายถึงฐาน 16 ซึ่งตัวเลขวิ่งตั้งแต่ 0-9 แล้ว A, B, C, D, E, F แทนค่า 10 ถึง 15 หนึ่งคู่สามารถถือค่าตั้งแต่ 00 (channel ปิดสนิท) ถึง FF (เปิดเต็มที่) ในเลขฐานสิบธรรมดา ช่วงนั้นคือ 0 ถึง 255 ซึ่งเป็น scale เดียวกับที่ RGB ใช้ ด้วย 256 ระดับที่เป็นไปได้ต่อ channel รูปแบบหกหลักสามารถอธิบายสีได้ 16,777,216 สีที่แตกต่างกัน

การแปลงทั้งสองทิศทาง พร้อมตัวอย่างที่ทำงานได้

การแปลงจาก HEX เป็น RGB แบ่ง code เป็นสามคู่แล้วแปลงแต่ละคู่จากฐาน 16 เป็นเลขฐานสิบธรรมดา ลอง #1E90FF คู่แดงคือ 1E: นั่นคือ 1 คูณ 16 บวก 14 (E) เท่ากับ 30 คู่เขียว 90 คือ 9 คูณ 16 บวก 0 เท่ากับ 144 คู่น้ำเงิน FF คือ 15 คูณ 16 บวก 15 เท่ากับ 255 ดังนั้น #1E90FF กลายเป็น rgb(30, 144, 255) ซึ่งเป็นสีน้ำเงินสดใส dodger blue ที่คุ้นเคย

การไปทิศทางตรงกันข้ามเป็นกระบวนการเดียวกันกลับด้าน นำตัวเลข RGB แต่ละตัวมาเขียนเป็นสองหลักเลขฐานสิบหก สีแดงบริสุทธิ์ rgb(255, 0, 0) ได้ FF, 00 และ 00 ซึ่งรวมกันเป็น #FF0000 สิ่งหนึ่งที่ควรจำไว้: หากค่าต่ำกว่า 16 คุณยังต้องใช้สองหลัก ดังนั้น 5 เขียนเป็น 05 ไม่ใช่แค่ 5 converter จัดการ padding นั้นให้คุณ แต่มันทำให้คนสะดุดเมื่อทำด้วยมือ

แต่ละรูปแบบใช้ที่ไหน

HEX คือภาษาประจำวันของเว็บ CSS, HTML และโค้ดส่วนใหญ่ที่คุณเขียนใช้ hex codes เพราะกะทัดรัดและ copy ง่าย RGB มักปรากฏในเครื่องมือออกแบบและภาพ เช่น Figma, Photoshop, Sketch และ Illustrator โดยปกติจะแสดง sliders หรือ fields ในช่วง 0-255 และ app ถ่ายวิดีโอหรือบันทึกหน้าจอมักต้องการ RGB ด้วย ดังนั้นคุณจึงมักหยิบ hex code จาก stylesheet และต้องการรูปแบบ RGB เพื่อพิมพ์ลงในแผง design หรือกลับกัน การเดินทางไปกลับนั้นแหละคือเหตุผลทั้งหมดที่ converter มีประโยชน์ หากคุณต้องการสร้างชุดสีที่เข้ากันทั้งชุดแทนที่จะแปลแค่หนึ่งสี color palette generator ของเราคือจุดเริ่มต้นที่ดีกว่า และคุณจะพบ utility อื่นๆ เช่นนี้ภายใต้เครื่องมือสำหรับนักพัฒนา

Alpha, opacity และ HSL

ทั้งสองสัญลักษณ์มีรูปแบบขยายที่เพิ่มความโปร่งใส RGB กลายเป็น rgba(30, 144, 255, 0.5) โดยค่าที่สี่คือ alpha ซึ่ง 0 คือโปร่งใสสนิทและ 1 คือทึบสนิท HEX เพิ่มคู่ที่สี่สำหรับจุดประสงค์เดียวกัน ได้ code แปดหลัก #RRGGBBAA; 80 เป็นต้น คือความทึบประมาณ 50 เปอร์เซ็นต์ Converter บางตัวยังเสนอ HSL (hue, saturation, lightness) ซึ่งอธิบายสีแบบที่มนุษย์คิด เลือก hue บนวงล้อ จากนั้นปรับความสดใสและความสว่าง HSL เป็นโมเดลทางความคิดที่ต่างออกไปมากกว่าจะเป็น palette ที่ต่างกัน ดังนั้นจึงอาจง่ายกว่าเมื่อคุณต้องการทำให้สีสว่างขึ้นหรือหม่นขึ้นโดยไม่ต้องยุ่งกับตัวเลขสามตัวแยกกัน

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