จะแปลงสี HEX เป็น RGB และ HSL ได้อย่างไร

พิมพ์หรือวางสีใน Color input เช่น #14b8a6 หรือใช้ตัวเลือกสี เครื่องมือจะแสดงค่า HEX, rgb(), hsl(), hsv() และ cmyk() รวมถึง oklch(), lab() และ lch() แต่ละค่ามีปุ่ม Copy

พิมพ์รูปแบบสีอะไรได้บ้าง

HEX แบบ 3, 4, 6 หรือ 8 หลัก, rgb() หรือ rgba(), hsl() หรือ hsla() ทั้งแบบใช้จุลภาคหรือเว้นวรรค และชุดตัวเลขสามตัวเปล่าๆ หากไม่รู้จักอินพุต เครื่องมือจะแสดงข้อผิดพลาดในการแยกวิเคราะห์

แปลงสีที่มีความโปร่งใสได้ไหม

ได้ ใช้ตัวควบคุม Opacity หรือใส่ค่าแอลฟาในอินพุต เอาต์พุตจะรวมช่องแอลฟา เช่น HEX 8 หลัก rgba() หรือแอลฟาแบบเครื่องหมายทับในไวยากรณ์สมัยใหม่

ค่า CMYK แม่นยำพอสำหรับงานพิมพ์ไหม

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

จะตรวจสอบว่าสีของฉันมีคอนทราสต์พอสำหรับข้อความไหมได้อย่างไร

ดูส่วน WCAG contrast แสดงอัตราส่วนคอนทราสต์ของสีคุณบนพื้นขาวและพื้นดำ พร้อมเกรด AAA, AA, AA Large หรือ Fail ส่วน Lightness scale มีเฉดสีที่สว่างกว่าหรือเข้มกว่าให้ลอง

ฟรีจริงหรือ

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

ใช้งานได้บนมือถือหรือไม่?

ได้ ใช้งานได้บนเบราว์เซอร์มือถือรุ่นปัจจุบันทั้ง iOS และ Android โดยไม่ต้องติดตั้งอะไร

🎨

แปลงสี ฟรี

แปลงสีระหว่างรูปแบบ HEX, RGB, HSL, HSV และ CMYK ทันที มีสเกลความสว่างและตัวอย่างสีที่ตั้งไว้ล่วงหน้า

ทำงานในเบราว์เซอร์ไม่ต้องสมัคร ไม่มีป๊อปอัปไม่ต้องเข้าสู่ระบบฟรีตลอดไป

ใช้งานได้แบบออฟไลน์เมื่อโหลดแล้ว

แปลงสีระหว่าง HEX, RGB, HSL, HSV และ CMYK — พร้อมตัวอย่างสด และคัดลอกด้วยแตะเดียว ทุกอย่างทำงานในเบราว์เซอร์ของคุณ

ป้อนสี

