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

ไล่สีจาก สีบานเย็น ไป สีแดง

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

สี

ผสมใน

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

แบบ
90°

CSS

background: linear-gradient(90deg, #ff00ff, #fe1de6, #fe28ce, #fe2cb5, #fd2d9b, #fe2a81, #fe2464, #fe1a43, #ff0000);
background: linear-gradient(90deg in oklab, #ff00ff, #ff0000);

Tailwind CSS v4

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

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

7

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

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

ผสมในตัวอย่างการไล่สีสีตรงกลางความสว่างความสด
OKLab#fd2d9b66.5%0.251
OKLCH#ff009066.5%0.29
sRGB#ff008064.5%0.26
LCH#ff118766.8%0.341
HSL#ff008064.5%0.26

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

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

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

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

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

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

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

การไล่สียอดนิยม