24 converter หน่วย · สกุลเงิน · ไฟล์

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

พิมพ์ค่าเป็น HEX แล้วอ่านค่าเป็น RGB ได้ทันที การคำนวณทำในเบราว์เซอร์ ไม่มีอะไรถูกส่งไปที่ใด และสิ่งที่การแปลงนี้ขึ้นอยู่กับก็เขียนไว้ด้านล่าง ไม่ได้สันนิษฐานเอาเอง

แปลงค่า

แม่นยำทั้งสองทาง
HEX
rgb(90, 70, 50) RGB
สีเดียว เขียนได้สองแบบ

#5A4632 = rgb(90, 70, 50)

เกี่ยวกับตัวแปลงนี้
สูตร #RRGGBB → rgb(R, G, B)
สิ่งที่คงไว้ สีตรงตามเดิมทุกประการ hex และ rgb() เป็นการเขียนตัวเลขสามตัวเดียวกันสองแบบ — 0 ถึง 255 สำหรับแดง เขียว และน้ำเงิน — จึงไม่มีอะไรถูกประมาณ และการไปกลับจะได้สิ่งที่เริ่มต้นมา ค่าที่สี่สำหรับความโปร่งใสก็ข้ามมาด้วย: #RRGGBBAA กลายเป็น rgba() และกลับกัน.
สิ่งที่ทำไม่ได้ การเขียนทั้งสองแบบอธิบาย sRGB ซึ่งเป็นปริภูมิสีที่หน้าจอใช้มาสามสิบปี อธิบายสีนอกปริภูมินั้นไม่ได้ ซึ่งเป็นเหตุที่มีรูปแบบ CSS ที่ใหม่กว่า — lab(), oklch(), color() — การเขียนแบบย่อจะถูกขยาย ไม่ถูกคงไว้: #abc กลับมาเป็น #AABBCC ซึ่งเป็นสีเดียวกันที่เขียนแบบยาว.
ทำงานที่ไหน ในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลด จึงไม่มีอะไรต้องลบทีหลัง

ไม่มีการอัปโหลด

ที่มาของระบบสีเหล่านี้

Hex กับ RGB คือสิ่งเดียวกันที่เขียนสองแบบ สีบนหน้าจอคือตัวเลขสามค่า ได้แก่ปริมาณแสงสีแดง เขียว และน้ำเงินที่ต้องปล่อยออกมา แต่ละค่าอยู่ระหว่าง 0 ถึง 255 ซึ่งเท่ากับหนึ่งไบต์ ส่วน hex เป็นเพียงการเขียนไบต์เหล่านั้นในเลขฐานสิบหก ดังนั้น #FF8800 กับ rgb(255, 136, 0) จึงเป็นคำสั่งเดียวกันถึงพิกเซลเดียวกัน HSL ถูกคิดขึ้นเพราะทั้งสองแบบแรกมนุษย์อ่านเข้าใจยาก โดยระบุเฉดสีเป็นมุมรอบวงล้อสี ส่วนความอิ่มตัวและความสว่างเป็นเปอร์เซ็นต์ นักออกแบบจึงทำให้สีสว่างขึ้นได้โดยไม่ต้องคำนวณตัวเลขสามค่าใหม่ CMYK เป็นของอีกโลกหนึ่งโดยสิ้นเชิง คือโลกของหมึกไม่ใช่แสง เป็นระบบแบบลบสี สร้างจากแม่พิมพ์สี่แผ่น และแสดงสีได้ไม่ครบเท่าที่หน้าจอแสดงได้ เพราะหน้าจอเปล่งแสง ขณะที่กระดาษทำได้เพียงสะท้อนแสง

ที่คุณจะพบระบบสีเหล่านี้

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

คำถามที่คนมักถาม

ทำไมผล CMYK ที่ได้จึงต่างจากที่โรงพิมพ์ให้มา

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

ทำไมสีบางสีบนหน้าจอจึงพิมพ์ออกมาไม่ได้

