เข้าถึงสีได้มากขึ้นและพื้นที่ใหม่

เอกสารนี้เป็นส่วนหนึ่งของคู่มือสีของ CSS ความละเอียดสูง

สี CSS 4 จะระบุเส้นขอบใหม่ และเครื่องมือสำหรับ CSS และสี Codepen ต่อไปนี้แสดง และไวยากรณ์สีเก่าไว้ด้วยกัน:

อ่านสรุปพื้นที่สีแบบคลาสสิก

ข้อกำหนดระดับ 4 แนะนำ 12 พื้นที่สีใหม่สำหรับการค้นหาสี เพิ่มขึ้นจาก 7 ขอบเขตสีใหม่ที่แชร์ไปก่อนหน้านี้

• เชิงเส้น sRGB
• LCH
• okLCH
• LAB
• okLAB
• จอแสดงผล p3
• Rec2020
• A98 RGB
• ProPhoto RGB
• XYZ
• XYZ D50
• XYZ D65

พบกับพื้นที่สีใหม่บนเว็บ

พื้นที่สีต่อไปนี้ให้การเข้าถึงขอบเขตที่ใหญ่กว่า 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);
}

LAB

พื้นที่สีอื่นที่สร้างขึ้นเพื่อเข้าถึงขอบเขต CIE อีกครั้งด้วยการรับรู้ ขนาดแสงเชิงเส้น (L) A และ B ใน LAB แสดงแกนที่เป็นเอกลักษณ์ของ การมองเห็นสีของมนุษย์ ได้แก่ สีแดง/เขียว และน้ำเงิน/เหลือง เมื่อ A มีค่าบวก จะเพิ่มสีแดงและเพิ่มสีเขียวเมื่อต่ำกว่า 0 เมื่อ B เป็นจำนวนบวก จะเพิ่มสีเหลือง ส่วนค่าลบจะเป็นสีน้ำเงิน

ข้อดี

• การไล่ระดับสีที่สอดคล้อง
• High Dynamic Range

ข้อเสีย

• ศักยภาพในการปรับโทนสี
• เขียนด้วยมือหรือคาดเดาสีได้ยากเมื่ออ่านค่า

.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);
}

OKLCH

พื้นที่สีนี้มีการแก้ไขเป็น LCH. และเช่นเดียวกับ LCH (L) ก็คือ C สำหรับความเข้มสี และ H สำหรับโทนสี

พื้นที่ทำงานนี้ให้ความรู้สึกคุ้นเคยหากคุณเคยทำงานกับ HSL หรือ LCH เลือกมุมบนวงล้อสีสำหรับโหมด H เลือกค่าความสว่าง หรือ ปริมาณความมืดด้วยการปรับ L แต่เรามีโครมาไม่ใช่ความอิ่มตัว เหมือนกันทุกประการ เพียงแต่การปรับความสว่างและความเข้มของสีจะมีแนวโน้ม มาคู่กัน หรือไม่เช่นนั้น การขอให้ใส่สีที่มีความสดชื่น นอกขอบเขตเป้าหมาย

ข้อดี

• ไม่ต้องตกใจเมื่อทำงานด้วยเฉดสีน้ำเงินและม่วง
• ความสว่างเชิงเส้นแบบรับรู้
• ใช้เวอร์ชันที่คุ้นเคย
• High Dynamic Range
• มีตัวเลือกสีที่ทันสมัย โดย 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 โมเดลนี้ยังอ้างว่าเป็นพื้นที่ที่ได้รับการเพิ่มประสิทธิภาพสำหรับคุณภาพการประมวลผลรูปภาพด้วย ซึ่งสำหรับ us ใน 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 รองรับ ตั้งแต่ปี 2015 โดยใช้ iMac นอกจากนี้ Apple ยังรองรับ display-p3 ในหน้าเว็บผ่าน CSS ตั้งแต่ปี 2016 ซึ่งเป็น ก่อนเบราว์เซอร์ชนิดอื่นๆ เป็นปีๆ ถ้ามาจาก 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 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);
}

ProPhoto RGB

พื้นที่กว้างขวางนี้สร้างขึ้นโดย 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

คีย์เวิร์ด: จุดสีขาวเป็นแอตทริบิวต์ของพื้นที่สี มี True White อยู่ในพื้นที่ทำงาน สำหรับหน้าจออิเล็กทรอนิกส์ 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%));
}

แต่โชคดีสำหรับคุณ สี 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 ต่อไปนี้ และไม่ใช่สีขาวที่ตรงกลางอย่างชัดเจน ในการสาธิต

แต่พื้นที่ตรงกลางของการไล่ระดับสีจะไม่มีความสดใส นั่นเป็นเพราะ สีที่สดใสที่สุดจะอยู่ที่ขอบของรูปร่างพื้นที่สี ไม่ใช่ในส่วน จุดศูนย์กลางที่การประมาณค่าได้เดินทางใกล้ ซึ่งมักเรียกว่า "dead Zone" มี เป็น 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 สีจากตัวอย่างก่อนหน้านี้ ซึ่งจะแสดงวิธีการทำงานของการเพิ่มและลดลง

