พื้นที่สีและฟังก์ชันใหม่ของ CSS ในเครื่องมือค้นหาหลักทั้งหมด

ตอนนี้เครื่องมือหลักๆ ทั้งหมดรองรับพื้นที่สีและฟังก์ชันใหม่ของ CSS แล้ว มาดูวิธีที่จะช่วยเพิ่มความมีชีวิตชีวาให้กับการออกแบบของคุณ

Rachel Andrew

ขณะนี้ 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