รับ: HEX (#fff หรือ #ffffff), RGB (255, 255, 255) หรือ HSL (360, 100%, 50%)

ความทึบแสง100%

ค่าสำเร็จรูป:

HEX#14B8A6

rgb() · แบบเก่าrgb(20, 184, 166)

rgb() · แบบใหม่rgb(20 184 166)

hsl() · แบบเก่าhsl(173, 80%, 40%)

hsl() · แบบใหม่hsl(173 80% 40%)

oklch()oklch(70.4% 0.123 182.5)

lab()lab(67.1% -42.9 -2.3)

lch()lch(67.1% 43.0 183.1)

hsv()hsv(173, 89%, 72%)

cmyk()cmyk(89%, 0%, 10%, 28%)

ค่า RGB20, 184, 166

คอนทราสต์ WCAG

บนพื้นหลังสีขาว

2.49:1

ไม่ผ่าน

บนพื้นหลังสีดำ

8.44:1

AAA

🖨️ สำหรับการพิมพ์: ค่า CMYK (89%, 0%, 10%, 28%) เหล่านี้คือการประมาณ sRGB→CMYK มาตรฐานเพื่อการอ้างอิง สำหรับสีพิมพ์ที่แม่นยำ ใช้โปรไฟล์ ICC ของเครื่องพิมพ์ของคุณหรือตัวอย่างงานพิมพ์จริง — CMYK ของหน้าจออาจไม่ตรงกับหมึกและกระดาษทั้งหมด

สเกลความสว่าง

คลิกตัวอย่างสีเพื่อเปลี่ยนไปใช้เฉดนั้น

การใช้งานทั่วไป

แปลงสีสำหรับการออกแบบเว็บรับค่า HEX, RGB และ HSL สำหรับสีใดก็ได้ — พร้อมที่จะวางลง CSS หรือ Tailwind
แปลงสีสำหรับการพิมพ์ (CMYK)แปลงสีหน้าจอ (HEX/RGB) เป็นค่า CMYK เพื่อใช้ในการออกแบบพิมพ์และการพิมพ์ระดับมืออาชีพ
สร้างจานสีสำหรับระบบการออกแบบแปลงสีของแบรนด์ในทุกรูปแบบและสร้างมาตราส่วนความสว่างที่สอดคล้องกันสำหรับระบบการออกแบบที่สมบูรณ์
ตรวจสอบความเปรียบต่างของสีสำหรับการเข้าถึงแปลงสีเพื่อให้ได้ค่า RGB สำหรับใช้ในเครื่องมือ Contrast Ratio - WCAG ปฏิบัติตามสำหรับการออกแบบที่เข้าถึงได้
แปลงสีสำหรับ Figmaรับค่า HEX และ RGB ที่แน่นอนเพื่อวางในตัวเลือกสี Figma และระบบโทเค็นการออกแบบ

วิธีการทำงาน

ตรรกะการแปลงทั้งหมดเป็น JavaScript ที่เขียนขึ้นเองและทำงานในเบราว์เซอร์ทั้งหมด — ไม่มีไลบรารี ไม่มีการเรียกเซิร์ฟเวอร์ เครื่องมือแยกวิเคราะห์อินพุต ส่งผ่านชุดฟังก์ชันคณิตศาสตร์บริสุทธิ์ และสร้างผลลัพธ์สิบเอ็ดรูปแบบพร้อมกัน รวมถึงพื้นที่สี CSS Color 4 สมัยใหม่ oklch() และ lab()

1
การแยกวิเคราะห์อินพุตที่ยืดหยุ่น
ตัวแยกวิเคราะห์ที่กำหนดเองรับ hex (3, 4, 6 หรือ 8 หลัก), rgb()/rgba(), hsl()/hsla() ทั้งไวยากรณ์จุลภาคแบบเดิมและไวยากรณ์ช่องว่างแบบใหม่ และชุดตัวเลขสามค่าเปล่า ค่า alpha แบบทศนิยมหรือเปอร์เซ็นต์ถูกทำให้อยู่ในช่วง 0–1 ก่อนเริ่มการแปลง
2
RGB เป็นศูนย์กลางการแปลง
ทุกรูปแบบที่รับถูกแปลงเป็นชุด RGB มาตรฐานก่อน จากตัวแทนเดียวนั้นเครื่องมือแตกออกไป: HSL และ HSV ใช้สูตร min/max/chroma มาตรฐาน CMYK ได้จากการหาช่อง key และการทำ sRGB ให้เป็นเชิงเส้น (เส้นโค้งแกมมาแบบแบ่งช่วงตาม IEC 61966-2-1) ถูกใช้ก่อนการคำนวณพื้นที่สีตามการรับรู้
3
พื้นที่สีตามการรับรู้คำนวณตั้งแต่ต้น
oklch() คำนวณด้วยเมทริกซ์ 3×3 อ้างอิงของ Björn Ottosson (พื้นที่รากที่สามของ LMS) lab() และ lch() ใช้การปรับสี Bradford เพื่อแปลงจุดขาว D65 เป็น D50 ซึ่งตรงกับวิธีที่ CSS Color 4 กำหนด lab() นี่คือสูตรเดียวกับที่ใช้ในเอนจินเรนเดอร์ของเบราว์เซอร์ — เขียนขึ้นที่นี่โดยไม่พึ่งพาภายนอก
4
คอนทราสต์ WCAG และมาตราความสว่าง
ความสว่างสัมพัทธ์คำนวณตามสูตร WCAG 2.1 (R, G, B เชิงเส้นถ่วงน้ำหนัก 0.2126/0.7152/0.0722) และอัตราส่วนคอนทราสต์เทียบกับสีขาวและดำถูกจัดเกรดเป็น AA-large, AA, AAA หรือ Fail แถบความสว่างเก้าขั้นสร้างโดยก้าวช่องความสว่าง HSL จาก 10% ถึง 90% ให้คุณคลิกตัวอย่างสีใดก็ได้เพื่อแปลงเฉดนั้น