เพราะทั้งสองระบบแสดงสีได้ไม่เท่ากัน หน้าจอสร้างสีโดยการเพิ่มแสงและแสดงสีฟ้าอมเขียวหรือสีเขียวที่สดและอิ่มตัวได้ ซึ่งหมึกทำให้เหมือนไม่ได้ ส่วนกระดาษสร้างสีโดยการดูดกลืนแสง และสว่างได้มากที่สุดเพียงเท่าสีขาวของกระดาษ ชุดสีที่แต่ละระบบแสดงได้เรียกว่าขอบเขตสี (gamut) และในส่วนที่ไม่ทับซ้อนกัน การแปลงต้องเลือกสีที่ใกล้เคียงที่สุดเท่าที่มี นี่จึงเป็นเหตุผลที่สีสว่างบนหน้าจอมักดูหม่นลงเล็กน้อยเมื่อพิมพ์

คำตอบแม่นยำหรือไม่?

ถ้าหน่วยทั้งสองกำหนดค่าอิงกันด้วยจำนวนเต็ม คำตอบก็แม่นยำ — หน้านี้บอกไว้เหนือตัวเลข และการปัดเศษมีเพียงในจำนวนหลักที่แสดง แต่ถ้าอัตราส่วนไม่เป็นทศนิยมจำกัด หน้านี้จะแสดง 12 หลักนัยสำคัญ และบอกว่าความสัมพันธ์นั้นเป็นค่าประมาณ แทนที่จะแสร้งว่าแม่นยำ

สิ่งที่ฉันพิมพ์จะออกจากอุปกรณ์ของฉันหรือไม่?

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

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

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

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

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

ตัวเลขสามคู่กลายเป็นตัวเลขสามตัว

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

ทำไมตัวเลขจึงไปตั้งแต่ 0 ถึง F

ฐานสิบหกต้องใช้สัญลักษณ์สิบหกตัว ดังนั้นหลัง 9 จึงมีตัวอักษร A ถึง F ซึ่งแทน 10 ถึง 15 ตัวเลขเช่นนี้หนึ่งคู่ให้ 16 × 16 = 256 ค่า ซึ่งเป็นสิ่งที่หนึ่งไบต์เก็บได้พอดี สีบนหน้าจอคือสามไบต์ และเฮกซ์เป็นเพียงวิธีที่กะทัดรัดในการเขียนมัน: หกตัวอักษรแทนตัวเลขสามตัวที่มีจุลภาคและวงเล็บ

ตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก

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

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

เก็บสีไว้อย่างแน่นอน

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

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

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

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

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

รูปแบบย่อถูกขยาย ไม่ได้ถูกเก็บไว้

รูปแบบย่อถูกขยายแทนที่จะถูกเก็บไว้: #abc กลับมาเป็น #AABBCC ซึ่งเป็นสีเดียวกันที่เขียนแบบยาว แต่ละหลักถูกทำซ้ำสองเท่า นั่นหมายความว่าคุณวางโค้ดสามหลักและได้ตัวเลขที่ถูกต้อง แต่คุณกู้การเขียนแบบสั้นจากแบบยาวด้วยการมองไม่ได้ ทำได้เพียงตรวจว่าแต่ละคู่ซ้ำกัน

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

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

สีขาวคือ #FFFFFF ซึ่งคือ rgb(255, 255, 255): แสงทั้งสามสีเต็มกำลัง สีดำคือ #000000, rgb(0, 0, 0): ไม่มีแสงเลย สีแดงบริสุทธิ์คือ #FF0000 เขียว #00FF00 และน้ำเงิน #0000FF สีเทากลางคือโค้ดใด ๆ ที่มีสามคู่เท่ากัน เช่น #808080 ซึ่งคือ rgb(128, 128, 128) คู่ที่เท่ากันหมายถึงสีเทาเสมอ เพราะแสงสามสีในปริมาณเท่ากันไม่ให้เฉดสี

อ่านโค้ดได้ในพริบตา

เมื่อคุณรู้รูปแบบ คุณประมาณสีจากตัวเลขเฮกซ์ได้ โค้ดที่ขึ้นต้นด้วยคู่แรกสูงจะออกแดง คู่กลางสูงจะออกเขียว คู่สุดท้ายสูงจะออกน้ำเงิน #FF8800 คือแดงมาก เขียวบ้าง และไม่มีน้ำเงิน ซึ่งคือสีส้ม คุณไม่ต้องใช้เครื่องมือสำหรับเรื่องนั้น แต่ต้องใช้สำหรับตัวเลขที่แน่นอน

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

