การผสมสี CSS()

Adam Argyle

ฟังก์ชัน color-mix() ของ CSS ช่วยให้คุณผสมสีในขอบเขตสีที่รองรับได้จาก CSS โดยตรง

ก่อนที่จะมี color-mix() นักพัฒนาเว็บใช้ ตัวประมวลผลล่วงหน้าของ CSS หรือ calc() ในช่องสี เพื่อทำให้สีเข้มขึ้น อ่อนลง หรือลดความอิ่มตัว

.color-mixing-with-sass {
  /* Sass: equally mix red with white */
  --red-white-mix: color.mix(red, white);
}

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

.color-mixing-with-vanilla-css-before {
  --lightness: 50%;
  --red: hsl(0 50% var(--lightness));

  /* add "white" to red
     by adding 25% to the lightness channel
  */
  --lightred: hsl(0 50% calc(var(--lightness) + 25%);
}

color-mix() นำความสามารถในการผสมสีมาสู่ CSS นักพัฒนาเว็บสามารถเลือกขอบเขตสีที่จะผสมและระดับความโดดเด่นของแต่ละสีในการผสม

.color-mixing-after {
  /* equally mix red with white */
  --red-white-mix: color-mix(in oklab, red, white);

  /* equally mix red with white in srgb */
  --red-white-mix-srgb: color-mix(in srgb, red, white);
}

นี่คือสิ่งที่เราต้องการ ความยืดหยุ่น ประสิทธิภาพ และ API ที่มีฟีเจอร์ครบครัน ชอบจัง

การผสมสีใน CSS

CSS มีพื้นที่สีและขอบเขตสีหลายรายการ ดังนั้นคุณจึงต้องระบุพื้นที่สีสำหรับการผสม นอกจากนี้ ขอบเขตสีที่แตกต่างกันยังอาจเปลี่ยนผลลัพธ์ของการผสมอย่างมาก ดังนั้นการทราบผลของขอบเขตสีจะช่วยให้คุณได้ผลลัพธ์ที่ต้องการ

หากต้องการดูข้อมูลเบื้องต้นแบบอินเทอร์แอกทีฟ ให้ลองใช้เครื่องมือ color-mix() นี้ - สำรวจผลของขอบเขตสีแต่ละรายการ - สำรวจผลของการประมาณค่าเฉดสีเมื่อผสมในพื้นที่สีทรงกระบอก (lch, oklch, hsl, และ hwb) - เปลี่ยนสีที่จะผสมโดยคลิกกล่องสี 2 กล่องด้านบน - ใช้แถบเลื่อนเพื่อเปลี่ยนอัตราส่วนการผสม - โค้ด CSS color-mix() ที่สร้างขึ้นจะอยู่ที่ด้านล่าง

การผสมในขอบเขตสีต่างๆ

ขอบเขตสีเริ่มต้นสำหรับการผสม (และ สีไล่ระดับ) คือ oklab ซึ่งให้ผลลัพธ์ที่สอดคล้องกัน นอกจากนี้ คุณยังระบุขอบเขตสีอื่นเพื่อปรับแต่งการผสมให้เหมาะกับความต้องการได้ด้วย

ลองใช้ black และ white เป็นตัวอย่าง ขอบเขตสีที่ใช้ผสมจะไม่สร้างความแตกต่างมากนักใช่ไหม ผิด

color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);

แต่ก็มีผลอย่างมาก

ลองใช้ blue และ white เป็นอีกตัวอย่าง ฉันเลือกตัวอย่างนี้โดยเฉพาะเนื่องจากเป็นกรณีที่รูปร่างของพื้นที่สีอาจส่งผลต่อผลลัพธ์ ในกรณีนี้ ขอบเขตสีส่วนใหญ่จะเปลี่ยนเป็นสีม่วงขณะเปลี่ยนจากสีขาวเป็นสีน้ำเงิน นอกจากนี้ ยังแสดงให้เห็นว่า oklab เป็นขอบเขตสีที่เชื่อถือได้สำหรับการผสมสี เนื่องจากเป็นขอบเขตสีที่ใกล้เคียงกับสิ่งที่คนส่วนใหญ่คาดหวังจากการผสมสีขาวและสีน้ำเงินมากที่สุด (ไม่มีสีม่วง)

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

