แปลง RGB เป็น HEX Red Green Blue ↔ Hexadecimal ฟรี ออนไลน์ ปลอดภัย

ทำไมคุณจึงแปลง RGB เป็น HEX

โปรแกรมแก้ไขรูปภาพ เครื่องมือเลือกสีในระบบปฏิบัติการ หรือบรรทัดของโค้ดให้สีแก่คุณเป็นตัวเลขสามตัว: 90, 70, 50 สไตล์ชีต ไฟล์โทเค็นการออกแบบ หรือข้อความถึงเพื่อนร่วมงานต้องการเป็นรหัสสั้น ๆ เพียงหนึ่งเดียว: #5A4632 ขั้นตอนระหว่างสองอย่างนี้คือสิ่งที่หน้านี้ทำ การแปลง RGB เป็น HEX คือการเขียนตัวเลขสามตัวเดียวกันในฐานสิบหก ตัวละสองหลัก และใส่เครื่องหมายแฮชไว้ข้างหน้า ทำได้ง่ายสำหรับสีเดียวและน่าเบื่อสำหรับยี่สิบสี และผิดพลาดได้ง่ายเมื่อตัวเลขต้องมีศูนย์นำหน้าหรือหลักหนึ่งเป็นตัวอักษร

การแปลงนี้แม่นยำ ซึ่งไม่เป็นจริงกับการแปลงสีทุกแบบ HEX และ rgb() คือการสะกดสองแบบของตัวเลขสามตัวเดียวกัน คือปริมาณแสงแดง เขียว และน้ำเงินที่หน้าจอควรปล่อย แต่ละตัวตั้งแต่ 0 ถึง 255 ไม่มีสิ่งใดถูกประมาณ และการไปกลับคืนค่าที่เริ่มต้น หน้านี้ทำในเบราว์เซอร์ของคุณ และไม่มีสิ่งใดถูกอัปโหลด ด้านล่างคุณจะพบวิธีที่ตัวเลขแต่ละตัวกลายเป็นเลขฐานสิบหกสองหลัก วิธีที่ความโปร่งใสถูกนำข้ามไป ขีดจำกัดของ sRGB สถานการณ์ที่ผู้คนต้องแปลง RGB เป็น HEX และนิสัยบางอย่างที่ทำให้สีในโปรเจกต์สอดคล้องกัน

การแปลงทำงานอย่างไร

ตัวเลขแต่ละตัวกลายเป็นเลขฐานสิบหกสองหลัก

ยกตัวอย่าง rgb(90, 70, 50) หารตัวเลขแต่ละตัวด้วยสิบหก: 90 คือ 5 คูณ 16 บวก 10 และ 10 คือหลัก A ดังนั้น 90 กลายเป็น 5A ส่วน 70 คือ 4 คูณ 16 บวก 6 จึงเป็น 46 และ 50 คือ 3 คูณ 16 บวก 2 จึงเป็น 32 นำสามคู่มารวมกันและเติมเครื่องหมายแฮช: #5A4632 หน้านี้ทำให้คุณขณะที่คุณพิมพ์ และแสดงประโยค rgb(90, 70, 50) = #5A4632 เพื่อให้คุณตรวจสอบ

ศูนย์นำหน้า

ทุกคู่ต้องมีสองหลัก ตัวเลขที่ต่ำกว่า 16 ต้องมีศูนย์นำหน้า: 7 กลายเป็น 07 และ 0 กลายเป็น 00 ดังนั้น rgb(0, 7, 255) คือ #0007FF ไม่ใช่ #07FF ซึ่งจะหมายถึงสิ่งที่ต่างกันอย่างสิ้นเชิง การลืมศูนย์คือข้อผิดพลาดที่พบบ่อยที่สุดเมื่อแปลงด้วยมือ

ช่วงค่า

ตัวเลขแต่ละตัวต้องอยู่ระหว่าง 0 ถึง 255 ค่าที่เกิน 255 เขียนด้วยเลขฐานสิบหกสองหลักไม่ได้ และค่าติดลบไม่มีความหมาย หากการคำนวณในโค้ดของคุณให้ 270 หรือ −5 ให้จำกัดให้อยู่ในช่วงก่อน ตัวแปลงทำเช่นเดียวกัน เพื่อไม่ให้สร้างรหัสที่ไม่ถูกต้องเลย

สิ่งที่การแปลงคงไว้และสิ่งที่ทำไม่ได้

