ตัวแปลงสี
แปลงสีใดก็ได้ระหว่าง HEX, RGB, HSL, HSV และ CMYK เลือกสีหรือพิมพ์ค่าในรูปแบบใดก็ได้ — แล้วค่าในรูปแบบอื่นทั้งหมดจะอัปเดตทันที ภายในเบราว์เซอร์ของคุณโดยตรง
HEX
RGB
HSL
HSV
hsv(18, 95%, 96%)
CMYK
cmyk(0%, 66%, 95%, 4%)
วิธีใช้ ตัวแปลงสี
- 1
เลือกหรือวางสี
คลิกที่ตัวอย่างสีเพื่อเปิดเครื่องมือเลือกสี หรือวางค่าลงในช่อง HEX, RGB หรือ HSL เครื่องมือทั้งหมดจะปรับตามสีที่คุณเลือกไม่ว่าจะเป็นสีใดก็ตาม
- 2
แก้ไขในรูปแบบใดก็ได้
พิมพ์ลงในช่อง HEX, RGB หรือ HSL ได้โดยตรง แล้วค่าในรูปแบบอื่นทั้งหมด — รวมถึง HSV และ CMYK — จะถูกคำนวณใหม่ทันทีที่คุณเปลี่ยนแปลง
- 3
อ่านค่าได้ทุกรูปแบบ
ดูสีเดียวกันที่แสดงในห้ารูปแบบพร้อมกัน เพื่อให้คุณจับคู่สีในงานออกแบบได้ทั้งใน CSS งานพิมพ์ และโปรแกรมแก้ไขรูปภาพ โดยไม่ต้องพึ่งเครื่องมืออื่นเพิ่ม
- 4
คัดลอกค่าที่คุณต้องการ
ใช้ปุ่มคัดลอกข้างค่าใดก็ได้เพื่อคัดลอกไปยังคลิปบอร์ด พร้อมนำไปวางในสไตล์ชีตหรือไฟล์งานออกแบบของคุณ
คู่มือใช้งานจริงสำหรับรูปแบบสีต่าง ๆ
สีเดียวกัน แต่เขียนได้หลายรูปแบบ
HEX, RGB, HSL, HSV และ CMYK ไม่ได้เป็นสีคนละสีกัน สำหรับงานบนหน้าจอ มันเป็นเพียงวิธีเขียนจุดเดียวกันในปริภูมิสี (color space) ที่ต่างกันเท่านั้น สีแดงล้วนเขียนได้ทั้ง #ff0000, rgb(255, 0, 0) หรือ hsl(0, 100%, 50%) และทั้งสามแบบก็แสดงผลออกมาเหมือนกันทุกประการ การเลือกรูปแบบสีจึงเป็นเรื่องของว่ารูปแบบใดคิดและทำงานด้วยง่ายที่สุดสำหรับงานตรงหน้า ซึ่งเป็นเหตุผลว่าทำไมตัวแปลงที่แสดงทุกรูปแบบเคียงข้างกันจึงช่วยประหยัดเวลาได้จริง คุณแค่เลือกรูปแบบที่เข้ากับเครื่องมือของคุณแล้วคัดลอกไป แทนที่จะมานั่งคำนวณเอง
ข้อยกเว้นเดียวคือ CMYK ซึ่งมุ่งไปที่หมึกพิมพ์มากกว่าแสง จึงไม่สามารถจับคู่กับรูปแบบอื่นได้อย่างสมบูรณ์แบบ เป็นประเด็นที่ควรเก็บไว้ในใจและเราจะกลับมาพูดถึงด้านล่าง
HEX กับ RGB คือตัวเลขชุดเดียวกัน
RGB อธิบายสีในรูปของช่องสีสามช่อง คือ แดง เขียว และน้ำเงิน แต่ละช่องมีค่าตั้งแต่ 0 ถึง 255 ผสมกันแบบแสง ส่วน HEX ก็คือตัวเลขสามค่าเดียวกันนั้นที่เขียนในฐานสิบหก โดยใช้เลขฐานสิบหกสองหลักต่อหนึ่งช่อง ดังนั้นใน #f5530c ค่า f5 คือช่องสีแดงซึ่งเท่ากับ 245 ค่า 53 คือสีเขียวซึ่งเท่ากับ 83 และ 0c คือสีน้ำเงินซึ่งเท่ากับ 12 รวมแล้วได้เป็น rgb(245, 83, 12) พอดี เพราะหนึ่งไบต์เก็บค่าได้ตั้งแต่ 0 ถึง 255 แต่ละช่องจึงต้องใช้เลขฐานสิบหกสองหลักพอดี และการแปลงระหว่างสองรูปแบบนี้จึงไม่สูญเสียค่าและตรงไปตรงมา
HEX แบบย่อเป็นเพียงความสะดวก รหัสสามหลักจะทำซ้ำแต่ละหลัก ดังนั้น #f50 จึงขยายเป็น #ff5500 เครื่องมือนี้อ่านรหัสแบบย่อเหมือนกับวิธีที่เบราว์เซอร์ทำ และรับรหัสโดยมีหรือไม่มีเครื่องหมาย # นำหน้า จะเป็นตัวพิมพ์ใหญ่หรือพิมพ์เล็กก็ได้
อัลฟา: RGBA และ HSLA
การเพิ่มช่องอัลฟาทำให้สีโปร่งใสบางส่วน RGBA และ HSLA จะเติมค่าที่สี่เข้าไป คือค่าความทึบ ตั้งแต่ 0 สำหรับโปร่งใสเต็มที่ ไปจนถึง 1 สำหรับทึบเต็มที่ ดังนั้น rgba(245, 83, 12, 0.5) จึงเป็นสีส้มเดียวกันที่ความทึบครึ่งหนึ่ง CSS สมัยใหม่ยังรองรับ HEX แบบแปดหลัก ซึ่งสองหลักสุดท้ายเข้ารหัสอัลฟาเป็นไบต์ ดังนั้นอัลฟาที่ครึ่งหนึ่งจึงประมาณได้เป็นเลขฐานสิบหกคู่ 80 ที่ต่อท้ายสี
อัลฟาคือสิ่งที่ทำให้สีผสานเข้ากับสิ่งใดก็ตามที่อยู่ด้านหลัง ซึ่งจำเป็นสำหรับเลเยอร์ทับซ้อน แผ่นบังแสง เงานุ่ม และเอฟเฟกต์กระจกใส โปรดจำไว้ว่าอัลฟาค่าเดียวกันจะดูต่างกันเมื่ออยู่บนพื้นหลังต่างกัน เพราะความโปร่งใสหมายความว่าหน้าตาสุดท้ายคือการผสมระหว่างสีของคุณกับเลเยอร์ที่อยู่ด้านล่าง
ทำไม HSL จึงปรับแต่งได้ง่ายกว่า
HSL อธิบายสีในแบบที่คนเราคิดถึงมัน เฉดสี (hue) คือตำแหน่งบนวงล้อสีตั้งแต่ 0 ถึง 360 องศา ความอิ่มตัว (saturation) คือความสดของสีในรูปเปอร์เซ็นต์ และความสว่าง (lightness) คือความสว่างของสีในรูปเปอร์เซ็นต์ โครงสร้างนี้ทำให้การปรับแต่งด้วยมือเป็นเรื่องเข้าใจง่าย หากต้องการเฉดที่เข้มขึ้นของสีเดียวกัน คุณก็ลดค่าความสว่างลงโดยปล่อยเฉดสีและความอิ่มตัวไว้เหมือนเดิม หากต้องการลดความสดของสี ก็ลดความอิ่มตัวลง การทำสิ่งเทียบเท่ากันใน RGB ดิบ ๆ หมายถึงการเปลี่ยนทั้งสามช่องไปพร้อมกัน ซึ่งกะด้วยสายตาได้ยากกว่ามาก
นี่จึงเป็นเหตุผลที่ HSL โดดเด่นสำหรับการสร้างระบบสี อยากได้สถานะ hover ที่เข้มกว่าสีพื้นเล็กน้อย หรือแถวของตัวอย่างสีที่มีเฉดสีเดียวกันแต่ไล่ระดับความสว่าง? แค่ขยับตัวเลข HSL ตัวเดียว ส่วน HSV ซึ่งเขียนเป็น HSB ด้วยนั้นเกี่ยวข้องกันอย่างใกล้ชิด แต่จับคู่เฉดสีและความอิ่มตัวเข้ากับค่า value หรือความสว่าง (brightness) แทนความสว่างแบบ lightness และเป็นโมเดลที่โปรแกรมแก้ไขรูปภาพและเครื่องมือเลือกสีจำนวนมากเปิดให้ใช้ การอ่านได้ทั้งสองแบบจึงช่วยให้คุณคล่องตัวข้ามเครื่องมือออกแบบต่าง ๆ
ตัวอย่างใช้งานจริง: ขาว ดำ และสีกลาง ๆ
จุดปลายทั้งสองดูสะอาดตา สีขาวคือ #ffffff ซึ่งก็คือ rgb(255, 255, 255) และ hsl(0, 0%, 100%) นั่นคือทุกช่องสูงสุด หรือในแง่ของ HSL คือความสว่างเต็มที่โดยไม่มีความอิ่มตัว เฉดสีจึงไม่มีความหมาย สีดำคือ #000000, rgb(0, 0, 0) และ hsl(0, 0%, 0%) ทุกอย่างเป็นศูนย์ ส่วนสีเทากลาง ๆ อยู่ตรงกึ่งกลาง ใกล้กับ #808080 และ rgb(128, 128, 128) ซึ่งใน HSL คือ hsl(0, 0%, 50%) แสดงให้เห็นอย่างชัดเจนว่าสีกลางใด ๆ มีความอิ่มตัวเป็นศูนย์ และมีความสว่างที่ไล่ตามความสว่างของมัน
ทีนี้มาดูสีจริง ๆ บ้าง สีส้มตัวเดิม #f5530c อ่านได้เป็น rgb(245, 83, 12) และประมาณ hsl(18, 92%, 50%) รูปแบบ HSL บอกคุณได้ในพริบตาว่ามันเป็นเฉดสีอุ่นใกล้ส้มแดง อิ่มตัวสูง และมีความสว่างปานกลาง ข้อมูลที่สตริง HEX ซ่อนเอาไว้ ลองวางค่าใดก็ได้เหล่านี้ลงในเครื่องมือแล้วดูค่าอื่น ๆ เติมเต็มขึ้นมาทันที
CMYK กับขีดจำกัดของการแปลงจากหน้าจอสู่งานพิมพ์
CMYK ย่อมาจาก cyan, magenta, yellow และ key โดย key คือสีดำ และเป็นโมเดลแบบลบ (subtractive) ที่สร้างขึ้นสำหรับหมึกบนกระดาษมากกว่าแสงบนหน้าจอ เพราะมันทำงานด้วยการลบแสงที่กระดาษสะท้อนออกมา จึงไม่สามารถสร้างสีสดทุกสีที่จอภาพเรืองแสงทำได้ ดังนั้นสีน้ำเงินหรือเขียวที่สดใสบนหน้าจอจึงมักออกมาหม่นลงเมื่อพิมพ์ ค่า CMYK ที่เครื่องมือนี้รายงานเป็นการแปลงทางคณิตศาสตร์โดยตรงจาก RGB และมีประโยชน์จริงในฐานะจุดเริ่มต้น แต่ไม่ใช่สิ่งที่ใช้แทนเวิร์กโฟลว์งานพิมพ์แบบจัดการสี (color-managed) ได้
สำหรับงานพิมพ์ที่ต้องการความแม่นยำของสี ควรตรวจสอบกับโปรไฟล์ ICC จริงของเครื่องพิมพ์และปรู๊ฟชิ้นงานเสมอ เพราะตัวอุปกรณ์ กระดาษ และหมึกล้วนทำให้ผลลัพธ์เปลี่ยนไป ให้คิดว่าผลลัพธ์ CMYK ตรงนี้เป็นการประมาณการอย่างรวดเร็ว ไม่ใช่การรับประกัน
สีที่มีชื่อเรียก และการก้าวสู่ขอบเขตสีกว้าง
CSS ยังมาพร้อมสีที่มีชื่อเรียกราว 150 สี เป็นคำอย่าง tomato, rebeccapurple และ slategray ซึ่งแต่ละชื่อก็เป็นเพียงนามแฝงของค่า HEX เฉพาะค่าหนึ่ง สีเหล่านี้สะดวกสำหรับการทำต้นแบบอย่างรวดเร็วและสำหรับเฉดสีที่จำได้ง่าย แม้ว่าสำหรับระบบออกแบบจริงจัง ค่า HEX หรือ HSL ที่ระบุชัดเจนจะให้การควบคุมและความสม่ำเสมอที่ละเอียดกว่า สีที่มีชื่อเรียกเป็นเพียงป้ายกำกับที่สะดวก ไม่ใช่ปริภูมิสีแยกต่างหาก
มองไปข้างหน้า ฟังก์ชันสี CSS รุ่นใหม่ก้าวข้ามขอบเขตสี sRGB แบบคลาสสิกที่รูปแบบเหล่านี้ตั้งสมมติฐานไว้ ฟังก์ชันสำหรับปริภูมิอย่าง oklch ที่สม่ำเสมอเชิงการรับรู้ (perceptually uniform) และ display-p3 ที่กว้างกว่า สามารถแสดงสีที่อิ่มตัวมากกว่าที่ HEX และ RGB เอื้อมถึง ซึ่งสำคัญขึ้นเรื่อย ๆ เมื่อหน้าจอสมัยใหม่มีความสามารถมากขึ้น ค่า HEX, RGB, HSL และ HSV ที่เครื่องมือนี้จัดการยังคงเป็นสกุลเงินที่ใช้กันทุกวันของเว็บ และการเข้าใจมันคือรากฐานสำหรับการนำปริภูมิสีรุ่นใหม่เหล่านั้นมาใช้อย่างมั่นใจ
คำถามที่พบบ่อย
ฉันจะแปลงสี HEX เป็น RGB ได้อย่างไร
HSL กับ HSV ต่างกันอย่างไร
เครื่องมือนี้รองรับ HEX แบบย่อ 3 หลักหรือไม่
CMYK ใช้ทำอะไร
ข้อมูลของฉันถูกอัปโหลดไปยังเซิร์ฟเวอร์หรือไม่
เครื่องมือที่เกี่ยวข้อง
ทำงานต่อด้วยเครื่องมือที่มีประโยชน์เหล่านี้