ตัวแปลงสี (HEX, RGB, HSL, OKLCH)
ออกแบบเพื่อความเป็นส่วนตัว — ทำงานในเบราว์เซอร์ของคุณทั้งหมด
แปลงสีระหว่าง HEX, RGB, HSL, OKLCH และค่าที่ตั้งชื่อในเบราว์เซอร์ของคุณ Toova แสดงตัวอย่างสด ให้คุณปรับ channels ด้วย sliders และเปิดเผยเอาต์พุตเต็มในทุกรูปแบบพร้อมวางลงใน CSS เครื่องมือออกแบบ หรือโค้ด production
ทำไมรูปแบบสีมากมาย
HEX (#ff6600) เป็นที่นิยมที่สุดใน CSS และพิมพ์ง่าย RGB (rgb 255 102 0) คือสิ่งที่ทุกรูปแบบภาพพูด HSL (hsl 24 100% 50%) มีสัญชาตญาณมากกว่าสำหรับการเลือกเฉดสีเพราะ hue, saturation และ lightness แมปกับวิธีที่มนุษย์คิดเกี่ยวกับสี OKLCH เป็นรูปแบบสมัยใหม่ที่แก้ไขความสม่ำเสมอเชิงการรับรู้ — ขั้นตัวเลขเท่ากันดูเหมือนขั้นทางสายตาเท่ากัน Toova แปลงระหว่างทั้งหมดโดยไม่มีการสูญเสีย
ตัวอย่างสดและ channel sliders
วางสีในรูปแบบใดๆ และ Toova แสดง swatch สดบวกการแปลงเต็มเป็นทุกรูปแบบอื่น ลาก channel slider ใดๆ — hue, saturation, lightness, แดง, เขียว, น้ำเงิน, alpha — และตัวอย่างอัปเดตในเวลาจริง ทำให้ง่ายในการปรับสีพื้นฐานเป็นเฉด แก้ไข contrast หรือสร้างสถานะ hover โดยไม่ออกจากแท็บเบราว์เซอร์ของคุณ
เฉพาะในเครื่อง
การแปลงสีเกิดขึ้นในเบราว์เซอร์ของคุณทั้งหมด ค่าที่คุณวางไม่ออกจากหน้า มากเกินไปสำหรับรหัสสี แต่ทำให้เครื่องมือเร็วและเชื่อถือได้ — ไม่มี roundtrip ไปยัง backend ไม่มี rate limits ไม่มี outages หน้าทำงานออฟไลน์หลังจากโหลดครั้งแรก
คำถามที่พบบ่อย
- ฉันควรใช้ OKLCH แทน HEX เมื่อใด
- OKLCH สม่ำเสมอเชิงการรับรู้ ซึ่งหมายความว่าขั้นตัวเลขเท่ากันดูเหมือนขั้นทางสายตาเท่ากัน ทำให้เป็นทางเลือกที่ถูกต้องเมื่อสร้าง palette สี คำนวณ contrast ที่เข้าถึงได้ หรือทำการจัดการสีตามอัลกอริทึมใดๆ สำหรับ design tokens สแตติก HEX ยังคงดี
- การแปลงทั้งหมดไม่มีการสูญเสียหรือไม่
- การแปลงระหว่าง HEX, RGB และรูปแบบสี 8 บิตไม่มีการสูญเสีย การแปลงที่เกี่ยวข้องกับ HSL หรือ OKLCH อาจแนะนำการปัดเศษทศนิยมเล็กน้อยที่หลักสุดท้าย แต่ผลลัพธ์เหมือนกันทางสายตา
- รองรับ transparency หรือไม่
- ใช่ ทุกรูปแบบที่รองรับ alpha (HEX 8 หลัก, RGBA, HSLA, OKLCH ที่มี alpha) จัดการอย่างถูกต้อง การแปลงรักษา alpha channel แน่นอน
- เลือกสีจากภาพได้ไหม
- ไม่ที่นี่โดยตรง สำหรับการสกัด palette จากภาพ ใช้เครื่องมือ Color Palette Extractor ตัวแปลงนี้มุ่งเน้นการแปลงค่าสีที่ทราบระหว่างรูปแบบ
- มีอะไรถูกส่งไปยังเซิร์ฟเวอร์หรือไม่
- ไม่ การแปลงทำงานในเบราว์เซอร์ของคุณทั้งหมด แท็บเครือข่ายจะว่างระหว่างการใช้งาน