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
)
- เปลี่ยนสีที่ผสมโดยคลิกช่องสีใดช่องหนึ่งด้านบน
- ใช้แถบเลื่อนเพื่อเปลี่ยนอัตราส่วนการผสม
- สร้างโค้ด 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);
![พื้นที่สี 7 แบบ (srgb, Linear-srgb, lch, oklch, lab, oklab, xyz) จะแสดงผลการผสมขาวดำ แสดงเฉดสีที่แตกต่างกันประมาณ 5 เฉด แสดงให้เห็นว่าพื้นที่สีแต่ละสีจะผสมกับสีเทาต่างกัน](https://developer.chrome.com/static/docs/css-ui/css-color-mix/image/7-color-spaces-srgb-lin-f139be872a18a.png?authuser=19&hl=th)
ให้ผลลัพธ์ที่ยิ่งใหญ่
ดู 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);
![ช่องว่าง 7 สี (srgb, Linear-srgb, lch, oklch, lab, oklab, xyz) แต่ละรายการแสดงผลลัพธ์ต่างกัน หลายสีเป็นสีชมพูหรือม่วง แต่จริงๆ แล้วมีเพียงไม่กี่คนที่ยังคงเป็นสีน้ำเงิน](https://developer.chrome.com/static/docs/css-ui/css-color-mix/image/7-color-spaces-srgb-lin-5415cf7a20d75.png?authuser=19&hl=th)
การเรียนรู้ผลกระทบของพื้นที่สีด้วย 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);
}
![การไล่ระดับสีดำถึงขาวในพื้นที่สีต่างๆ](https://developer.chrome.com/static/docs/css-ui/css-color-mix/image/alttexthere-a16c67a3aee6c.png?authuser=19&hl=th)
ถ้าคุณสงสัยว่าพื้นที่สีใดที่ "ดีที่สุด" ยังไม่มี นั่นเป็นเหตุผล
มีตัวเลือกมากมาย! และจะไม่มีการขยายพื้นที่สี
คิดค้นขึ้นมาอย่างใดอย่างหนึ่ง (ดู oklch
และ oklab
) ถ้าเป็นรายการที่ "ดีที่สุด" แต่ละสี
ที่มีโอกาสโดดเด่นและได้เลือกสิ่งที่ใช่
เช่น หากต้องการผลการค้นหามิกซ์ที่สดใส ให้ใช้ hsl หรือ hwb ในรายการต่อไปนี้ สาธิต, 2 สีสันฉูดฉาด (ม่วงแดงและมะนาว) นำมารวมกันและ hsl และ hwb ทั้ง 2 อย่างนี้จะให้ผลลัพธ์ที่สดใส ในขณะที่ srgb และ oklab จะแสดงสีที่ไม่อิ่มตัว
![ผลลัพธ์แบบผสมดังที่อธิบายไว้ในย่อหน้าก่อนหน้า](https://developer.chrome.com/static/docs/css-ui/css-color-mix/image/alttexthere-93bf2be27ac03.png?authuser=19&hl=th)
หากต้องการความสม่ำเสมอและความละเอียดอ่อน ให้ใช้ oklab ในการสาธิตต่อไปนี้ ซึ่งผสมผสาน สีน้ำเงินและสีดำ HSL และ HWB จะเปลี่ยนสี โทนสี และ สีที่ฉูดฉาดมากเกินไป srgb และ oklab จะให้สีน้ำเงินเข้มกว่า
![ผลลัพธ์แบบผสมดังที่อธิบายไว้ในย่อหน้าก่อนหน้า](https://developer.chrome.com/static/docs/css-ui/css-color-mix/image/alttexthere-f139d29a23359.png?authuser=19&hl=th)
ใช้เวลา 5 นาทีกับสนามเด็กเล่น color-mix()
เพื่อทดสอบสีต่างๆ
และคุณก็จะเริ่มเข้าใจถึงข้อดีของพื้นที่ทำงานแต่ละแบบ และ
เราจะได้รับคำแนะนำเพิ่มเติมเกี่ยวกับพื้นที่สีต่างๆ เมื่อเราปรับตัวให้เข้ากับ
ในอินเทอร์เฟซผู้ใช้ของเรา
การปรับวิธีการประมาณค่าสี
หากคุณเลือกผสมผสานในพื้นที่สีทรงกระบอก สีใดก็ได้
ด้วยช่องสี h
ซึ่งยอมรับมุม คุณสามารถระบุได้ว่า
การประมาณค่าในช่วงจะเปลี่ยนเป็น shorter
, longer
, decreasing
และ increasing
นี่คือ
ศึกษาเพิ่มเติมได้ในคู่มือสี HD นี้หากคุณต้องการเรียนรู้เพิ่มเติม
ต่อไปนี้เป็นตัวอย่างการผสมสีฟ้าถึงขาว แต่คราวนี้ใช้เฉพาะใน ช่องว่างทรงกระบอกที่มีวิธีการสอดประสานของสีแตกต่างกัน
![ผลลัพธ์แบบผสมดังที่อธิบายไว้ในย่อหน้าก่อนหน้า](https://developer.chrome.com/static/docs/css-ui/css-color-mix/image/alttexthere-5b90e9287d746.png?authuser=19&hl=th)
นี่คือ Codepen อีกตัวที่ฉันสร้างขึ้นเพื่อช่วยให้เห็นภาพการประมาณค่าสี สำหรับการไล่ระดับสี ผมเชื่อว่าข้อมูลนี้จะช่วยให้คุณเข้าใจว่า พื้นที่สีจะสร้างผลลัพธ์การผสมเมื่อระบุการประมาณค่าสี ศึกษาให้ดี!
การผสมไวยากรณ์สีต่างๆ
จนถึงตอนนี้เราใช้สีที่มีชื่อ CSS ผสมกันเป็นส่วนใหญ่ เช่น blue
และ white
สี CSS
การผสมพร้อมที่จะผสมสีที่มาจากพื้นที่สีสองแห่ง นี่คือ
อีกเหตุผลหนึ่งคือสิ่งสำคัญคือการระบุพื้นที่สีสำหรับการผสม ตามที่ตั้งไว้
พื้นที่ร่วมเมื่อสีทั้งสองไม่ได้อยู่ในพื้นที่เดียวกัน
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% การผสมผสานที่ได้จะไม่ทึบแสง
สีทั้งสองจะไม่ปะปนกันอย่างเต็มที่
กำลังซ้อน color-mix()
เช่นเดียวกับ CSS ทั้งหมด การซ้อนจะได้รับการจัดการอย่างดีและตามที่คาดไว้ ฟังก์ชันภายในจะ แก้โจทย์ก่อน แล้วแสดงผลค่าลงในบริบทระดับบนสุด
color-mix(in lch, purple 40%, color-mix(plum, white))
คุณสามารถซ้อนได้มากเท่าที่ต้องการเพื่อให้ได้ผลลัพธ์ที่กำลังทำอยู่
การสร้างรูปแบบสีสว่างและมืด
มาสร้างรูปแบบสีกับ color-mix()
กัน
รูปแบบสีพื้นฐาน
ใน CSS ต่อไปนี้ ธีมสว่างและมืดจะสร้างขึ้นตามเลขฐานสิบหกของแบรนด์ สี ธีมสว่างทำให้เกิดข้อความสีน้ำเงินเข้ม 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 มีการสาธิตที่ยอดเยี่ยมพร้อมกรณีการใช้งานเพียงเล็กน้อย สำหรับการศึกษา:
การแก้ไขข้อบกพร่อง color-mix() ด้วยเครื่องมือสำหรับนักพัฒนาเว็บ
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome รองรับ color-mix()
ได้อย่างยอดเยี่ยม จดจำและ
ไฮไลต์ไวยากรณ์ สร้างหน้าตัวอย่างของการผสมผสานถัดจากรูปแบบใน
ในแผง "รูปแบบ" และอนุญาตให้เลือกสีอื่นได้
ซึ่งจะมีลักษณะประมาณนี้ในเครื่องมือสำหรับนักพัฒนาเว็บ
ขอให้สนุกกับการมิกซ์เพลงนะ