การเรียนรู้ผลของขอบเขตสีด้วย color-mix() ยังเป็นความรู้ที่ยอดเยี่ยมสำหรับ การสร้างสีไล่ระดับ ด้วย ไวยากรณ์ของ Color 4 ยังอนุญาตให้สีไล่ระดับระบุขอบเขตสีได้ โดยสีไล่ระดับจะแสดงการผสมสีในพื้นที่หนึ่งๆ

.black-to-white-gradient-in-each-space {
  --srgb: linear-gradient(to right in srgb, black, white);
  --srgb-linear: linear-gradient(to right in srgb-linear, black, white);
  --lab: linear-gradient(to right in lab, black, white);
  --oklab: linear-gradient(to right in oklab, black, white);
  --lch: linear-gradient(to right in lch, black, white);
  --oklch: linear-gradient(to right in oklch, black, white);
  --hsl: linear-gradient(to right in hsl, black, white);
  --hwb: linear-gradient(to right in hwb, black, white);
  --xyz: linear-gradient(to right in xyz, black, white);
  --xyz-d50: linear-gradient(to right in xyz-d50, black, white);
  --xzy-d65: linear-gradient(to right in xyz-d65, black, white);
}

หากคุณสงสัยว่าขอบเขตสีใด "ดีที่สุด" คำตอบคือไม่มี นั่นจึงเป็นเหตุผลที่มีตัวเลือกมากมาย นอกจากนี้ ยังไม่มีการคิดค้นขอบเขตสีใหม่ (ดู oklch และ oklab) หากมีขอบเขตสีใดขอบเขตสีหนึ่ง "ดีที่สุด" พื้นที่สีแต่ละพื้นที่อาจมีช่วงเวลาที่โดดเด่นและเป็นตัวเลือกที่เหมาะสม

เช่น หากต้องการผลลัพธ์การผสมสีที่สดใส ให้ใช้ hsl หรือ hwb ในการสาธิตต่อไปนี้ สีสดใส 2 สี (สีม่วงแดงและสีเขียวมะนาว) จะถูกนำมาผสมกัน และทั้ง hsl และ hwb จะให้ผลลัพธ์ที่สดใส ในขณะที่ srgb และ oklab จะให้สีที่ไม่อิ่มตัว

หากต้องการความสอดคล้องและความละเอียดอ่อน ให้ใช้ oklab ในการสาธิตต่อไปนี้ซึ่งเป็นการผสมสีน้ำเงินและสีดำ hsl และ hwb จะให้สีที่สดใสและมีการเปลี่ยนเฉดสีมากเกินไป ในขณะที่ srgb และ oklab จะให้สีน้ำเงินเข้มขึ้น

ลองใช้ color-mix() playground เป็นเวลา 5 นาทีเพื่อทดสอบสี และพื้นที่ต่างๆ แล้วคุณจะเริ่มเข้าใจข้อดีของแต่ละพื้นที่ นอกจากนี้ เรายังจะให้คำแนะนำเพิ่มเติมเกี่ยวกับขอบเขตสีเมื่อเราทุกคนปรับตัวให้เข้ากับศักยภาพของขอบเขตสีในอินเทอร์เฟซผู้ใช้

การปรับวิธีการประมาณค่าเฉดสี

หากคุณเลือกที่จะผสมในขอบเขตสีทรงกระบอก ซึ่งโดยพื้นฐานแล้วคือขอบเขตสีที่มีช่องเฉดสี h ที่รับมุมได้ คุณสามารถระบุได้ว่าชนิดการประมาณค่าในช่วงจะ shorter, longer, decreasing, และ increasing ซึ่งมีการอธิบายไว้อย่างละเอียดในคู่มือสี HDนี้ หากคุณต้องการดูข้อมูลเพิ่มเติม

นี่คือตัวอย่างการผสมสีน้ำเงินกับสีขาวแบบเดียวกัน แต่คราวนี้เป็นการผสมในพื้นที่ทรงกระบอกเท่านั้นโดยใช้วิธีการประมาณค่าเฉดสีที่แตกต่างกัน

นี่คือ Codepen อีกรายการที่ฉันสร้างขึ้นเพื่อช่วยแสดงภาพการประมาณค่าเฉดสี แต่สำหรับสีไล่ระดับโดยเฉพาะ ฉันเชื่อว่าตัวอย่างนี้จะช่วยให้คุณเข้าใจวิธีที่ขอบเขตสีแต่ละขอบเขตสร้างผลลัพธ์การผสมสีเมื่อมีการระบุชนิดการประมาณค่าในช่วงเฉดสี ลองศึกษาดู