คงสีไว้อย่างแม่นยำ

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

นำความโปร่งใสข้ามไปด้วย

ค่าที่สี่สำหรับความโปร่งใสก็ถูกนำข้ามไปด้วย: #RRGGBBAA กลายเป็น rgba() และกลับ ความโปร่งใส 0.5 กลายเป็นคู่ 80 เพราะครึ่งหนึ่งของ 255 คือราว 128 ซึ่งเป็น 80 ในเลขฐานสิบหก ดังนั้น rgba(90, 70, 50, 0.5) คือ #5A463280 เบราว์เซอร์ปัจจุบันทั้งหมดรับเลขฐานสิบหกแปดหลัก

ไม่อาจอธิบายสีนอก sRGB

การสะกดทั้งสองแบบอธิบาย sRGB ซึ่งเป็นปริภูมิสีที่หน้าจอใช้มาสามสิบปี ไม่อาจอธิบายสีนอกนั้น ซึ่งเป็นเหตุผลที่สัญกรณ์ CSS ใหม่กว่า lab(), oklch() และ color() มีอยู่ หากคุณเริ่มจากสีในเครื่องมือขอบเขตสีกว้าง ตัวเลขสามตัวที่คุณคัดลอกเป็นเวอร์ชัน sRGB อยู่แล้ว และเลขฐานสิบหกตรงกับตัวเลขเหล่านั้น

ไม่รักษารูปแบบย่อ

ที่ซึ่งรหัสเขียนเป็นสามหลักได้ เช่น #AABBCC เป็น #ABC ตัวแปลงให้รูปแบบเต็ม รูปแบบเต็มใช้ได้เสมอและเป็นสีเดียวกัน รูปแบบย่อเป็นเพียงความสะดวกสำหรับผู้อ่าน

สีทั่วไปและรหัสของมัน

ไม่กี่ค่าที่ควรจำ

rgb(255, 255, 255) คือ #FFFFFF สีขาว: แสงทั้งสามเต็มกำลัง rgb(0, 0, 0) คือ #000000 สีดำ: ไม่มีแสงเลย rgb(255, 0, 0) คือ #FF0000 สีแดงล้วน rgb(0, 255, 0) คือ #00FF00 และ rgb(0, 0, 255) คือ #0000FF สีใดที่มีตัวเลขสามตัวเท่ากันคือสีเทา และรหัสของมันมีสามคู่ที่เท่ากัน: rgb(128, 128, 128) คือ #808080

นิสัยแบบ web-safe

คู่มือเก่ากล่าวถึงสี web-safe ซึ่งคู่ของมันเป็นเพียง 00, 33, 66, 99, CC หรือ FF เท่านั้น มันเป็นของยุคจอ 256 สีและไม่มีเหตุผลที่จะอยู่ต่อ ใช้ค่าใดก็ได้ที่คุณชอบ หน้าจอแสดงได้ทั้งหมด

วิธีแปลง RGB เป็น HEX ที่นี่

พิมพ์ตัวเลขสามตัว

ใส่สีในช่องแรกในรูปแบบ rgb(90, 70, 50) หรือใช้ตัวเลขที่คั่นด้วยจุลภาคหรือเว้นวรรค ไม่ต้องใช้เปอร์เซ็นต์ ใช้ตัวเลขตั้งแต่ 0 ถึง 255

อ่านรหัสฐานสิบหก

คำตอบปรากฏทันทีในอีกช่องหนึ่ง เริ่มด้วยเครื่องหมายแฮช เป็นตัวอักษรพิมพ์ใหญ่ หากคุณให้ค่าที่สี่สำหรับความโปร่งใส รหัสจะมีแปดหลัก

คัดลอกลงในงานของคุณ

วางรหัสลงในสไตล์ชีต ไฟล์โทเค็น หรือข้อความ เพิ่มลงในบันทึกจานสีของคุณเพื่อให้การแปลงครั้งต่อไปเป็นเพียงการค้นหา

สัญกรณ์เหล่านี้มาจากไหน

เลขฐานสิบหกและ RGB คือสิ่งเดียวกันที่เขียนสองครั้ง

สีบนหน้าจอคือตัวเลขสามตัว คือปล่อยแสงแดง เขียว และน้ำเงินเท่าใด แต่ละตัวตั้งแต่ 0 ถึง 255 ซึ่งคือหนึ่งไบต์ เลขฐานสิบหกเพียงเขียนไบต์เหล่านั้นในฐานสิบหก ดังนั้น #FF8800 และ rgb(255, 136, 0) จึงเป็นคำสั่งเดียวกันถึงพิกเซลเดียวกัน

