ตัวสร้าง CSS color-mix()
สร้างฟังก์ชัน CSS color-mix() เพื่อผสมสีสองสีใน sRGB, OKLab, OKLCH, HSL และอื่น ๆ พร้อมพรีวิวสด, slider เปอร์เซ็นต์ และ CSS ที่คัดลอกได้ทันที ประมวลผล 100% ฝั่งไคลเอนต์
Loading tool...
ตัวสร้าง CSS color-mix() คืออะไร?
ตัวสร้าง CSS color-mix() ผสมสีสองสีให้เป็นฟังก์ชัน CSS color-mix() ตัวเดียวโดยใช้ color space ที่คุณเลือก ฟังก์ชัน CSS color-mix() ซึ่งรองรับในเบราว์เซอร์สมัยใหม่ทุกตัวจะ interpolate ระหว่างสีสองสี ทำให้คุณสร้าง tint, shade และการผสมที่ลื่นไหลตามการรับรู้ได้โดยไม่ต้องคำนวณค่า hex ล่วงหน้า เครื่องมือนี้ให้พรีวิวสดและโค้ดที่คัดลอกได้ทันทีพร้อม slider เปอร์เซ็นต์ที่ควบคุมน้ำหนักของแต่ละสี
ประโยชน์หลัก
- พรีวิวสดของผลลัพธ์ที่ผสมแล้ว เรนเดอร์ด้วยค่า color-mix() จริง
- 12 color space รวม OKLab, OKLCH, sRGB และ display-p3
- slider เปอร์เซ็นต์ที่ปรับน้ำหนักทั้งสองให้ผลลัพธ์รวมกันได้ 100 เสมอ
- ตัวเลือกสีแบบ native พร้อมช่องกรอก hex เพื่อควบคุมอย่างแม่นยำ
- ทำงาน 100% ฝั่งไคลเอนต์ ใช้งานออฟไลน์ได้และรักษาความเป็นส่วนตัวของสี
กรณีการใช้งาน
- •สร้าง tint และ shade ของสีแบรนด์โดยไม่ต้องใช้ preprocessor
- •สร้างสถานะ hover หรือ focus ที่สม่ำเสมอรับรู้ด้วยการผสม OKLab
- •สร้างขั้นสีที่เข้าถึงได้ระหว่างสีพื้นหลังและสีข้อความ
- •ต้นแบบ endpoint ของ gradient ก่อนตัดสินใจทำ gradient เต็มรูปแบบ
วิธีสร้าง CSS color-mix()
- เลือกสีสองสี: ใช้ตัวเลือกสีแบบ native หรือพิมพ์ค่า hex (#ff6347) สำหรับสีที่ 1 และสีที่ 2 หาก hex ไม่ถูกต้องจะมีคำเตือน
- เลือก color space: เลือก interpolation space เช่น oklab (สม่ำเสมอรับรู้), srgb หรือ oklch จาก dropdown
- ตั้งอัตราส่วนผสม: ลาก slider เพื่อเลือกสัดส่วนของสีที่ 1 เปอร์เซ็นต์ส่วนเติมของสีที่ 2 จะถูกคำนวณให้อัตโนมัติ
- คัดลอก CSS: ดู declaration color-mix(in <space>, ...) ที่สร้างขึ้นแล้วคลิก คัดลอก เพื่อวางลงใน stylesheet ของคุณ
คุณสมบัติหลัก
- ตัวเลือกสีแบบ native ของ HTML พร้อมช่องกรอก hex สำหรับสีทั้งสอง
- 12 color space สำหรับ interpolation รวม OKLab, OKLCH, sRGB และ display-p3
- พรีวิวสีผสมแบบสดที่เรนเดอร์ด้วยค่า color-mix() จริง
- slider ผสม 0-100% พร้อมเปอร์เซ็นต์ที่ปรับให้รวมกันได้ 100 เสมอ
- คัดลอก declaration color-mix() สุดท้ายได้ในคลิกเดียวสำหรับทุก use case