การผสมด้วยไวยากรณ์สีที่แตกต่างกัน

จนถึงตอนนี้ เราได้ผสมสีที่ตั้งชื่อไว้ใน CSS เป็นส่วนใหญ่ เช่น blue และ white การผสมสี CSS พร้อมที่จะผสมสีจากขอบเขตสี 2 ขอบเขตที่แตกต่างกัน นี่เป็นอีกเหตุผลหนึ่งที่ต้องระบุขอบเขตสีสำหรับการผสม เนื่องจากเป็นการกำหนดพื้นที่ร่วมกันในกรณีที่สี 2 สีไม่ได้อยู่ในขอบเขตสีเดียวกัน

color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));

ในตัวอย่างก่อนหน้า ระบบจะแปลง hsl และ display-p3 เป็น oklch แล้วจึงนำมาผสมกัน ซึ่งมีความยืดหยุ่นและยอดเยี่ยม

การปรับอัตราส่วนการผสม

ไม่น่าเป็นไปได้ที่คุณจะต้องการสีแต่ละสีในปริมาณเท่ากันทุกครั้งที่ผสมสี เช่นที่ตัวอย่างส่วนใหญ่แสดงให้เห็นจนถึงตอนนี้ แต่ข่าวดีคือมีไวยากรณ์สำหรับระบุปริมาณของแต่ละสีที่ควรปรากฏในการผสมสี

เริ่มต้นหัวข้อนี้ด้วยตัวอย่างการผสมสีที่เทียบเท่ากันทั้งหมด (และ มาจากข้อกำหนด)

.ratios-syntax-examples {
  /* omit the percentage for equal mixes */
  color: color-mix(in lch, purple, plum);
  color: color-mix(in lch, plum, purple);

  /* percentage can go on either side of the color */
  color: color-mix(in lch, purple 50%, plum 50%);
  color: color-mix(in lch, 50% purple, 50% plum);

  /* percentage on just one color? other color gets the remainder */
  color: color-mix(in lch, purple 50%, plum);
  color: color-mix(in lch, purple, plum 50%);

  /* percentages > 100% are equally clamped */
  color: color-mix(in lch, purple 80%, plum 80%);
  /* above mix is clamped to this */
  color: color-mix(in lch, purple 50%, plum 50%);
}

ฉันคิดว่าตัวอย่างเหล่านี้แสดงให้เห็นกรณีขอบเขตได้เป็นอย่างดี ตัวอย่างชุดแรกแสดงให้เห็นว่าไม่จำเป็นต้องระบุ 50% แต่สามารถระบุได้ ตัวอย่างสุดท้ายแสดงกรณีที่น่าสนใจเมื่ออัตราส่วนรวมกันเกิน 100% ระบบจะจำกัดอัตราส่วนทั้งหมดให้รวมกันเป็น 100% เท่าๆ กัน

โปรดสังเกตด้วยว่าหากมีเพียงสีเดียวที่ระบุอัตราส่วน ระบบจะถือว่าสีอื่นมีอัตราส่วนเป็นส่วนที่เหลือจนครบ 100% ต่อไปนี้เป็นตัวอย่างเพิ่มเติมที่จะช่วยแสดงลักษณะการทำงานนี้

color-mix(in lch, purple 40%, plum) /* plum assigned 60% */
color-mix(in lch, purple, 60% plum) /* purple assigned 40% */
color-mix(in lch, purple 40%, plum 60%) /* no auto assignments */

ตัวอย่างเหล่านี้แสดงกฎ 2 ข้อ ดังนี้ 1. เมื่ออัตราส่วนเกิน 100% ระบบจะจำกัดและกระจายอัตราส่วนเท่าๆ กัน 1. เมื่อระบุอัตราส่วนเพียงรายการเดียว ระบบจะตั้งค่าสีอื่นเป็น 100 ลบอัตราส่วนนั้น

กฎข้อสุดท้ายอาจไม่ชัดเจนนัก นั่นคือจะเกิดอะไรขึ้นหากมีการระบุเปอร์เซ็นต์สำหรับสีทั้ง 2 สีและเปอร์เซ็นต์รวมกันไม่เท่ากับ 100%

