ฟังก์ชัน color-mix() ของ CSS

การเข้าถึงและการใช้งาน

CSS ของ color-mix() ฟังก์ชันใช้สำหรับผสมสีสองตัวที่กำหนดสัดส่วนในสเปกตรัมสีที่กำหนด

ตัวอย่าง

ตัวอย่าง 1

ผสมสีสองค่าในสเปลษฐ์สี hsl ด้วยสัดส่วนที่กำหนด:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color-mix(in hsl, hsl(125 60 90), salmon 85%);
}

ลองด้วยตัวเอง

ตัวอย่าง 2

ผสมสีสองค่าในสเปลษฐ์สี oklab ด้วยสัดส่วนต่าง ๆ:

li:nth-child(1) {
  background-color: color-mix(in oklab, #6a5acd 0%, pink);
}
li:nth-child(2) {
  background-color: color-mix(in oklab, #6a5acd 25%, pink);
}
li:nth-child(3) {
  background-color: color-mix(in oklab, #6a5acd 50%, pink);
}
li:nth-child(4) {
  background-color: color-mix(in oklab, #6a5acd 75%, pink);
}
li:nth-child(5) {
  background-color: color-mix(in oklab, #6a5acd 100%, pink);
}

ลองด้วยตัวเอง

CSS สyntax

color-mix(color-interpolation-method, color1 %, color2 %)
ค่า รายละเอียด
color-interpolation-method

จำเป็น。กำหนดวิธีการสอดแนมสีที่ต้องการใช้。

มีส่วนประกอบด้วยคำถาม in ตามด้วยชื่อสเปลษฐ์สี。

สามารถใช้ชนิดทั้งหมด 2 ชนิดนี้:

สเปลษฐ์สีสี่เหลี่ยมผืนผ้า:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • lab
  • oklab
  • xyz
  • xyz-d50
  • xyz-d65

สเปลษฐ์สีสมมติ:

  • hsl
  • hwb
  • lch
  • oklch
color1 %

จำเป็น。ค่าสีที่ต้องการผสมทั้งหมด และค่าเปอร์เซ็นต์ที่เลือกได้ (0% ถึง 100%) ใช้เพื่อกำหนดสัดส่วนของสี。

ค่าเปอร์เซ็นต์โดยเริ่มต้น 50%。
color2 %

จำเป็น。ค่าสีที่ต้องการผสมทั้งหมด และค่าเปอร์เซ็นต์ที่เลือกได้ (0% ถึง 100%) ใช้เพื่อกำหนดสัดส่วนของสี。

ค่าเปอร์เซ็นต์โดยเริ่มต้น 50%。

รายละเอียดเทคนิค

รุ่น: CSS สีตัวอักษรระดับ 5

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

Chrome Edge Firefox Safari Opera
111 111 113 16.2 97

หน้าที่เกี่ยวข้อง

อ้างอิง：สี CSS