พิมพ์หรือวางโค้ดเฮกซ์

ป้อนสีในช่องแรก จะมีหรือไม่มีเครื่องหมายแฮชก็ได้ รับรูปแบบสามหลัก หกหลัก และแปดหลัก

อ่านค่า rgb

คำตอบปรากฏทันทีในอีกช่องหนึ่ง ในรูปแบบ rgb(90, 70, 50) หรือ rgba() หากโค้ดมีความโปร่งใส หน้านี้แสดงประโยค #5A4632 = rgb(90, 70, 50) เพื่อให้คุณตรวจได้ในพริบตา

คัดลอกไปใส่ในโค้ดของคุณ

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

รูปแบบการเขียนเหล่านี้มาจากไหน

เฮกซ์และ RGB คือสิ่งเดียวกันที่เขียนสองครั้ง

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

HSL และ CMYK

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

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

ในสไตล์ชีต

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

ในสคริปต์และการวาดบนแคนวาส

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

ในเครื่องมือกราฟิกและรูปภาพ

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

ในเอกสารและคู่มือแบรนด์

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

การใช้งานจริงของรูปแบบ RGB

ความโปร่งใสโดยไม่ต้องมีสีที่สอง

ด้วย rgba(90, 70, 50, 0.5) คุณได้สีที่ความเข้มครึ่งหนึ่ง ทำให้สิ่งที่อยู่ด้านหลังมองทะลุผ่านได้ เป็นวิธีมาตรฐานในการสร้างเลเยอร์ซ้อน เงา และพื้นหลังโทนสีจากสีแบรนด์โดยไม่ต้องคิดสีใหม่

การคำนวณเฉดที่สว่างกว่าและเข้มกว่า

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

การตรวจความเปรียบต่าง

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

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

ลืมคู่อัลฟา

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

สลับลำดับ

เฮกซ์คือแดง เขียว น้ำเงิน บางรูปแบบ และ API กราฟิกเก่าบางตัว ใช้น้ำเงิน เขียว แดง หากสีออกมาผิดในโปรแกรมใดโปรแกรมหนึ่ง ให้ตรวจลำดับช่องสีของมัน

คัดลอกจากภาพหน้าจอ

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

สันนิษฐานว่าหน้าจอเห็นตรงกัน

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

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

#FF0000 ใน RGB คืออะไร

rgb(255, 0, 0) สีแดงบริสุทธิ์

#FFFFFF ใน RGB คืออะไร

rgb(255, 255, 255) สีขาว

ฉันแปลงโค้ดสามหลักได้หรือไม่

ได้ แต่ละหลักถูกทำซ้ำสองเท่า: #09C กลายเป็น #0099CC ซึ่งคือ rgb(0, 153, 204)

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

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

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

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

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

ด้วย RGB เป็น HEX ซึ่งเขียนตัวเลขสามตัวเป็นโค้ดเฮกซ์

เลือกอย่างชาญฉลาดเมื่อคุณแปลง HEX เป็น RGB

รู้ว่าคุณต้องการอะไรต่อไป

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

เก็บเฮกซ์ไว้เป็นต้นแบบ

สำหรับสีในชุดสีของแบรนด์ ให้เก็บโค้ดเฮกซ์ไว้เป็นข้อมูลอ้างอิง มันสั้น ไม่คลุมเครือ และเข้าใจได้ทุกที่ สร้างรูปแบบอื่นจากมันเมื่อต้องการ

ใช้คุณสมบัติแบบกำหนดเอง

ใน CSS ให้กำหนดสีครั้งเดียว เช่น --brand: #5A4632 และอ้างถึงด้วยชื่อ หากคุณต้องการตัวเลขสำหรับ rgba() ให้กำหนด --brand-rgb: 90 70 50 ด้วย การแปลงจึงทำเพียงครั้งเดียว

CSS สมัยใหม่และรูปแบบ RGB

ไวยากรณ์ที่คั่นด้วยช่องว่าง

CSS ปัจจุบันรับ rgb() ที่ใช้ช่องว่างและเครื่องหมายทับสำหรับความโปร่งใส เช่น rgb(90 70 50 / 50%) ตัวเลขเหมือนกับแบบจุลภาค ผลลัพธ์ของการแปลงจึงใช้ได้ทั้งสองแบบ เบราว์เซอร์รุ่นเก่าและบางเครื่องมือคาดหวังจุลภาค แบบจุลภาคจึงยังเป็นตัวเลือกที่ปลอดภัยเมื่อคุณไม่รู้ว่าสีจะถูกใช้ที่ใด

