ฟังก์ชัน CSS color-mix()
ช่วยให้คุณผสมสีในพื้นที่สีใดก็ได้ที่รองรับจาก CSS ของคุณ
ก่อนวันที่ color-mix() หากต้องการปรับสีให้มืด สว่าง หรือทำให้สีจางลง นักพัฒนาแอปจะใช้
CSS Preprocessor หรือ 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() เป็นความรู้ที่ยอดเยี่ยมในการไล่ระดับสีด้วย ไวยากรณ์สี 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 ทั้ง 2 สีให้ผลลัพธ์ที่มีชีวิตชีวา ในขณะที่ srgb และ oklab ให้สีที่ไม่อิ่มตัว
หากต้องการความสม่ำเสมอและความละเอียดอ่อน ให้ใช้ oklab ในการสาธิตต่อไปนี้ซึ่งผสมสีน้ำเงินและสีดำเข้าด้วยกัน hsl และ hwb ทำให้เกิดสีที่ฉูดฉาดและเฉดสีที่เปลี่ยนไป ขณะที่ srgb และ oklab จะทำให้มีสีน้ำเงินเข้มขึ้น
ใช้เวลา 5 นาทีกับสนามเด็กเล่น color-mix() ทดสอบสีและช่องว่างต่างๆ แล้วคุณจะเริ่มได้เห็นว่าแต่ละพื้นที่มีข้อดีอย่างไร นอกจากนี้ คาดหวังให้คำแนะนำเกี่ยวกับพื้นที่สีมีมากขึ้นในขณะที่เราทุกคนปรับตัวตามศักยภาพของพื้นที่สีในอินเทอร์เฟซผู้ใช้ของเรา
การปรับวิธีการประมาณค่าโทนสี
หากเลือกที่จะผสมพื้นที่สีทรงกระบอก โดยหลักๆ แล้วก็คือพื้นที่สีที่มีช่องโทนสี h ที่ยอมรับมุม คุณระบุได้ว่าการประมาณค่าจะเป็น shorter, longer, decreasing และ increasing ซึ่งครอบคลุมทุกหัวข้อในคู่มือสี HD นี้หากต้องการดูข้อมูลเพิ่มเติม
นี่คือตัวอย่างการผสมสีฟ้าถึงขาวเหมือนกัน แต่ครั้งนี้เป็นแค่ในช่องว่างทรงกระบอกที่มีวิธีการประมาณค่าสีที่แตกต่างกัน
นี่คือ Codepen อีกตัวหนึ่งที่ฉันทำขึ้นเพื่อช่วยให้เห็นภาพการประมาณค่าสี แต่โดยเฉพาะสำหรับการไล่ระดับสี ผมคิดว่าข้อมูลนี้จะช่วยให้คุณเข้าใจว่าพื้นที่สีแต่ละสีก่อให้เกิดการผสมผสานของสีได้อย่างไรเมื่อระบุการประมาณค่าสี แล้วลองศึกษาดูสิ!
ผสมกับไวยากรณ์ของสีต่างๆ
ตอนนี้เราผสมสีที่มีชื่อ CSS ไว้เป็นส่วนใหญ่ เช่น blue และ white การผสมสี CSS พร้อมที่จะผสมสีที่มาจากพื้นที่สี 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 เริ่มต้น
Use Case ที่น่าสนใจยิ่งขึ้น
Ana Tudor มีการสาธิตที่ยอดเยี่ยมพร้อมกรณีการใช้งาน 2-3 ข้อสำหรับการศึกษา ดังนี้
แก้ไขข้อบกพร่องการผสมสี() ด้วยเครื่องมือสำหรับนักพัฒนาเว็บ
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome มีการสนับสนุนที่ยอดเยี่ยมสำหรับ color-mix() แอปจะจดจำและไฮไลต์ไวยากรณ์ สร้างตัวอย่างมิกซ์ข้างรูปแบบในแผง "รูปแบบ" และอนุญาตให้เลือกสีอื่นได้
ซึ่งจะมีลักษณะดังนี้ในเครื่องมือสำหรับนักพัฒนาเว็บ
ขอให้สนุกกับการมิกซ์เพลง!