เอกสารนี้เป็นส่วนหนึ่งของคู่มือการใช้สี 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)
เส้นไล่ระดับสีด้านบนจะตรงระหว่างสีเขียวกับสีแดง โดยผ่านจุดกึ่งกลางของพื้นที่สี แม้ว่าข้อมูลด้านบนนี้จะช่วยสร้างความเข้าใจได้ แต่ก็ไม่ใช่สิ่งที่เกิดขึ้นเสมอไป นี่คือการไล่ระดับสีใน Codepen ต่อไปนี้ และไม่เห็นได้ชัดว่าอยู่ตรงกลางอย่างในการสาธิตจำลอง
แต่พื้นที่ตรงกลางของการไล่ระดับสีสูญเสียความคมชัด นั่นเป็นเพราะสีที่สดใสที่สุดอยู่ที่ขอบของรูปร่างพื้นที่สี ไม่ใช่จุดศูนย์กลางที่การประมาณค่าใกล้เดินทางไป ซึ่งมักเรียกว่า "โซนเดด" ปัญหานี้มี 2-3 วิธีที่จะแก้ไขหรือแก้ปัญหานี้ได้
การระบุการหยุดไล่ระดับสีเพิ่มเติมเพื่อหลีกเลี่ยงโซนไม่ทำงาน
เทคนิคในการหลีกเลี่ยงโซนที่ไม่ทำงานในวันนี้คือการเพิ่มตัวหยุดสีเพิ่มเติมในการไล่ระดับสีที่จะนำทางการประมาณค่าในช่วงสีให้อยู่ภายในช่วงที่สว่างของพื้นที่สี จริงๆ แล้ววิธีนี้จะช่วยแก้ปัญหาได้ เนื่องจากการหยุดเพิ่มเติม จะช่วยแก้ไขปัญหาที่ขาดหายได้
มีเครื่องมือไล่ระดับสีที่สร้างโดย Erik Kennedy ที่จะคำนวณตัวหยุดสีเพิ่มเติมให้คุณ เพื่อช่วยคุณหลีกเลี่ยงพื้นที่อับสัญญาณแม้ในพื้นที่สีจะมีแนวโน้มทำให้เกิดจุดด่างดำ เมื่อใช้ค่านี้ การส่งผ่านสีเดียวกันจากตัวอย่างแรก แต่เปลี่ยนการประมาณค่าสีเป็น HSL จะส่งผลให้เกิดสิ่งต่อไปนี้
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
ด้วยจุดหยุดที่มีการนำทาง การประมาณค่าจะไม่เป็นเส้นตรงอีกต่อไป แต่จะปรากฏในบริเวณรอบๆ บริเวณที่เสียหาย ซึ่งจะรักษาความอิ่มตัวของสี ซึ่งส่งผลให้มีการไล่ระดับสีที่มีชีวิตชีวามากขึ้น
แม้ว่าเครื่องมือจะทำงานได้อย่างดีเยี่ยม แต่หากคุณมีการควบคุมที่คล้ายคลึงหรือดีขึ้นจาก 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 ได้
ความมีชีวิตชีวา การดัดแปลงและการประมาณค่าที่สอดคล้องกันมากขึ้น และการส่งโดยรวมมอบประสบการณ์ที่มีสีสันมากขึ้นให้แก่ผู้ใช้ของคุณ
อ่านแหล่งข้อมูลสีเพิ่มเติม จากคู่มือ