ข้ามไปยังเครื่องมือเลือกสี

ไล่สีจาก สีไซแอน ไป สีแดง

การไล่สีจาก สีไซแอน ไป สีแดง แบบนุ่มนวลใน CSS ผสมใน OKLab ตรงกลางจึงยังสดใส เปลี่ยนมุม เพิ่มสี แล้วคัดลอกโค้ดได้

สี

ผสมใน

OKLab ทำให้ตรงกลางยังสดใส ส่วน sRGB เป็นวิธีผสมของเบราว์เซอร์รุ่นเก่า และมักกลายเป็นสีเทาตรงกลาง

แบบ
90°

CSS

background: linear-gradient(90deg, #00ffff, #79ebe4, #a3d6c9, #bec0ae, #d2a993, #e29078, #ee745b, #f8513b, #ff0000);
background: linear-gradient(90deg in oklab, #00ffff, #ff0000);

Tailwind CSS v4

bg-linear-90/oklab from-[#00ffff] to-[#ff0000]

สีตลอดแนวการไล่สี

7

สีไซแอน และ สีแดง ผสมกันอย่างไรในแต่ละปริภูมิสี

สีสองสีเดียวกันให้สีตรงกลางต่างกัน ขึ้นอยู่กับปริภูมิที่เบราว์เซอร์ใช้ผสม ด้านล่างคือสีที่ตำแหน่ง 50% พอดี เมื่อผสมใน sRGB ปกติ สีตรงกลางคือ #808080 มีความสด 0 ส่วน OKLab ได้ #d2a993 มีความสด 0.057 แบบ sRGB จึงดูเทากว่าอย่างเห็นได้ชัดตรงกลาง

ผสมในตัวอย่างการไล่สีสีตรงกลางความสว่างความสด
OKLab#d2a99376.7%0.057
OKLCH#b8bd0076.7%0.206
sRGB#80808059.8%0
LCH#84c30774.6%0.197
HSL#80ff0089%0.265

คำถามเกี่ยวกับการไล่สีนี้

ทำการไล่สีจาก สีไซแอน ไป สีแดง ใน CSS อย่างไร

ใช้ background: linear-gradient(90deg in oklab, #00ffff, #ff0000) และเพิ่มบรรทัดแบบ sRGB ไว้ก่อนหน้าสำหรับเบราว์เซอร์ที่เก่ามาก การผสมใน OKLab ใช้ได้กับเบราว์เซอร์ปัจจุบันทุกตัว

สีที่อยู่กึ่งกลางระหว่าง สีไซแอน กับ สีแดง คือสีอะไร

เมื่อผสมใน OKLab สีกึ่งกลางระหว่าง สีไซแอน กับ สีแดง คือ #d2a993 ส่วนการผสมใน sRGB ปกติได้ #808080

ทำการไล่สีจาก สีไซแอน ไป สีแดง ใน Tailwind CSS อย่างไร

ใน Tailwind CSS v4 ใช้คลาส bg-linear-90/oklab from-[#00ffff] to-[#ff0000]