HSL และ CMYK

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

คุณพบมันที่ไหน

ในการส่งมอบงานออกแบบ

นักออกแบบทำงานในโปรแกรมที่แสดงค่า rgb หรือเครื่องมือเลือกสี นักพัฒนาต้องการเลขฐานสิบหกสำหรับสไตล์ชีต การแปลง RGB เป็น HEX คือขั้นตอนตรงกลาง และทำสำหรับทุกสีในจานสี

ในสคริปต์ที่คำนวณสี

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

ในการแสดงข้อมูลด้วยภาพ

ไลบรารีแผนภูมิรับสีเป็นสตริงฐานสิบหก จานสีที่สร้างด้วยวิธีเชิงตัวเลขออกมาเป็นชุดสามค่าของ rgb ขั้นตอนการแปลงเปลี่ยนอย่างหนึ่งเป็นอีกอย่างหนึ่ง

ในเอกสารและงานนำเสนอ

โปรแกรมออฟฟิศแสดงสีเป็นตัวเลข RGB โปรแกรมแก้ไขเว็บต้องการเลขฐานสิบหก เมื่อสีแบรนด์ต้องปรากฏในทั้งสองแบบ การแปลงทำให้เหมือนกัน

กับดักเมื่อคุณแปลง RGB เป็น HEX

ลืมศูนย์นำหน้า

การเขียน 7 เป็น 7 แทนที่จะเป็น 07 ทำให้ทุกหลักที่ตามมาเลื่อน ใช้สองหลักต่อคู่เสมอ

สับสนเปอร์เซ็นต์กับ 0 ถึง 255

rgb(35%, 27%, 20%) เป็นการสะกดตัวเลขอีกแบบ โดย 100 เปอร์เซ็นต์คือ 255 หากแหล่งของคุณใช้เปอร์เซ็นต์ ให้แปลงเป็น 0 ถึง 255 ก่อน: คูณด้วย 2.55

ข้อผิดพลาดการปัดเศษในสีที่คำนวณ

สคริปต์ที่ให้ 127.5 ต้องตัดสินว่าเป็น 127 หรือ 128 ความแตกต่างมองไม่เห็น แต่ทำให้เกิดสองรหัสสำหรับสิ่งที่คุณคิดว่าเป็นสีเดียว ปัดเศษแบบเดียวกันทุกที่

เอาสีจากภาพหน้าจอ

สีที่อ่านจากภาพหน้าจอผ่านการจัดการสีของหน้าจอและอาจผ่านการบีบอัด อาจต่างจากต้นฉบับหนึ่งหรือสองขั้น ใช้ไฟล์ออกแบบเมื่อทำได้

คำถามที่ผู้คนถามก่อนแปลง

rgb(255, 0, 0) เป็นเลขฐานสิบหกคืออะไร

#FF0000 สีแดงล้วน

rgb(0, 0, 0) เป็นเลขฐานสิบหกคืออะไร

#000000 สีดำ

ใช้ตัวพิมพ์เล็กในรหัสฐานสิบหกได้หรือไม่

ได้ #5a4632 และ #5A4632 เป็นสีเดียวกัน หน้านี้เขียนเป็นตัวพิมพ์ใหญ่

การแปลงแม่นยำหรือไม่

ใช่ เป็นการสะกดสองแบบของตัวเลขสามตัวเดียวกัน

สีของฉันถูกอัปโหลดหรือไม่

ไม่ การคำนวณทำงานในเบราว์เซอร์ของคุณ และไม่มีสิ่งใดถูกส่งไปที่ใด

ฉันจะแปลงกลับอย่างไร

ด้วยHEX เป็น RGB ซึ่งอ่านสามคู่เป็นตัวเลข

นิสัยที่ทำให้สีสอดคล้องกันในโปรเจกต์

กำหนดแต่ละสีเพียงครั้งเดียว

ใส่จานสีของคุณใน custom properties เช่น --brand: #5A4632 และอ้างถึงสีด้วยชื่อ เมื่อคุณแปลง RGB เป็น HEX สำหรับสีใหม่ คุณเพิ่มหนึ่งบรรทัด และทุกการใช้งานตามไปด้วย

เลือกตัวพิมพ์แบบเดียว

