ตอนนี้เครื่องมือหลักๆ ทั้งหมดรองรับพื้นที่สีและฟังก์ชันใหม่ของ CSS แล้ว มาดูวิธีที่จะช่วยเพิ่มความมีชีวิตชีวาให้กับการออกแบบของคุณ
ขณะนี้ CSS รองรับพื้นที่สีที่อนุญาตให้เราเข้าถึงสีนอกขอบเขต sRGB ได้แล้ว ซึ่งหมายความว่าคุณสามารถรองรับจอแสดงผลระดับ HD (ความละเอียดสูง) โดยใช้สีจากโทนสี HD ได้ การสนับสนุนนี้มาพร้อมกับฟังก์ชันใหม่เพื่อให้ใช้สีบนเว็บได้ดียิ่งขึ้น
การเข้าถึงพื้นที่สีจาก CSS
เรามีฟังก์ชันมากมายที่ช่วยให้เราเข้าถึงสีภายในขอบเขตของ sRGB ได้อยู่แล้ว ซึ่งได้แก่ rgb(), hsl() และ hwb() ตอนนี้เบราว์เซอร์รองรับฟังก์ชัน color() ซึ่งเป็นวิธีมาตรฐานในการเข้าถึงสีภายในพื้นที่สี RGB ใดก็ได้ ซึ่งรวมถึง sRGB, Display P3 และ Rec2020 ดูตัวอย่างได้ใน CSS ต่อไปนี้
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
นอกจากนี้ ระบบยังรองรับฟังก์ชันต่างๆ ที่อนุญาตให้เข้าถึงพื้นที่สีอื่นที่ไม่ใช่ sRGB โดยใช้ lch(), lab(), oklch() และ oklab()
คุณสามารถดูข้อมูลเกี่ยวกับพื้นที่สีที่แตกต่างกันเหล่านี้ได้ในคู่มือสี CSS ความละเอียดสูง
ฟังก์ชัน color-mix()
นอกจากพื้นที่สีใหม่เหล่านี้แล้ว เครื่องมือทั้งหมดยังรองรับฟังก์ชัน color-mix() อีกด้วย ฟังก์ชันนี้ช่วยให้สามารถผสมสีหนึ่งลงในอีกสีหนึ่งในพื้นที่สีใดก็ได้ ใน CSS ต่อไปนี้ มีสีน้ำเงิน 25% ผสมเป็นสีขาวในพื้นที่สี srgb
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
ดูข้อมูลเพิ่มเติมเกี่ยวกับ color-mix()
ฟังก์ชันและพื้นที่สีใหม่ๆ เหล่านี้จะช่วยมอบสีสันระดับ HD ให้แก่เว็บ สำหรับแรงบันดาลใจ ให้เริ่มต้นด้วยการสร้างการไล่ระดับสีที่งดงามโดยใช้โปรแกรมสร้างการไล่ระดับสี HD ที่ gradient.style
ส่วนหนึ่งของชุดหนังสือที่ทำงานร่วมกันแบบใหม่