เอกสารนี้เป็นส่วนหนึ่งของคู่มือการใช้สี CSS ที่มีความคมชัดสูง
CSS สี 4 ระบุคุณลักษณะและเครื่องมือใหม่ๆ จำนวนมากสำหรับ CSS และสี Codepen ต่อไปนี้จะแสดงไวยากรณ์สีใหม่และเก่าทั้งหมดร่วมกัน
ข้อกำหนดระดับ 4 เปิดตัวพื้นที่สีใหม่ 12 พื้นที่สำหรับค้นหาสี ซึ่งเพิ่มขึ้นจาก 7 ขอบเขตใหม่ที่แชร์ไว้ก่อนหน้านี้
พบกับพื้นที่สีใหม่สำหรับเว็บ
พื้นที่สีต่อไปนี้ช่วยให้เข้าถึงขอบเขตที่มีขนาดใหญ่กว่า sRGB พื้นที่สี Display-p3 มีสีมากกว่า RGB เกือบ 2 เท่า ขณะที่ Rec2020 มีสีมากกว่า Display-p3 เกือบ 2 เท่า มีสีให้เลือกเยอะเลย
ฟังก์ชัน color()
ฟังก์ชัน
color()
ใหม่สามารถใช้กับพื้นที่สีใดๆ ที่ระบุสีที่มีช่องสี R, G และ B color() จะใช้พารามิเตอร์พื้นที่สีก่อน จากนั้นตามด้วยชุดของค่าแชแนลสำหรับ RGB และอัลฟ่าบางตัว (ไม่บังคับ)
คุณจะพบว่าพื้นที่สีใหม่จำนวนมากใช้ฟังก์ชันนี้ เนื่องจากการมีฟังก์ชันพิเศษ เช่น rgb, srgb, hsl, hwb และอื่นๆ เพิ่มจำนวนขึ้นในรายการจำนวนมาก และทำให้พื้นที่สีเป็นพารามิเตอร์ได้ง่ายขึ้น
ข้อดี
- พื้นที่ที่ปรับให้เป็นมาตรฐานสำหรับการเข้าถึงพื้นที่สีที่ใช้ช่อง RGB
- สามารถปรับขนาดได้ทุกพื้นที่สีตาม RGB ที่กว้าง
ข้อเสีย
- ใช้ไม่ได้กับ HSL, HWB, LCH, okLCH หรือ okLAB
.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 ผ่าน color()
พื้นที่สีนี้มีฟีเจอร์เหมือนกับ rgb() และยังมีทศนิยมระหว่าง 0 ถึง 1 ด้วย เช่น 0% ถึง 100%
ข้อดี
- จอแสดงผลเกือบทั้งหมดรองรับช่วงสีนี้
- การรองรับเครื่องมือออกแบบ
ข้อเสีย
- ไม่เป็นเชิงเส้นเชิงรับรู้ (เหมือนที่
lch()เป็น) - ไม่มีสีโทนกว้าง
- การไล่ระดับสีมักจะผ่านโซนที่ไม่ทำงาน
.valid-css-srgb-colors {
--percents: color(srgb 34% 58% 73%);
--decimals: color(srgb .34 .58 .73);
--percents-with-opacity: color(srgb 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb none none none);
--empty-channels-black2: color(srgb);
}
sRGB เชิงเส้นผ่าน color() {#linear-srgb}
ทางเลือกเชิงเส้นแทน RGB นี้มีความเข้มของแชแนลที่คาดการณ์ได้
ข้อดี
- เข้าถึงช่องสัญญาณ RGB โดยตรง เหมาะสำหรับการใช้งานอย่างเครื่องมือเกมหรือโชว์แสงสี
ข้อเสีย
- ไม่เป็นเชิงเส้นเชิงรับรู้
- สีขาวดำอยู่เต็มขอบ
.valid-css-srgb-linear-colors {
--percents: color(srgb-linear 34% 58% 73%);
--decimals: color(srgb-linear .34 .58 .73);
--percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb-linear none none none);
--empty-channels-black2: color(srgb-linear);
}
การไล่ระดับสีจะพูดถึงรายละเอียดในภายหลัง แต่การได้เห็นการไล่ระดับสี srgb และ linear-srgb สีดำถึงขาวก็มีประโยชน์อย่างมากเพื่อแสดงความแตกต่าง ดังนี้
LCH
LCH แนะนำไวยากรณ์สำหรับเข้าถึงสีที่อยู่นอกขอบเขตของ RGB และยังเป็นเมตริกแรกที่ให้คุณสร้างสีนอกขอบเขตสำหรับจอแสดงผลได้ง่ายๆ เนื่องจากสีพื้นที่ CIE (lch, oklch, lab, oklab) สามารถแสดง สเปกตรัมสีที่มองเห็นได้ทั้งหมดของมนุษย์
พื้นที่สีนี้จำลองมาจากการมองเห็นของมนุษย์และมีไวยากรณ์ในการระบุสีดังกล่าวและอื่นๆ ช่อง LCH คือความสว่าง สี และโทนสี โทนสีเป็นมุม เช่น ใน HSL และ HWB ความสว่างคือค่าระหว่าง 0 ถึง 100 เป็นความเบาที่ "ดูเป็นเส้นตรง" แบบเน้นความรู้สึก และเน้นมนุษย์เป็นหลัก ความอิ่มตัวของสีคล้ายกับความอิ่มตัว มีค่าได้ตั้งแต่ 0 ถึง 230 แต่ทางเทคนิคยังไม่มีการควบคุม
ข้อดี
- การบิดเบือนสีที่คาดการณ์ได้เนื่องจากการเป็นเชิงเส้นเชิงรับรู้เป็นส่วนใหญ่ (ดู oklch)
- ใช้ช่องที่คุ้นเคย
- มักจะมีการไล่ระดับสีที่มีชีวิตชีวา
ข้อเสีย
- นอกกรอบได้ง่ายดาย
- ในบางกรณีที่เกิดขึ้นไม่บ่อยนัก การไล่ระดับสีอาจต้องมีจุดกึ่งกลางของการปรับเพื่อป้องกันการเปลี่ยนแปลงของโทนสี
.valid-css-lch-colors {
--percent-and-degrees: lch(58% 32 241deg);
--just-the-degrees: lch(58 32 241deg);
--minimal: lch(58 32 241);
--percent-opacity: lch(58% 32 241 / 50%);
--decimal-opacity: lch(58% 32 241 / .5);
/* chromaless and hueless */
--empty-channels-white: lch(100 none none);
--empty-channels-black: lch(none none none);
}
ห้องทดลอง
พื้นที่สีอีกแห่งในการเข้าถึงขอบเขต CIE อีกครั้งด้วยมิติข้อมูลความสว่าง (L) แบบรับรู้ได้ A และ B ใน LAB จะแสดงแกนเฉพาะของ การมองเห็นสีของมนุษย์ คือ แดง/เขียว และน้ำเงิน เหลือง ถ้าให้ค่า A เป็นค่าบวก จะเพิ่มสีแดงและเพิ่มสีเขียวเมื่อมีค่าต่ำกว่า 0 เมื่อให้ตัวเลข B เป็นจำนวนบวก จะเป็นการเพิ่มสีเหลือง โดยค่าลบจะเป็นสีน้ำเงิน
ข้อดี
- การไล่ระดับสีที่สม่ำเสมอและรับรู้
- ช่วงไดนามิกสูง
ข้อเสีย
- ศักยภาพที่สีอาจเปลี่ยนไป
- เขียนแบบด้วยมือยากหรือคาดเดาสีเวลาอ่านค่า
.valid-css-lab-colors {
--percent-and-degrees: lab(58% -16 -30);
--minimal: lab(58 -16 -30);
--percent-opacity: lab(58% -16 -30 / 50%);
--decimal-opacity: lab(58% -16 -30 / .5);
/* chromaless and hueless */
--empty-channels-white: lab(100 none none);
--empty-channels-black: lab(none none none);
}
โอเคแอล
พื้นที่สีนี้แก้ไขเป็น LCH แล้ว และเช่นเดียวกับ LCH คือ (L) จะแสดงความสว่างตามเส้นตรง C สำหรับโครมาและ H แทนโทนสี
พื้นที่ทำงานนี้จะคุ้นเคยดีหากคุณเคยใช้ HSL หรือ LCH เลือกมุมบนวงล้อสีสำหรับ H เลือกความสว่างหรือความมืด โดยปรับ L แต่เราจะมีค่าสีแทนความอิ่มตัว ซึ่งค่อนข้างเหมือนกันทุกประการ ยกเว้นการปรับความสว่างและสี
ข้อดี
- ไม่ต้องกังวลเมื่อใช้เฉดสีน้ำเงินและม่วง
- ความสว่างที่รับรู้ได้แบบเชิงเส้น
- ใช้ช่องที่คุ้นเคย
- ช่วงไดนามิกสูง
- มีตัวเลือกสีสมัยใหม่ - โดย Evil Martians
ข้อเสีย
- นอกกรอบได้ง่ายดาย
- ใหม่และค่อนข้างที่ยังไม่มีการสำรวจ
- ตัวเลือกสีน้อยเกินไป
.valid-css-oklch-colors {
--percent-and-degrees: oklch(64% .1 233deg);
--just-the-degrees: oklch(64 .1 233deg);
--minimal: oklch(64 .1 233);
--percent-opacity: oklch(64% .1 233 / 50%);
--decimal-opacity: oklch(64% .1 233 / .5);
/* chromaless and hueless */
--empty-channels-white: oklch(100 none none);
--empty-channels-black: oklch(none none none);
}
ตกลงแล็บ
พื้นที่ทำงานนี้ถูกต้องสำหรับ LAB และมีการอ้างว่าเป็นพื้นที่ซึ่งเพิ่มประสิทธิภาพเพื่อคุณภาพของการประมวลผลรูปภาพเช่นกัน สำหรับเราใน CSS หมายถึงคุณภาพการไล่ระดับสีและการปรับแต่งฟังก์ชันสี
ข้อดี
- พื้นที่เริ่มต้นสำหรับภาพเคลื่อนไหวและการประมาณค่าในช่วง
- ความสว่างที่รับรู้ได้แบบเชิงเส้น
- ไม่มีการเปลี่ยนแปลงโทนสีเหมือน LAB
- การไล่ระดับสีที่สม่ำเสมอและรับรู้
ข้อเสีย
- ใหม่และค่อนข้างที่ยังไม่มีการสำรวจ
- ตัวเลือกสีน้อยเกินไป
.valid-css-oklab-colors {
--percent-and-degrees: oklab(64% -.1 -.1);
--minimal: oklab(64 -.1 -.1);
--percent-opacity: oklab(64% -.1 -.1 / 50%);
--decimal-opacity: oklab(64% -.1 -.1 / .5);
/* chromaless and hueless */
--empty-channels-white: oklab(100 none none);
--empty-channels-black: oklab(none none none);
}
จอแสดงผล P3
ขอบเขตการแสดงผล P3 และพื้นที่สีได้รับความนิยมเพราะ Apple รองรับ iMac ของพวกเขามาตั้งแต่ปี 2015 Apple ยังรองรับ Display-p3 ในหน้าเว็บผ่าน CSS ตั้งแต่ปี 2016 ซึ่งเป็นเวลา 5 ปีก่อนเบราว์เซอร์อื่นๆ หากมาจาก sRGB จะเป็นพื้นที่สีที่ดีในการ เริ่มทำงานเมื่อคุณย้ายสไตล์ไปยังช่วงไดนามิกที่สูงขึ้น
ข้อดี
- รองรับการใช้งานที่ดีเยี่ยม ซึ่งถือเป็นเกณฑ์พื้นฐานสำหรับจอแสดงผล HDR
- มีสีมากกว่า sRGB 50%
- เครื่องมือสำหรับนักพัฒนาเว็บมีตัวเลือกสีที่ยอดเยี่ยม
ข้อเสีย
- ซึ่งท้ายที่สุดแล้วก็จะไม่อยู่ในพื้นที่ Rec2020 และ CIE
.valid-css-display-p3-colors {
--percents: color(display-p3 34% 58% 73%);
--decimals: color(display-p3 .34 .58 .73);
--percent-opacity: color(display-p3 34% 58% 73% / 50%);
--decimal-opacity: color(display-p3 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(display-p3 none none none);
--empty-channels-black2: color(display-p3);
}
Rec2020
Rec2020 เป็นส่วนหนึ่งของการเปลี่ยนไปใช้ UHDTV (ทีวีความละเอียดสูงพิเศษ) ซึ่งมาพร้อมสื่อที่มีระดับ 4K และ 8K Rec2020 เป็นอีกขอบเขตหนึ่งที่ใช้ RGB ซึ่งมีขนาดใหญ่กว่า Display-p3 แต่ผู้บริโภคทั่วไปก็ไม่ต่างกันเท่ากับ Display P3
ข้อดี
- สี Ultra HD
ข้อเสีย
- ไม่ค่อยพบได้ในหมู่ผู้บริโภค (ในขณะนี้)
- มักไม่พบในอุปกรณ์เคลื่อนที่หรือแท็บเล็ต
.valid-css-rec2020-colors {
--percents: color(rec2020 34% 58% 73%);
--decimals: color(rec2020 .34 .58 .73);
--percent-opacity: color(rec2020 34% 58% 73% / 50%);
--decimal-opacity: color(rec2020 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(rec2020 none none none);
--empty-channels-black2: color(rec2020);
}
A98 RGB {#a98-rgb}
Adobe เป็นชื่อย่อของ Adobe 1998 RGB ว่า A98 RGB สร้างขึ้นโดย Adobe เพื่อแสดงสีต่างๆ ที่สามารถหาได้จากเครื่องพิมพ์ CMYK เพราะมีสีมากกว่า sRGB โดยเฉพาะในโทนสีฟ้าและเขียว
ข้อดี
- มีขนาดใหญ่กว่าพื้นที่สี sRGB และ Display P3
ข้อเสีย
- ไม่ใช่พื้นที่ส่วนกลางสำหรับนักออกแบบดิจิทัล
- มีเพียงไม่กี่คนที่โอนจานสีจาก CMYK
.valid-css-a98-rgb-colors {
--percents: color(a98-rgb 34% 58% 73%);
--decimals: color(a98-rgb .34 .58 .73);
--percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(a98-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(a98-rgb none none none);
--empty-channels-black2: color(a98-rgb);
}
กล้อง RGB ของ Pro
พื้นที่ที่กว้างมากซึ่งสร้างโดย Kodak นี้ให้สีหลักที่หลากหลายเป็นพิเศษและมีการปรับโทนสีน้อยที่สุดเมื่อเปลี่ยนความสว่าง และยังอ้างว่าครอบคลุมสีพื้นผิวจริง 100% ตามที่ Michael Pointer บันทึกไว้ในปี 1980
ข้อดี
- สีเปลี่ยนไปเล็กน้อยเมื่อเปลี่ยนความสว่าง
- สีหลักสดใส
ข้อเสีย
- สีประมาณ 13% ของสีที่นำเสนอเป็นจินตนาการ ซึ่งหมายความว่าสีไม่ได้อยู่ในสเปกตรัมที่มองเห็นได้ของมนุษย์
.valid-css-prophoto-rgb-colors {
--percents: color(prophoto-rgb 34% 58% 73%);
--decimals: color(prophoto-rgb .34 .58 .73);
--percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(prophoto-rgb none none none);
--empty-channels-black2: color(prophoto-rgb);
}
XYZ, XYZ-D50, XYZ-d65
พื้นที่สี CIE XYZ ครอบคลุมทุกสีที่บุคคลที่มีสายตาปกติเห็นได้ นี่จึงเป็นเหตุผลที่ใช้เป็นการอ้างอิงมาตรฐานสำหรับพื้นที่สีอื่นๆ Y คือความสว่าง X และ Z เป็นสีโครเมียมที่ส่องสว่างได้ไม่เกิน Y
ความแตกต่างระหว่าง d50 และ d65 คือจุดสีขาว โดยที่ d50 ใช้จุดสีขาว d50 และ d65 ใช้จุดสีขาว d65
คีย์เวิร์ด: จุดสีขาวเป็นแอตทริบิวต์ของพื้นที่สี และเป็นตำแหน่งที่สีขาวจริงอยู่ภายในพื้นที่ทำงาน สำหรับหน้าจออิเล็กทรอนิกส์ D65 คือจุดสีขาว ที่พบมากที่สุดและสั้นถึง 6,500 เคลวิน การแปลงสีเป็นสิ่งสำคัญที่จุดสีขาวจะตรงกัน เพื่อไม่ให้ส่งผลต่ออุณหภูมิสี (ความอบอุ่นหรือความเย็น)
ข้อดี
- การเข้าถึงแสงเชิงเส้นมีกรณีการใช้งานที่มีประโยชน์
- เหมาะสำหรับการผสมสีจริง
ข้อเสีย
- ไม่ใช่แบบเชิงเส้นตรงๆ เช่น lch, oklch, lab และ oklab
.valid-css-xyz-colors {
--percents: color(xyz 22% 26% 53%);
--decimals: color(xyz .22 .26 .53);
--percent-opacity: color(xyz .22 .26 .53 / 50%);
--decimal-opacity: color(xyz .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz none none none);
--empty-channels-black2: color(xyz);
}
.valid-css-xyz-d50-colors {
--percents: color(xyz-d50 22% 26% 53%);
--decimals: color(xyz-d50 .22 .26 .53);
--percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d50 none none none);
--empty-channels-black2: color(xyz-d50);
}
.valid-css-xyz-d65-colors {
--percents: color(xyz-d65 22% 26% 53%);
--decimals: color(xyz-d65 .22 .26 .53);
--percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d65 none none none);
--empty-channels-black2: color(xyz-d65);
}
พื้นที่สีที่กำหนดเอง
ข้อกำหนด CSS Color 5 ยังมี เส้นทางสำหรับสอนให้เบราว์เซอร์ใช้พื้นที่สีที่กำหนดเองอีกด้วย นี่คือโปรไฟล์ ICC ที่บอกวิธีการแก้สีเบราว์เซอร์
@color-profile --foo {
src: url(path/to/custom.icc);
}
เมื่อโหลดแล้ว ให้เข้าถึงสีจากโปรไฟล์ที่กำหนดเองนี้ด้วยฟังก์ชัน color() และระบุค่าแชแนลสำหรับโปรไฟล์ดังกล่าว
.valid-css-color-from-a-custom-profile {
background: color(--foo 1 0 0);
}
การประมาณค่าสี
การเปลี่ยนจากสีหนึ่งไปยังอีกสีหนึ่งพบได้ในภาพเคลื่อนไหว การไล่ระดับสี และการผสมสี โดยทั่วไปแล้ว การเปลี่ยนนี้จะระบุเป็นสีเริ่มต้นและสีสิ้นสุด ซึ่งคาดว่าเบราว์เซอร์จะมีการประมาณค่าในช่วงระหว่างสีทั้งสอง ในกรณีนี้ การใช้ช่วงสลับสีจะเป็นการสร้างชุดของสีระหว่างสีเพื่อสร้างการเปลี่ยนแปลงที่ราบรื่นแทนที่จะทำทันที
เมื่อมีการไล่ระดับสี การประมาณค่าในช่วงคือชุดสีตามรูปร่าง ในส่วนของภาพเคลื่อนไหว จะเป็นการสร้างชุดสีตามช่วงเวลา
@keyframes bg {
0%, 100% {
background: orange;
}
25% {
background: magenta;
}
50% {
background: lime;
}
75% {
background: cyan;
}
}
.circle {
animation: bg 5s ease-in-out infinite;
}
สำหรับการไล่ระดับสี ช่วงของสีจะแสดงพร้อมกันทั้งหมด
มีอะไรใหม่ในการประมาณค่าสี
เราได้เพิ่มขอบเขตและพื้นที่สีใหม่ๆ เพิ่มตัวเลือกใหม่ๆ สำหรับการประมาณค่าด้วย การเปลี่ยนสีin hslจากสีน้ำเงินเป็นสีขาว
จะทำให้ได้สีที่ต่างจาก sRGB มาก
.classic-gradient-in-srgb {
background: linear-gradient(to right, blue, white);
}
.new-gradient-in-hsl {
background: linear-gradient(in hsl to right, blue, white);
}
จากนั้นจะเกิดอะไรขึ้นหากคุณเปลี่ยนจากสีในช่องว่างหนึ่งเป็นสีใน พื้นที่ที่แตกต่างกันอย่างสิ้นเชิง
.gradient {
/* oklab will be the common space */
background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}
.lch {
/* lch is specified */
background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}
โชคดีสำหรับคุณที่ข้อกำหนด Color 4 มีคำแนะนำเกี่ยวกับเบราว์เซอร์เกี่ยวกับวิธีจัดการกับการประมาณค่าพื้นที่สีข้ามสีเหล่านี้ สำหรับ .gradient เบราว์เซอร์จะสังเกตเห็นพื้นที่สีที่แตกต่างกันและใช้พื้นที่สีเริ่มต้น oklab
คุณอาจคิดว่าเบราว์เซอร์จะใช้ lch เป็นพื้นที่สี เพราะเป็นสีแรก
แต่จริงๆ แล้วไม่ใช้ นั่นคือเหตุผลที่ฉันแสดงการไล่ระดับสีที่ 2 ของการเปรียบเทียบ
.lch การไล่ระดับสี .lch เป็นการไล่ระดับสีจากพื้นที่สี LCH
ลดแถบสีด้วยสี 16 บิต
ก่อนใช้สีนี้ สีทั้งหมดจะถูกบันทึกในจำนวนเต็ม 32 บิต 1 ช่องเพื่อแสดงถึงช่องทั้ง 4 ช่อง ซึ่งได้แก่ แดง เขียว น้ำเงิน และอัลฟ่า นี่คือ 8 บิตต่อช่องสัญญาณและ 2^ 24 สีที่เป็นไปได้ (ไม่สนใจอัลฟ่า) 2 ^ 24 = 16,777,216, "หลายล้านสี"
หลังจากใช้สีนี้ ค่าจุดลอยตัว 16 บิต 4 ค่า แต่ละช่องจะมีแบบลอยของตัวเองแทนที่จะนำมารวมกัน ซึ่งก็คือข้อมูลรวมแบบ 64 บิต ซึ่งทำให้เกิดสีมากกว่าล้านสี
คุณจำเป็นต้องดำเนินการนี้เพื่อให้รองรับสี HD วิธีนี้ช่วยเพิ่มจำนวนข้อมูลสีที่สามารถจัดเก็บได้ ซึ่งส่งผลข้างเคียงที่ดี ซึ่งหมายความว่าเบราว์เซอร์จะใช้สีในการไล่ระดับสีมากขึ้น
การไล่ระดับสีคือการไล่ระดับสีเมื่อมีสีไม่เพียงพอที่จะสร้างการไล่ระดับสีที่เรียบเนียนและมองเห็น "แถบ" สีได้ แถบสีจะลดลงอย่างมากเมื่ออัปเกรดเป็นสีที่มีความละเอียดสูงขึ้น
ควบคุมการประมาณค่าในช่วง
ระยะทางที่สั้นที่สุดระหว่าง 2 จุดจะเป็นเส้นตรงเสมอ เมื่อใช้การประมาณสี เบราว์เซอร์จะใช้เส้นทางสั้นๆ โดยค่าเริ่มต้น ลองนึกถึงสถานการณ์ที่มี 2 จุดในกระบอกสี HSL การไล่ระดับสีจะได้ขั้นตอนสีโดยเคลื่อนที่ไปตามเส้นที่อยู่ระหว่าง 2 จุด
linear-gradient(to right, #94e99c, #e06242)
มุมมองจากด้านบนของทรงกระบอก HSL ที่มีเส้นอยู่ระหว่างจุดสี
เส้นไล่ระดับสีด้านบนจะตรงระหว่างสีเขียวกับสีแดง โดยผ่านจุดกึ่งกลางของพื้นที่สี แม้ว่าข้อมูลด้านบนนี้จะช่วยสร้างความเข้าใจได้ แต่ก็ไม่ใช่สิ่งที่เกิดขึ้นเสมอไป นี่คือการไล่ระดับสีใน Codepen ต่อไปนี้ และไม่เห็นได้ชัดว่าอยู่ตรงกลางอย่างในการสาธิตจำลอง
แต่พื้นที่ตรงกลางของการไล่ระดับสีสูญเสียความคมชัด นั่นเป็นเพราะสีที่สดใสที่สุดอยู่ที่ขอบของรูปร่างพื้นที่สี ไม่ใช่จุดศูนย์กลางที่การประมาณค่าใกล้เดินทางไป ซึ่งมักเรียกว่า "โซนเดด" ปัญหานี้มี 2-3 วิธีที่จะแก้ไขหรือแก้ปัญหานี้ได้
การระบุการหยุดไล่ระดับสีเพิ่มเติมเพื่อหลีกเลี่ยงโซนไม่ทำงาน
เทคนิคในการหลีกเลี่ยงโซนที่ไม่ทำงานในวันนี้คือการเพิ่มตัวหยุดสีเพิ่มเติมในการไล่ระดับสีที่จะนำทางการประมาณค่าในช่วงสีให้อยู่ภายในช่วงที่สว่างของพื้นที่สี จริงๆ แล้ววิธีนี้จะช่วยแก้ปัญหาได้ เนื่องจากการหยุดเพิ่มเติม จะช่วยแก้ไขปัญหาที่ขาดหายได้
มีเครื่องมือไล่ระดับสีที่สร้างโดย Erik Kennedy ที่จะคำนวณตัวหยุดสีเพิ่มเติมให้คุณ เพื่อช่วยคุณหลีกเลี่ยงพื้นที่อับสัญญาณแม้ในพื้นที่สีจะมีแนวโน้มทำให้เกิดจุดด่างดำ เมื่อใช้ค่านี้ การส่งผ่านสีเดียวกันจากตัวอย่างแรก แต่เปลี่ยนการประมาณค่าสีเป็น HSL จะส่งผลให้เกิดสิ่งต่อไปนี้
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
มุมมองจากด้านบนของทรงกระบอก HSL ที่มีเส้นโค้งและมีจุดสี 9 จุด
ด้วยจุดหยุดที่มีการนำทาง การประมาณค่าจะไม่เป็นเส้นตรงอีกต่อไป แต่จะปรากฏในบริเวณรอบๆ บริเวณที่เสียหาย ซึ่งจะรักษาความอิ่มตัวของสี ซึ่งส่งผลให้มีการไล่ระดับสีที่มีชีวิตชีวามากขึ้น
แม้ว่าเครื่องมือจะทำงานได้อย่างดีเยี่ยม แต่หากคุณมีการควบคุมที่คล้ายคลึงหรือดีขึ้นจาก CSS โดยตรง
การกำหนดการประมาณค่าสี
ในสีที่ 4 มีการเพิ่มความสามารถในการควบคุมกลยุทธ์การประมาณค่าสีและเป็นวิธีใหม่ในการหลบเลี่ยง (:wink:) บริเวณที่ไม่ทำงาน ลองนึกถึงมุมของโทนสีแล้วลองพิจารณาการไล่ระดับสีแบบ 2 จุด ซึ่งจะเปลี่ยนมุมเท่านั้น โดยจะเปลี่ยนโทนสีจาก 140deg เป็น 240deg
การประมาณค่าในช่วงโทนสีที่สั้นหรือยาว
การไล่ระดับสีจะใช้เส้นทาง shorter ตามค่าเริ่มต้น เว้นแต่คุณจะกำหนดให้ใช้เส้นทาง longer ตัวเลือกการประมาณค่าสีจะกำหนดทิศทางการหมุนมุม เช่น บอกให้คนหันซ้าย
แทนที่จะขวา (หรือ Zoolander)
ในตัวอย่างระยะการประมาณค่าสี ระบบจะจำลองเส้นทางสั้นและเส้นทางยาวเพื่อแสดงให้เห็นความแตกต่าง ระยะทางสั้นจะทำให้มีเฉดสีน้อยกว่าเพราะเป็นระยะทางที่เดินทางผ่านระยะทางน้อยที่สุดเท่าที่จะเป็นไปได้ โดยระยะทางที่ยาวจะขับผ่านเฉดสีมากกว่า
การเพิ่มกับการลดการประมาณค่าสี
มีกลยุทธ์การประมาณค่าสีอีก 2 แบบในสี 4 แต่มีไว้สำหรับพื้นที่สีทรงกระบอกโดยเฉพาะ สำหรับภาพ 2 สีจากตัวอย่างก่อนหน้านี้ ภาพจะแสดงวิธีการทำงานของการเพิ่มขึ้นและลดลง
Codepen ข้างต้นใช้ ColorJS เพื่อแสดงผลลัพธ์ที่คาดหวัง CSS ที่คุณจะเขียนเพื่อให้ได้ผลลัพธ์เดียวกันโดยไม่ต้องมีไลบรารี JavaScript จะเป็นดังนี้
.longer-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl longer hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
.decreasing-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl decreasing hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
สำหรับการปิดค่าการประมาณค่าสี ลองใช้พื้นที่สนุกๆ เพื่อเปลี่ยนโทนสีระหว่างการหยุดสี 2 ช่วงและดูผลของตัวเลือกการประมาณค่าสี ตลอดจนดูว่าพื้นที่สีเปลี่ยนผลลัพธ์การไล่ระดับสีอย่างไร เอฟเฟกต์จะแตกต่างกันอย่างมาก ลองคิดว่านี่เป็นเทคนิคใหม่ 4 แบบที่เพิ่งจะเพิ่มลงในเครื่องมือสีของคุณ
การไล่ระดับสีในพื้นที่สีต่างๆ
พื้นที่สีแต่ละพื้นที่ซึ่งมีรูปร่างและการจัดเรียงสีที่ต่างกันจะทำให้เกิดการไล่ระดับสีที่แตกต่างกัน ในตัวอย่างต่อไปนี้ ให้ดูว่าแต่ละพื้นที่สีจัดการแตกต่างกันอย่างไร โดยเฉพาะสีน้ำเงินถึงขาว สังเกตตัวเลขที่กลายเป็นสีม่วงตรงกลาง ซึ่งเรียกว่าการเปลี่ยนโทนสีระหว่างการประมาณค่า
การไล่ระดับสีบางส่วนในพื้นที่เหล่านี้จะมีสีสันสดใสมากกว่าแบบอื่นๆ หรือเคลื่อนผ่านโซนที่เสียหายน้อยกว่า
พื้นที่ทำงานอย่าง lab จะแพคสีเข้าด้วยกันในลักษณะที่ปรับความอิ่มตัวของสี ซึ่งตรงข้ามกับพื้นที่ที่เพิ่มประสิทธิภาพให้มนุษย์เขียนสีในรูปแบบ hwb()
.hwb {
background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}
การสาธิตด้านบนแม้จะแสดงผลลัพธ์อย่างละเอียดยิ่งขึ้น แต่ก็แสดงให้เห็นว่ามีการประมาณค่าในห้องทดลองที่สม่ำเสมอกว่า ไวยากรณ์ของ Lab อ่านได้ไม่ง่ายนัก แต่มีตัวเลขติดลบที่ไม่คุ้นเคยเมื่อมาจาก RGB หรือ hsl ข่าวดี เราสามารถใช้ hwb สำหรับไวยากรณ์ที่คุ้นเคยได้ แต่ขอให้ใช้การไล่ระดับสีภายในพื้นที่สีอื่น เช่น oklab ทั้งหมด
.hwb {
background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
ตัวอย่างนี้ใช้สีเดียวกันใน hwb แต่ระบุพื้นที่สีสำหรับการประมาณค่าเป็น hwb หรือ oklab hwb เป็นพื้นที่สีที่ดีสำหรับความสดชื่นสูงแต่อาจมีจุดอับแสงหรือจุดสว่าง (ดูฮอตสปอตสีน้ำเงินเขียวในตัวอย่างด้านบน) oklab เหมาะสำหรับการไล่ระดับสีแบบเส้นตรงแบบรับรู้สีที่อิ่มตัว ฟีเจอร์นี้สนุกมาก คุณจะได้ลองใช้พื้นที่สีต่างๆ
เพื่อดูว่าการไล่ระดับสีแบบใดที่คุณชอบมากที่สุด
นี่คือ Codepen ที่ทดลองใช้การไล่ระดับสีและพื้นที่สี ผสมผสานกลยุทธ์และการจับคู่เพื่อสำรวจความเป็นไปได้ แม้แต่การเปลี่ยนจากดำเป็นขาวก็แตกต่างกันในแต่ละพื้นที่สีด้วย
การปรับขอบเขต
มีบางสถานการณ์ที่สีอาจขอข้อมูลบางอย่างนอกขอบเขต ลองใช้สีต่อไปนี้
rgb(300 255 255)
ค่าสูงสุดสำหรับช่องสีในพื้นที่สี rgb คือ 255 แต่มีการระบุ 300 สำหรับสีแดงที่นี่ สิ่งที่เกิดขึ้น การบีบขอบเขต
การยึดคือการนําข้อมูลเพิ่มเติมออก 300 จะกลายเป็น 255
ภายในเครื่องมือสี ตอนนี้สีก็ถูกบีบให้อยู่ภายในพื้นที่แล้ว
การเลือกพื้นที่สี
หลายคนหลังจากที่ได้เรียนรู้เกี่ยวกับพื้นที่สีและผลกระทบเหล่านี้แล้ว รู้สึกสับสนและอยากทราบว่าควรเลือก "สี" แบบใด จากการศึกษาและประสบการณ์ ผมไม่ได้เห็นว่าพื้นที่สีเดียวเป็นพื้นที่สีเดียวสำหรับงานทั้งหมด แต่ละแบบจะมีช่วงเวลาที่สร้างผลลัพธ์ที่ต้องการได้
หากมีพื้นที่ทำงานที่ดีที่สุดเพียงแห่งเดียว ก็คงไม่มีพื้นที่ทำงานใหม่ๆ เปิดตัวมากนัก
แต่ผมบอกได้ว่าพื้นที่ CIE ซึ่งได้แก่ lab, oklab, lch และ oklch คือจุดเริ่มต้นของฉัน ถ้าผลลัพธ์ของพวกเขาไม่ใช่สิ่งที่ผมต้องการ
ผมก็จะทดสอบพื้นที่อื่น สำหรับการผสมสีและสร้างการไล่ระดับสี ฉันยอมรับตัวเลือกข้อกำหนดเริ่มต้นของ oklab สำหรับระบบสีและสี UI โดยรวม ผมชอบ oklch
นี่เป็นบทความบางส่วนที่มีคนแชร์กลยุทธ์สี
ที่อัปเดตใหม่สำหรับพื้นที่สีและฟีเจอร์ใหม่ๆ เหล่านี้ ตัวอย่างเช่น Andrey Sitnik อาจพูดถึง oklch ทั้งหมด คุณอาจโน้มน้าวให้คุณทำแบบเดียวกันนี้
- OKLCH ใน CSS: สาเหตุที่เราย้ายจาก RGB และ HSL โดย Andrey Sitnik
- รูปแบบสี โดย Josh W. โคม่า
- OK, OKLCH โดย Chris Coyier
ขั้นตอนถัดไป
เมื่อคุณคุ้นเคยกับพื้นที่สีและเครื่องมือใหม่ๆ แล้ว คุณเปลี่ยนไปใช้สี HD ได้
ความมีชีวิตชีวา การดัดแปลงและการประมาณค่าที่สอดคล้องกันมากขึ้น และการส่งโดยรวมมอบประสบการณ์ที่มีสีสันมากขึ้นให้แก่ผู้ใช้ของคุณ
อ่านแหล่งข้อมูลสีเพิ่มเติม จากคู่มือ