เลือกตัวพิมพ์ใหญ่หรือเล็กสำหรับรหัสฐานสิบหกและยึดตามนั้น การค้นหาสีในโค้ดจึงเชื่อถือได้

บันทึกแหล่งที่มา

ข้างสีแต่ละสี จดว่ามาจากไหน: คู่มือแบรนด์ โลโก้ หรือรูปภาพที่สุ่มตัวอย่าง เมื่อเกิดคำถามว่าสีถูกต้องหรือไม่ คุณรู้ว่าจะตรวจที่ไหน

ทดสอบคอนทราสต์

สำหรับข้อความบนพื้นหลังสี ให้ตรวจอัตราส่วนคอนทราสต์ด้วยเครื่องมือ ตัวเลขจากรูปแบบ rgb ป้อนเข้าสูตรได้โดยตรง และรูปแบบฐานสิบหกคือสิ่งที่คุณพิมพ์ในเครื่องมือตรวจส่วนใหญ่

ทำไมจึงเป็น 256 ขั้น และอะไรอยู่เบื้องหลังตัวเลข

แปดบิตสำหรับแสงแต่ละสี

ตัวเลขแต่ละตัวจากสามตัวเก็บในแปดบิต ซึ่งให้ 256 ค่าตั้งแต่ 0 ถึง 255 ทั้งสามรวมกันให้ 256 × 256 × 256 ประมาณ 16.7 ล้านการผสม ซึ่งมากกว่าที่ตาแยกแยะได้ในสภาพส่วนใหญ่ นั่นคือเหตุผลที่รหัสฐานสิบหกยาวหกหลักพอดี: สองหลักสำหรับแสงแต่ละสี ไม่มากไม่น้อยกว่า เมื่อคุณแปลง RGB เป็น HEX คุณกำลังเขียนสามไบต์ในรูปแบบกะทัดรัดที่สุดที่ผู้คนตกลงกันได้

ทำไมขั้นที่เท่ากันจึงดูไม่เท่ากัน

ตัวเลขไม่ได้เป็นสัดส่วนกับแสงที่ไปถึงตาของคุณ หน้าจอใช้เส้นโค้ง ใกล้เคียงกับกำลัง 2.2 เพื่อให้โทนมืดได้ 256 ขั้นมากกว่าโทนสว่าง ซึ่งเหมาะกับตา ขั้นจาก 10 เป็น 20 ดูเหมือนการเปลี่ยนแปลงที่ใหญ่กว่าขั้นจาก 240 เป็น 250 สำหรับคุณ นี่หมายความว่าการหาค่าเฉลี่ยของสองสีโดยเฉลี่ยตัวเลขของมันไม่ได้สีที่คุณจะเห็นจากการผสมแสง ข้อเท็จจริงที่สำคัญเมื่อคุณคำนวณการไล่สีและการผสมในโค้ด

สีเทาและเส้นทแยงมุม

สีเทาทั้งหมดอยู่บนเส้นที่ตัวเลขสามตัวเท่ากัน มี 256 สี ตั้งแต่ดำที่ 0 ถึงขาวที่ 255 หากคุณแปลง RGB เป็น HEX แล้วสามคู่ตรงกัน คุณรู้ทันทีว่าสีนั้นไม่มีเฉดสี สีเกือบเทาที่คู่ต่างกันหนึ่งหรือสองขั้นมีสีเจือจาง ซึ่งนักออกแบบมักใช้เพื่อให้สีกลางมีนัยของความอุ่นหรือความเย็น

การสร้างและตรวจจานสี

จากสีที่เลือกไม่กี่สีสู่จานสี

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

คอนทราสต์ระหว่างข้อความและพื้นหลัง

ข้อความที่อ่านง่ายต้องมีความต่างของความสว่างเพียงพอระหว่างตัวอักษรกับพื้นหลัง แนวทางด้านการเข้าถึงกำหนดอัตราส่วนคอนทราสต์ที่คำนวณจากค่าแดง เขียว และน้ำเงินของสองสี และขอให้ได้อย่างน้อย 4.5 ต่อ 1 สำหรับข้อความปกติ เครื่องมือตรวจรับรหัสฐานสิบหก ดังนั้นรหัสที่คุณสร้างที่นี่ใส่เข้าไปได้ทันที ตรวจทุกคู่ที่คุณวางแผนจะใช้ ไม่ใช่เฉพาะสีหลักบนสีขาว

การแปลงเป็นรายการ

