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

ไล่สีจาก สีเขียวหัวเป็ด ไป สีทอง

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

สี

ผสมใน

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

แบบ
90°

CSS

background: linear-gradient(90deg, #008080, #3e8c7d, #5f9778, #7ba272, #96ad6a, #b1b85f, #cbc351, #e5cd3b, #ffd700);
background: linear-gradient(90deg in oklab, #008080, #ffd700);

Tailwind CSS v4

bg-linear-90/oklab from-[#008080] to-[#ffd700]

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

7

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

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

ผสมในตัวอย่างการไล่สีสีตรงกลางความสว่างความสด
OKLab#96ad6a71.5%0.095
OKLCH#67b96b71.5%0.137
sRGB#80ac4068.9%0.145
LCH#4eba5f70.5%0.163
HSL#0fc00069.9%0.237

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

ทำการไล่สีจาก สีเขียวหัวเป็ด ไป สีทอง ใน CSS อย่างไร

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

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

เมื่อผสมใน OKLab สีกึ่งกลางระหว่าง สีเขียวหัวเป็ด กับ สีทอง คือ #96ad6a ส่วนการผสมใน sRGB ปกติได้ #80ac40

ทำการไล่สีจาก สีเขียวหัวเป็ด ไป สีทอง ใน Tailwind CSS อย่างไร

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

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