color-mix(in lch, purple 20%, plum 20%)

การผสม color-mix() นี้จะทำให้เกิดความโปร่งใส 40% เมื่ออัตราส่วนรวมกันไม่เท่ากับ 100% การผสมสีที่ได้จะไม่ทึบแสง สีทั้ง 2 สีจะไม่ถูกผสมกันอย่างสมบูรณ์

การซ้อน color-mix()

เช่นเดียวกับ CSS ทั้งหมด ระบบจะจัดการการซ้อนอย่างเหมาะสมและเป็นไปตามที่คาดไว้ โดยฟังก์ชันภายในจะทำงานก่อนและแสดงค่ากลับไปยังบริบทระดับบน

color-mix(in lch, purple 40%, color-mix(plum, white))

คุณสามารถซ้อนฟังก์ชันได้มากเท่าที่ต้องการเพื่อให้ได้ผลลัพธ์ที่ต้องการ

การสร้างรูปแบบสีสว่างและสีเข้ม

มาสร้างรูปแบบสีด้วย color-mix() กัน

รูปแบบสีพื้นฐาน

ใน CSS ต่อไปนี้ ระบบจะสร้างธีมสว่างและธีมมืดตามรหัสสีแบบเลขฐาน 16 ของแบรนด์ ธีมสว่างจะสร้างสีข้อความสีน้ำเงินเข้ม 2 สีและสีพื้นหลังสีขาวอ่อนมาก จากนั้นในสื่อมืดที่ต้องการ ระบบจะกำหนดสีใหม่ให้กับพร็อพเพอร์ตี้ที่กำหนดเองเพื่อให้พื้นหลังเป็นสีเข้มและสีข้อความเป็นสีอ่อน

:root {
  /* a base brand color */
  --brand: #0af;

  /* very dark brand blue */
  --text1: color-mix(in oklab, var(--brand) 25%, black);
  --text2: color-mix(in oklab, var(--brand) 40%, black);

  /* very bright brand white */
  --surface1: color-mix(in oklab, var(--brand) 5%, white);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text1: color-mix(in oklab, var(--brand) 15%, white);
    --text2: color-mix(in oklab, var(--brand) 40%, white);
    --surface1: color-mix(in oklab, var(--brand) 5%, black);
  }
}

ทั้งหมดนี้ทำได้โดยการผสมสีขาวหรือสีดำลงในสีของแบรนด์

รูปแบบสีระดับกลาง

คุณสามารถทำได้มากกว่าธีมสว่างและธีมมืด ในการสาธิตต่อไปนี้ การเปลี่ยนแปลงกลุ่มตัวเลือกจะอัปเดตแอตทริบิวต์ในแท็ก HTML [color-scheme="auto"] ซึ่งจะช่วยให้ตัวเลือกใช้ธีมสีตามเงื่อนไขได้

การสาธิตระดับกลางนี้ยังแสดงเทคนิคการกำหนดธีมสีที่แสดงสีธีมทั้งหมดใน :root ซึ่งจะช่วยให้ดูสีทั้งหมดพร้อมกันและปรับได้ง่ายหากจำเป็น ในสไตล์ชีต คุณสามารถใช้ตัวแปรตามที่กำหนดไว้ ซึ่งจะช่วยประหยัดเวลาในการค้นหาการปรับแต่งสีในสไตล์ชีต เนื่องจากทั้งหมดอยู่ในบล็อก :root เริ่มต้น

กรณีการใช้งานที่น่าสนใจเพิ่มเติม

Ana Tudor มีการสาธิตที่ยอดเยี่ยมพร้อมกรณีการใช้งานบางส่วน ให้ศึกษา

การดีบั๊ก color-mix() ด้วยเครื่องมือสำหรับนักพัฒนาเว็บ

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome รองรับ color-mix() ได้อย่างยอดเยี่ยม เครื่องมือนี้จะจดจำและไฮไลต์ไวยากรณ์ สร้างการแสดงตัวอย่างการผสมสีข้างๆ สไตล์ในแผงรูปแบบ และอนุญาตให้เลือกสีอื่น

เครื่องมือสำหรับนักพัฒนาเว็บจะมีลักษณะดังนี้

ขอให้สนุกกับการผสมสี