เมื่อคุณมีสีมากมายที่ต้องแปลง ให้ทำทีละสีและวางแต่ละผลลัพธ์ลงในตารางพร้อมชื่อและการใช้งาน ใช้เวลาหนึ่งนาทีต่อสี และตารางกลายเป็นข้อมูลอ้างอิงของทั้งโปรเจกต์ หากสีถูกปรับภายหลัง เปลี่ยนเฉพาะแถวของมัน

ทำให้ฐานสิบหกและ rgb ตรงกัน

หากโปรเจกต์ของคุณเก็บบางสีเป็นฐานสิบหกและบางสีเป็น rgb สีเหล่านั้นแยกจากกันได้ง่ายเมื่อมีคนแก้ไขอันหนึ่งและลืมอีกอัน เลือกอันหนึ่งเป็นต้นแบบ ปกติคือฐานสิบหก และสร้างอีกอันด้วยตัวแปลงเมื่อใดก็ตามที่ต้องการ

ตัวแปลงที่เกี่ยวข้อง

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

ตัวอย่างที่คำนวณให้ดู

สมมติว่าเครื่องมือเลือกสีในโปรแกรมแก้ไขรูปภาพบอกว่าสีเน้นของภาพถ่ายคือ rgb(214, 98, 56) คุณพิมพ์ตัวเลขสามตัวและอ่านได้ #D66238 ในสไตล์ชีตคุณเขียน --accent: #D66238 และใช้กับปุ่มและลิงก์ เพื่อนร่วมงานถามว่าสีนั้นในคู่มือแบรนด์คืออะไร และคุณส่งรหัสให้ ต่อมาคุณต้องการเวอร์ชันโปร่งแสงสำหรับแบนเนอร์ และคุณแปลงกลับด้วย HEX เป็น RGB เพื่อสร้าง rgba(214, 98, 56, 0.15) การแปลงทั้งสองแม่นยำ แบนเนอร์จึงมีเฉดสีเดียวกับปุ่ม

รายการตรวจสั้น ๆ

ก่อนแปลง

ตรวจว่าตัวเลขแต่ละตัวอยู่ระหว่าง 0 ถึง 255 ตัดสินใจว่าคุณต้องการความโปร่งใสหรือไม่

ระหว่างแปลง

พิมพ์ตัวเลขสามตัว อ่านรหัส และคัดลอกพร้อมเครื่องหมายแฮช

หลังแปลง

ทดสอบสีในบริบท บนพื้นหลังจริง และตรวจคอนทราสต์ของข้อความใด ๆ ที่อยู่บนสีนั้น

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

ทิ้งศูนย์นำหน้า

แต่ละคู่มีสองหลัก 7 คือ 07

เขียนตัวเลขที่เกิน 255

เขียนด้วยสองหลักไม่ได้ จำกัดค่าก่อน

ถือว่าหน้าจอคือความจริง

ตัวเลขแม่นยำ ลักษณะที่เห็นขึ้นอยู่กับจอแสดงผล

สีของคุณอยู่บนอุปกรณ์ของคุณ

การคำนวณเกิดขึ้นในเครื่อง ค่าของคุณถูกใช้โดยเบราว์เซอร์ของคุณเอง และไม่มีสิ่งใดถูกส่งไปที่ใด ไม่มีอะไรให้ลบภายหลัง และไม่ต้องสร้างบัญชี นั่นคือวิธีตรงไปตรงมาในการแปลง RGB เป็น HEX

สรุป

หากต้องการแปลง RGB เป็น HEX ที่นี่ ให้พิมพ์ตัวเลขสามตัวและอ่านรหัสฐานสิบหกทันที การแปลงคงสีไว้อย่างแม่นยำ: HEX และ rgb() คือการสะกดสองแบบของตัวเลขสามตัวเดียวกัน 0 ถึง 255 สำหรับแดง เขียว และน้ำเงิน จึงไม่มีสิ่งใดถูกประมาณ และการไปกลับคืนค่าที่เริ่มต้น ค่าที่สี่สำหรับความโปร่งใสก็ถูกนำข้ามไปด้วย เพราะ rgba() กลายเป็น #RRGGBBAA และกลับ การสะกดทั้งสองแบบอธิบาย sRGB จึงอธิบายสีนอกนั้นไม่ได้ ทุกคู่มีสองหลัก ตัวเลขที่ต่ำกว่า 16 จึงได้ศูนย์นำหน้า ไม่มีสิ่งใดถูกอัปโหลด