เปอร์เซ็นต์และเศษส่วน

RGB เขียนด้วยเปอร์เซ็นต์ได้เช่นกัน เช่น rgb(35% 27% 20%) โดย 100 เปอร์เซ็นต์คือ 255 หน้านี้ให้จำนวนเต็มเพราะเป็นสิ่งที่เฮกซ์เก็บและที่เครื่องมือส่วนใหญ่คาดหวัง หากคุณต้องการเปอร์เซ็นต์ ให้หารแต่ละตัวเลขด้วย 255 แล้วคูณด้วย 100

คุณสมบัติแบบกำหนดเองสำหรับตัวเลขสามตัว

เทคนิคที่พบบ่อยคือเก็บเฉพาะตัวเลขสามตัวในคุณสมบัติแบบกำหนดเอง --brand-rgb: 90 70 50 และใช้เป็น rgb(var(--brand-rgb) / 0.5) ช่วยให้คำนิยามเดียวใช้ได้ทั้งแบบทึบและแบบโปร่งแสง เมื่อคุณแปลง HEX เป็น RGB เพื่อจุดประสงค์นี้ ให้คัดลอกเฉพาะตัวเลขจากคำตอบ

การทำงานกับสีในทางปฏิบัติ

ตรวจเทียบกับคู่มือแบรนด์

หากคู่มือแบรนด์ให้ทั้งเฮกซ์และ rgb สำหรับสีเดียวกัน ให้แปลงแบบหนึ่งแล้วเทียบกับอีกแบบ ความไม่ตรงกันมักหมายถึงพิมพ์ผิดในคู่มือ และการพบมันก่อนที่จะถูกใช้ในทุกหน้าคุ้มกับเวลาหนึ่งนาทีที่ใช้

เก็บชุดสีเป็นรายการสั้น ๆ

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

ตั้งชื่อสีตามบทบาท

ชื่ออย่างหลัก พื้นผิว และคำเตือนอยู่รอดผ่านการออกแบบใหม่ได้ดีกว่าชื่ออย่างเขียวหรือน้ำตาล การแปลงให้ตัวเลขแก่คุณ ชื่อบอกว่ามีไว้ทำอะไร

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

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

ตัวอย่างการใช้งานจริง

สมมติว่าสีแบรนด์ของคุณคือ #1E7A5C และคุณต้องการเวอร์ชันโปร่งแสงสำหรับพื้นหลังการ์ด คุณพิมพ์โค้ดและอ่านได้ rgb(30, 122, 92) ในสไตล์ชีต คุณเขียน background: rgba(30, 122, 92, 0.12) ซึ่งเป็นโทนสีอ่อนมากของสีเขียวเดียวกัน และเส้นขอบ rgba(30, 122, 92, 0.4) การ์ดอยู่บนหน้าสีขาวและหน้าสีเทาได้อย่างลงตัว เพราะความโปร่งใสให้หน้าเว็บมองทะลุผ่านได้ เมื่อสีแบรนด์ถูกเปลี่ยนภายหลัง คุณแทนที่ตัวเลขสามตัวในคุณสมบัติแบบกำหนดเองหนึ่งตัว และโทนสีทุกอันก็ตามมา

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

ก่อนแปลง

ตรวจความยาวของโค้ด: สามหลัก หกหลัก หรือแปดหลัก ตัดสินใจว่าคุณต้องการความโปร่งใสหรือไม่

ระหว่างแปลง

วางโค้ด อ่านค่า rgb และคัดลอกพร้อมวงเล็บ หรือเฉพาะตัวเลขสามตัว

หลังแปลง

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

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

ทิ้งคู่ความโปร่งใส

แปดหลักหมายถึงอัลฟา เก็บมันไว้หรือแปลงเป็น rgba()

สับสนลำดับช่องสี

เฮกซ์คือแดงก่อน บางเครื่องมือคาดหวังน้ำเงินก่อน

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

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

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

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

สรุป

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

ความยาวและพื้นที่ มวลและปริมาตร อุณหภูมิ สกุลเงิน