ตัวแปลงรหัสด้านบนใช้ 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 สี และดูผลของตัวเลือกการประมาณค่าสีได้ในรูปแบบ ตลอดจนวิธีที่พื้นที่สีเปลี่ยนผลลัพธ์การไล่ระดับสี ผลกระทบอาจเป็นไปได้ different; ลองพิจารณาว่านี่เป็นกลเม็ดเคล็ดลับ 4 ข้อใหม่ๆ ที่เพิ่งส่งเข้ามาในกระเป๋าเครื่องมือสีของคุณ

การไล่ระดับสีในพื้นที่สีต่างๆ

พื้นที่สีแต่ละส่วน โดยพิจารณาจากรูปร่างและการจัดเรียงสีที่ไม่ซ้ำกัน ทำให้เกิดผลลัพธ์ การไล่ระดับสีที่แตกต่างกัน ในตัวอย่างต่อไปนี้ ให้ดูว่าพื้นที่สีแต่ละแบบ แฮนเดิลนั้นต่างกัน โดยเฉพาะในรูปสีฟ้าไปขาว สังเกตจำนวน กลายเป็นสีม่วงตรงกลาง ที่เรียกว่า Hue Shift ระหว่างการประมาณค่า

การไล่ระดับสีบางอย่างในพื้นที่เหล่านี้จะมีสีสันสดใสมากกว่าพื้นที่อื่นๆ หรือเดินทางน้อยกว่า ที่ผ่านโซนอันตราย พื้นที่ทำงานอย่างเช่น 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 เหมาะสำหรับการไล่ระดับสีแบบเส้นตรงที่รับรู้ได้ตลอดเวลา อิ่มตัวแล้ว ฟีเจอร์นี้น่าสนใจไม่น้อย เพราะสามารถลองใช้สีที่ต่างกัน 2-3 สีได้ เพื่อเลือกการไล่ระดับสีที่คุณชอบมากที่สุด

นี่คือ Codepen ที่กำลังทดสอบการไล่ระดับสี และพื้นที่สี การผสมและ เพื่อค้นหาความเป็นไปได้ แม้กระทั่งการเปลี่ยนจากสีดำ เป็นสีขาวจะแตกต่างกันไปในแต่ละพื้นที่สี!

การปรับขอบเขตพื้นที่

มีบางสถานการณ์ที่สีอาจร้องขอสิ่งที่อยู่นอกขอบเขต ลองพิจารณาสีต่อไปนี้

rgb(300 255 255)

จำนวนสูงสุดสำหรับช่องสีในพื้นที่สี rgb คือ 255 แต่ในที่นี้ มีการระบุ 300 เป็นสีแดง สิ่งที่เกิดขึ้น การปรับขอบเขต

ยึดคือการนำข้อมูลเพิ่มเติมออก 300 เปลี่ยนเป็น 255 ไปยังเครื่องมือสี ตอนนี้ ได้บีบสีภายในพื้นที่แล้ว

การเลือกพื้นที่สี

หลังจากได้ศึกษาเกี่ยวกับพื้นที่สีและเอฟเฟกต์ต่างๆ แล้ว หลายคนก็รู้สึก มากเกินไปและอยากรู้ว่า "อันไหน" เพื่อเลือก จากการเรียนและ ไม่เห็นพื้นที่สีเดียวสำหรับงานทั้งหมด ชิ้น จะมีช่วงเวลาที่ให้ผลลัพธ์ที่ต้องการ

หากมีพื้นที่ทำงานที่ดีที่สุด พื้นที่ใหม่ก็จะไม่มีพื้นที่ใหม่มากนัก ที่เราแนะนำ

แต่เราสามารถบอกได้ว่าพื้นที่ทำงาน CIE ซึ่งได้แก่ lab, oklab, lch และ oklch เป็นของฉัน จากจุดเริ่มต้นเท่านั้น ถ้าผลลัพธ์ไม่ตรงกับที่ฉันต้องการ ฉันก็จะไป ทดสอบพื้นที่ทำงานอื่นๆ สำหรับการผสมสีและการสร้างการไล่ระดับสี ฉันเห็นด้วยกับ ตัวเลือกข้อกำหนดเริ่มต้นของ oklab สำหรับระบบสีและสีโดยรวมของ UI ฉันชอบ oklch

มาดูบทความ 2 อย่างที่คนแชร์เรื่องสีที่ปรับใหม่กัน ที่มีพื้นที่สีและฟีเจอร์ใหม่เหล่านี้ เช่น Andrey Sitnik เข้าร่วมทั้งหมดในวันที่ oklch บางทีพวกเขาอาจโน้มน้าวให้คุณทำแบบเดียวกัน:

1. OKLCH ใน CSS: สาเหตุที่เราเปลี่ยนจาก RGB และ HSL โดย อันเดรย์ ซิทนิก
2. รูปแบบสี โดย Josh W. Comeau
3. ตกลง OKLCH โดย คริส คอยเยียร์

ขั้นตอนถัดไป

เมื่อคุณคุ้นเคยกับพื้นที่สีและเครื่องมือใหม่แล้ว คุณจะสามารถ เปลี่ยนเป็นสี HD

ความสดใหม่ การปรับแต่งและการประมาณค่าที่สอดคล้องกัน และให้ มีสีสันมากขึ้นแก่ผู้ใช้

อ่านเพิ่มเติมเกี่ยวกับแหล่งข้อมูลสี จากคำแนะนำ