Color Format Converter ช่วยแปลงสีระหว่าง HEX, RGB, HSL, HSV และ OKLCH โดยเลือกสีผ่าน Color Picker, พิมพ์ค่า Hex, วางสตริงสี CSS หรือปรับแถบเลื่อน RGB — ทุกรูปแบบจะอัปเดตแบบสดๆ และมีปุ่ม Copy แยกสำหรับแต่ละรูปแบบ
CSS ยุคใหม่มีวิธีการเขียนสีได้นับสิบวิธี: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293) รวมถึงตัวแปรที่มีค่าความโปร่งใส (Alpha) บ่อยครั้งที่คุณต้องแปลงค่าเหล่านี้ไปมา — เช่น งานดีไซน์ใน Figma ให้ค่า OKLCH มา แต่โค้ดเบสของคุณใช้ HEX และตัวแปรธีมต้องการ HSL สำหรับการปรับสีตอน Hover เครื่องมือ Color Format Converter รวบรวมการแปลงทั้งหมดไว้ในที่เดียว คุณสามารถเลือกสีผ่าน Color Picker, วางค่าสีในรูปแบบใดก็ได้ หรือลากแถบเลื่อน RGB เพื่อหาเฉดสีที่ต้องการ ทุกรูปแบบมาตรฐานจะแสดงผลพร้อมกัน: HEX (พร้อมค่า Alpha), rgb()/rgba(), hsl()/hsla(), hsv() และ oklch() — พร้อมทั้งโค้ดสำหรับตัวแปร CSS และค่า Luminance สำหรับการคำนวณความต่างสี รองรับช่องสัญญาณ Alpha ตลอดกระบวนการ ทุกรูปแบบมีปุ่ม Copy ในคลิกเดียว และตัวพาร์ส (Parser) รองรับชื่อสีมาตรฐานและทุกอย่างที่ CSS รองรับ
แสดงค่า HEX, RGB/RGBA, HSL/HSLA, HSV และ OKLCH พร้อมกัน — เลือกใช้รูปแบบที่โค้ดปลายทางต้องการได้ทันทีโดยไม่ต้องแปลงซ้ำซ้อน
รองรับ HEX (#abc หรือ #aabbcc หรือ #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() และชื่อสีมาตรฐาน วางสิ่งใดก็ได้ที่ CSS รองรับ
รองรับรูปแบบ OKLCH ใหม่ที่ใช้ใน CSS ยุคใหม่ — ซึ่งเป็นพื้นที่สีที่มีความสม่ำเสมอทางการรับรู้ (Perceptually uniform) และกำลังกลายเป็นมาตรฐานใหม่สำหรับระบบการออกแบบ
ทุกเอาต์พุตมีปุ่ม Copy ของตัวเอง คลิกเพื่อรับรูปแบบที่คุณต้องการไปใช้ในโค้ดได้ทันที ไม่ต้องเลือกข้อความเอง
ปรับแถบเลื่อน Red/Green/Blue/Alpha เพื่อการจูนสีที่ละเอียด ทุกรูปแบบจะอัปเดตแบบเรียลไทม์ขณะที่คุณลาก
จัดการค่าความโปร่งใสในทุกรูปแบบ: #RRGGBBAA, rgba(...), hsla(...) ตั้งค่าครั้งเดียว แปลงให้ครบทุกที่
เมื่อได้ค่า OKLCH หรือ HSL จาก Figma — ให้นำมาวางเพื่อคัดลอกค่า HEX ไปใส่ใน Tailwind config หรือตัวแปร CSS ได้โดยไม่ต้องออกจากเบราว์เซอร์
ลากแถบเลื่อนเพื่อค้นหาเฉดสี พร้อมจดบันทึกค่า OKLCH เพื่อใช้ในระบบการออกแบบที่เป็นระเบียบ
แปลงสีของแบรนด์เป็นรูปแบบ HSL เพื่อให้คุณสามารถใช้สูตรอย่าง hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) สำหรับสถานะ Hover ได้
ช่อง Luminance จะแสดงค่าดิบที่ใช้ในการคำนวณความต่างสีตามมาตรฐาน WCAG — มีประโยชน์สำหรับการคำนวณ Accessibility
วางค่า oklch(...) ที่ได้จากไฟล์ CSS ที่คุณกำลังอ่าน เพื่อดูทันทีว่ามันคือสีอะไร
คลิกไอคอน Color Formats ใน DevSuite Pro dock แผงควบคุมจะเปิดขึ้นพร้อมช่องเลือกสี, ช่องใส่ค่า Hex และแถบเลื่อน RGB
ใช้ Color Picker, พิมพ์ค่า Hex หรือวางสตริงสี CSS (เช่น rgb(...), oklch(...) ฯลฯ) สีจะแสดงพรีวิวให้เห็นทันที
ทุกรูปแบบจะแสดงด้านล่าง: HEX, RGB, HSL, HSV, OKLCH, ตัวแปร CSS และค่า Luminance ทั้งหมดจะซิงก์กันตลอดเวลาที่ปรับแต่ง
ลากแถบเลื่อน R/G/B/A เพื่อการปรับแต่งที่ละเอียด เหมาะสำหรับการหาเฉดสีที่ตรงตามข้อกำหนดของงานดีไซน์
คลิก Copy ในแถวรูปแบบที่ต้องการ — ค่าจะถูกเก็บไว้ในคลิปบอร์ดพร้อมไวยากรณ์ที่ถูกต้อง
ติดตั้ง DevSuite Pro ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 64 รายการสำหรับเบราว์เซอร์ของคุณ
