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

ไล่สีจาก สีเหลือง ไป สีแดง

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

สี

ผสมใน

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

แบบ
90°

CSS

background: linear-gradient(90deg, #ffff00, #ffe800, #ffd100, #ffb900, #ffa000, #ff8600, #ff6a00, #ff4800, #ff0000);
background: linear-gradient(90deg in oklab, #ffff00, #ff0000);

Tailwind CSS v4

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

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

7

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

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

ผสมในตัวอย่างการไล่สีสีตรงกลางความสว่างความสด
OKLab#ffa00079.8%0.179
OKLCH#ffa20079.8%0.234
sRGB#ff800073.1%0.186
LCH#ffa10079.7%0.191
HSL#ff800073.1%0.186

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

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

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

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

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

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

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

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