สร้างสีใหม่ตามช่องและค่าของสีอื่น
ใน Chrome 119 เป็นฟีเจอร์สีที่มีประสิทธิภาพมากจาก CSS Color Level 5 ไวยากรณ์สีแบบสัมพัทธ์ ช่วยสร้างเส้นทางที่ราบรื่นในการจัดการสีภายใน CSS และมอบวิธีต่างๆ สำหรับผู้เขียนและนักออกแบบ
ก่อนไวยากรณ์สีสัมพัทธ์ หากต้องการแก้ไขความทึบแสงของสี คุณต้องทำดังนี้ สร้างคุณสมบัติที่กำหนดเองสำหรับแชแนลของสี ซึ่งโดยทั่วไปจะเป็น HSL และประกอบขึ้น ให้เป็นสีสุดท้ายและสีตัวแปรสุดท้าย ซึ่งหมายถึงการจัดการ ชิ้นส่วนสี ซึ่งอาจทำได้ยากขึ้นอย่างรวดเร็ว
:root {
--brand-hue: 300deg;
--brand-saturation: 75%;
--brand-lightness: 50%;
--brand-hsl:
var(--brand-hue)
var(--brand-saturation)
var(--brand-lightness);
--brand-color: hsl(var(--brand-hsl));
/* all this work just so I can set the opacity to 50% in a variant */
--brand-color-variant: hsl(var(--brand-hsl) / 50%);
}
หลังไวยากรณ์สีสัมพัทธ์ คุณจะสร้างสีแบรนด์พร้อมด้วยพื้นที่สีใดก็ได้ หรือไวยากรณ์ที่คุณต้องการ แล้วสร้างตัวแปรความทึบแสงครึ่งหนึ่งโดยใช้โค้ดน้อยกว่านั้นมาก ตอนนี้ และช่วยให้อ่านจุดประสงค์ของสไตล์และระบบได้ง่ายกว่ามาก
:root {
--brand-color: hsl(300deg 75% 50%);
--brand-color-variant: hsl(from var(--brand-color) h s l / 50%);
}
โพสต์นี้จะช่วยให้คุณเรียนรู้ไวยากรณ์และสาธิตการแต่งสีทั่วไปได้
หากต้องการดูวิดีโอ เราจะอธิบายบทความเกือบทั้งหมดต่อไปนี้ในภารกิจ GUI นี้
ภาพรวมไวยากรณ์
เป้าหมายของไวยากรณ์สีสัมพัทธ์คือการให้สีที่สืบทอดมาจากอีกสีหนึ่ง
สี สีฐานเรียกว่าสีเริ่มต้น ซึ่งเป็นสีที่
อยู่หลังคีย์เวิร์ด from ใหม่ เบราว์เซอร์จะ
แปลง และแยกสีที่เป็นต้นฉบับนี้ออกจากกันและยื่นข้อเสนอ
เป็นส่วนๆ เป็นตัวแปรเพื่อใช้ในการกำหนดสีใหม่
แผนภาพก่อนหน้าแสดงสีเริ่มต้น green ซึ่งกำลังแปลงเป็น
พื้นที่สีของสีใหม่
เปลี่ยนเป็นหมายเลขเดี่ยวที่แสดงเป็น r, g, b และ alpha
ซึ่งจะใช้เป็นค่าสี rgb() ใหม่โดยตรงต่อไป
แม้ว่ารูปภาพนี้แสดงรายละเอียด กระบวนการ และตัวแปร แต่ไม่ใช่ เปลี่ยนสี ตัวแปรจะกลายเป็นสีเดิมโดยไม่มีการเปลี่ยนแปลง ดังนั้น ทำให้ยังคงเป็นสีเขียว
คีย์เวิร์ด from
ส่วนแรกของไวยากรณ์ที่จะเรียนรู้คือส่วนที่ from <color> เป็นส่วนที่เพิ่ม
โดยระบุสี ค่าที่ป้อนจะเป็นไปอย่างถูกต้องก่อนที่คุณจะระบุค่า นี่คือรหัส
ตัวอย่างที่เพิ่มทั้งหมดคือ from green โดยอยู่ก่อนค่า
มีการระบุสำหรับ rgb() แล้ว
.syntax-introduction_same-colors {
color: green;
color: rgb(0 128 0);
color: rgb(from green r g b); /* result = rgb(0 128 0) */
}
คีย์เวิร์ด from คำนั้น เมื่อเห็นเป็นพารามิเตอร์แรกในสัญลักษณ์การทำงาน
เปลี่ยนคำจำกัดความของสีเป็นสีสัมพัทธ์ หลังคีย์เวิร์ด from, CSS
ต้องการสี เป็นสีที่จะสร้างแรงบันดาลใจในสีถัดไป
การแปลงสี
พูดง่ายๆ คือจะเปลี่ยนจากสีเขียวเป็น r g และ b เพื่อใช้ในแชแนลใหม่ สี
rgb(from green r g b) /* r=0 g=128 b=0 */
rgb(from rgb(0 128 0) r g b); /* r=0 g=128 b=0 */
สีจากคุณสมบัติที่กำหนดเอง
การอ่าน rgb from green ชัดเจนและเข้าใจง่าย เพราะเหตุนี้
คุณสมบัติที่กำหนดเองและไวยากรณ์สีสัมพัทธ์
ทำให้เป็นการจับคู่ที่ยอดเยี่ยมได้
สามารถนำความลึกลับออกจากสี from ได้ นอกจากนี้ โดยทั่วไปคุณก็ไม่ต้อง
ทราบรูปแบบสีของสีคุณสมบัติที่กำหนดเองในขณะที่คุณกำลังสร้าง
สีในรูปแบบที่คุณต้องการ
rgb(from rgb(255 105 180) r g b) /* ????? */
rgb(from var(--hotpink) r g b) /* clear */
ทำงานในพื้นที่สีที่คุณต้องการ
คุณสามารถเลือกพื้นที่สีซึ่งมีรูปแบบสีตามฟังก์ชันการทำงานที่คุณต้องการ
rgb(from hsl(120 100% 25%) r g b) /* r=0 g=128 b=0 */
hsl(from hsl(120 100% 25%) h s l) /* h=120 s=100% l=25% */
hwb(from hsl(120 100% 25%) h w b) /* h=120 w=0% b=50% */
lch(from hsl(120 100% 25%) l c h) /* l=46 c=68 h=134 */
ไวยากรณ์สีสัมพัทธ์มีขั้นตอน Conversion ดังกล่าว สีที่อยู่หลัง from คือ
แปลงเป็นพื้นที่สีตามที่ระบุไว้ที่ตอนต้นของส่วนสี
สี อินพุตและเอาต์พุตไม่จำเป็นต้องตรงกัน ซึ่งเป็นการใช้งานที่มีประโยชน์มาก
การเลือกพื้นที่สีก็สำคัญเช่นกัน เพราะการเลือกสี มีแนวโน้มที่จะให้ความสำคัญกับประเภทของการสลับสีมากกว่า การตั้งค่าเริ่มต้น ค่ากำหนดจะอยู่ในผลการค้นหา ไม่ใช่รูปแบบสีหรือช่อง ประเภทต่างๆ สิ่งนี้จะชัดเจนขึ้นมากในส่วนที่แสดงกรณีการใช้งาน พื้นที่สีต่างๆ ทำงานแตกต่างกันได้อย่างดีเยี่ยม
ผสมผสาน จับคู่ ละเว้น และทำซ้ำตัวแปร
เป็นบางอย่างที่แปลกแต่น่าตื่นเต้นเกี่ยวกับไวยากรณ์นี้ ตัวแปรไม่จำเป็นต้องเป็น เรียงลำดับใหม่ และนำมาใช้ซ้ำได้
rgb(from green g g g) /* rgb(128 128 128) */
rgb(from green b r g) /* rgb(0 0 128) */
rgb(from green 0 0 g) /* rgb(0 0 128) */
ความทึบแสงเป็นตัวแปร
ไวยากรณ์ยังจะให้ความทึบแสงเป็นตัวแปรที่ชื่อ alpha ด้วย โดยจะไม่บังคับ
แล้วอยู่หลัง / ในรูปแบบสีที่ใช้ได้
rgb(from #00800080 r g b / alpha) /* alpha=50% */
rgb(from rgba(0,128,0,.5) r g b / alpha) /* alpha=50% */
rgb(from rgb(0 128 0 / 50%) r g b / alpha) /* alpha=50% */
ใช้ calc() หรือฟังก์ชัน CSS อื่นๆ กับตัวแปร
ที่ผ่านมาเราได้สร้างสีเขียวซ้ำแล้วซ้ำอีก การเรียนรู้เกี่ยวกับ การทำความคุ้นเคยกับขั้นตอนการแปลงและทำลายโครงสร้าง ตอนนี้คือ ในการแก้ไขตัวแปร เปลี่ยนเอาต์พุตให้ไม่เหมือนกับ อินพุต
green /* h=120 s=100% l=25% */
hsl(from green calc(h * 2) s l) /* h=240 s=100% l=25% */
ตอนนี้มีกรมการขนส่งทางบกแล้ว! เพิ่มโทนสีเป็น 2 เท่าโดยใช้เฉดสี 120 แล้วเปลี่ยนเป็น
240 กำลังเปลี่ยนสีทั้งหมด การดำเนินการนี้จะหมุนโทนสีตามสี
วงล้อ ลูกเล่นเจ๋งๆ ที่ทำได้ง่ายๆ ด้วยพื้นที่สีทรงกระบอก
เช่น HSL
HWB
LCH และ
OKLCH
หากต้องการดูค่าแชแนลด้วยภาพ เพื่อให้ได้ตัวเลขที่ถูกต้องโดยไม่ต้องคาดเดาหรือจำข้อมูลจำเพาะ ให้ลองใช้เครื่องมือค่าแชแนลไวยากรณ์สีแบบสัมพัทธ์นี้ รายงานจะแสดงค่าแชแนลแต่ละค่าตามไวยากรณ์ที่คุณระบุ ทำให้คุณรู้ได้เลยว่าคุณค่าใดบ้างที่สามารถเล่นได้
ตรวจหาการรองรับเบราว์เซอร์
@supports (color: rgb(from white r g b)) {
/* safe to use relative color syntax */
}
กรณีการใช้งานและการสาธิต
ตัวอย่างและกรณีการใช้งานต่อไปนี้มีไวยากรณ์ทางเลือกหลายประการที่ต้องการบรรลุผล ผลลัพธ์ที่คล้ายกันหรือเหมือนกัน รูปแบบต่างๆ ที่มาจากพื้นที่สีและ แชแนลที่นำเสนอ
นอกจากนี้ หลายๆ ตัวอย่างจะแสดงการปรับสีโดยใช้คําพูดของ by และ
to สีที่เปลี่ยนไป by คือการเปลี่ยนสีแบบสัมพัทธ์ การเปลี่ยนแปลงที่ใช้
ของตัวแปรและทำการปรับเปลี่ยนโดยอิงตามค่าปัจจุบัน ต
สีที่เปลี่ยนไป to คือการเปลี่ยนสีแบบสัมบูรณ์ การเปลี่ยนแปลงที่ไม่ได้ใช้
ของตัวแปรและระบุค่าใหม่ทั้งหมดแทน
ดูเดโมทั้งหมดได้ในคอลเล็กชัน Codepen นี้
ทำให้สีสว่างขึ้น
OKLCH, OKLAB XYZ หรือ พื้นที่สี sRGB ให้พื้นที่สีมากที่สุด ผลลัพธ์ที่คาดการณ์ได้เมื่อปรับสีให้สว่างขึ้น
ทำให้เบาลง
ตัวอย่างต่อไปนี้ .lighten-by-25 จะใช้สี blue และแปลงเป็น
OKLCH แล้วทำให้สีน้ำเงินสว่างขึ้นด้วยการเพิ่มช่อง l (ความสว่าง) โดยการคูณ
ค่าปัจจุบันตาม 1.25 ซึ่งจะเป็นการดันค่าความสว่างของสีน้ำเงินไปที่สีขาวขึ้น 25%
.lighten-by-25 {
background: oklch(from blue calc(l * 1.25) c h);
}
ทำให้เป็นค่าที่เจาะจงน้อยลง
ตัวอย่างต่อไปนี้ .lighten-to-75 ไม่ได้ใช้แชแนล l เพื่อ
ทำให้ blue จางลง ค่านั้นจะแทนที่ค่าด้วย 75% โดยสมบูรณ์
.lighten-to-75 {
background: oklch(from blue 75% c h);
}
ปรับสีให้เข้มขึ้น
พื้นที่สีเดียวกันมีประสิทธิภาพในการปรับสีให้สว่างขึ้น มีประโยชน์สำหรับ สีที่เข้มขึ้น
ทำให้เข้มขึ้นได้ในระดับหนึ่ง
ตัวอย่างต่อไปนี้ .darken-by-25 จะใช้สีน้ำเงินและแปลงเป็น
OKLCH จากนั้นทำให้สีน้ำเงินเข้มขึ้นโดยลดช่อง l (ความสว่าง) ลง 25%
คูณค่าด้วย .75 ค่านี้จะดันสีน้ำเงินเข้าสู่สีดำขึ้น 25%
.darken-by-25 {
background: oklch(from blue calc(l * .75) c h);
}
ปรับให้มืดเป็นค่าที่ระบุ
ตัวอย่างต่อไปนี้ .darken-to-25 ไม่ได้ใช้ช่อง l เพื่อปรับให้มืดลง
blue จะแทนที่ค่าด้วย 25% โดยสมบูรณ์
.darken-to-25 {
background: oklch(from blue 25% c h);
}
เร่งสี
อิ่มตัวตามปริมาณ
ตัวอย่างต่อไปนี้ .saturate-by-50 ใช้ s จาก hsl() เพื่อเพิ่ม
ความสดใสของ orchid ตาม50% สัมพัทธ์
.saturate-by-50 {
background: hsl(from orchid h calc(s * 1.5) l);
}
อิ่มตัวจนถึงปริมาณที่ระบุ
ตัวอย่างต่อไปนี้ .saturate-to-100 ไม่ได้ใช้แชแนล s จาก
hsl()จะระบุค่าความอิ่มตัวที่ต้องการแทน ในตัวอย่างนี้
ความอิ่มตัวเพิ่มขึ้นเป็น 100%
.saturate-to-100 {
background: hsl(from orchid h 100% l);
}
ทำให้สีจาง
ทำให้สีจางลง
ตัวอย่างต่อไปนี้ .desaturate-by-half ใช้ s จาก hsl() เพื่อลด
ความอิ่มตัวของ indigo ลงครึ่งหนึ่ง
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
ลดสีเป็นค่าที่เฉพาะเจาะจง
แทนที่จะทำให้สีจางลงตามจำนวนเงิน คุณสามารถทำให้สีจางลงตามความต้องการเฉพาะได้
ตัวอย่างต่อไปนี้ .desaturate-to-25 จะสร้างสีใหม่ตาม
indigo แต่ตั้งความอิ่มตัวเป็น 25%
.desaturate-to-25 {
background: hsl(from indigo h 25% l);
}
เพิ่มความเข้มให้สี
เอฟเฟกต์นี้คล้ายกับความอิ่มตัวของสี แต่มีความแตกต่างกันใน
ได้ ประการแรก นี่เป็นการเปลี่ยนแปลง chroma ไม่ใช่การเปลี่ยนแปลงของ saturation และนี่คือ
เพราะพื้นที่สีที่สามารถปรับเพิ่มเป็นช่วงไดนามิกกว้างไม่ได้
สีอิ่มตัว พื้นที่สีที่มี chroma เป็นช่วงไดนามิกกว้าง
ช่วยให้ผู้เขียนสามารถเพิ่มความสดใสของสีได้มากกว่าความอิ่มตัว
ทำได้แม้กระทั่งทำได้ด้วย
.increase-chroma {
background: oklch(from orange l calc(c + .1) h);
}
ปรับความทึบแสงของสี
การทำสีกึ่งโปร่งใสเป็นหนึ่งในสีที่ใช้กันมากที่สุด ที่เราทำในระบบการออกแบบ ดูตัวอย่างในบทนำของ หากคุณพลาดไป ก็สรุปปัญหาที่เกิดขึ้นได้เป็นอย่างดี
ปรับความทึบแสงตามปริมาณ
.decrease-opacity-by-25 {
background: rgb(from lime r g b / calc(alpha / 2));
}
ปรับความทึบแสงเป็นค่าที่ต้องการ
.decrease-opacity-to-25 {
background: rgb(from lime r g b / 25%);
}
สลับสี
การกลับสีเป็นฟังก์ชันการปรับสีทั่วไปที่พบในไลบรารีสี วิธีหนึ่งที่ทำได้คือการแปลงสีเป็น RGB แล้วลบแต่ละสี ค่าของช่องจาก 1
.invert-each-rgb-channel {
background: rgb(from yellow calc(255 - r) calc(255 - g) calc(255 - b));
}
เสริมสี
ถ้าเป้าหมายของคุณไม่ใช่การสลับสี แต่เป็นการเติมสี ให้โทนสี
การหมุนก็เหมือนหน้าจอที่คุณกำลังหา เลือกพื้นที่สีที่ให้
ปรับสีเป็นมุม จากนั้นใช้ calc() เพื่อหมุนโทนสีตามปริมาณที่คุณต้องการ
ในกรณีนี้ การหาส่วนเติมเต็มของสีสามารถทำได้โดยการหมุนทีละครึ่งทาง
คุณสามารถเพิ่มหรือลบออกจากแชแนล h ได้ภายในวันที่ 180 เพื่อให้ได้ผลลัพธ์
.complementary-color {
background: hsl(from blue calc(h + 180) s l);
}
ตัดกันสี
พิจารณา L* เพื่อให้ได้อัตราส่วนคอนทราสต์ของสีที่เข้าถึงได้ (Lstar)
โหมดนี้จะใช้ช่องของความสว่าง (ประมาณ) ที่เป็นแบบเดียวกัน (L) จาก
LCH และ OKLCH ใน calc() ขึ้นอยู่กับว่าคุณกำหนดเป้าหมายต่ำ ปานกลาง หรือสูง
คอนทราสต์ เดลต้าอยู่ที่ประมาณ ~40, ~50 หรือ ~60
เทคนิคนี้ใช้ได้ผลดีกับทุกสีใน LCH หรือ OKLCH
ปรับคอนทราสต์ของสีที่เข้มขึ้น
คลาส .well-contrasting-darker-color แสดง L* ที่มีเดลต้าเป็น 60
เนื่องจากสีเริ่มต้นเป็นสีมืด (ค่าความสว่างต่ำ) จึงเพิ่ม 60% (.6)
เป็นช่องทางความสว่าง เราใช้เทคนิคนี้เพื่อค้นหา
สีที่ตัดกันอย่างชัดเจน
ข้อความสีเข้มสีเดียวกันบนพื้นหลังสีอ่อน
.well-contrasting-darker-color {
background: darkred;
color: oklch(from darkred calc(l + .60) c h);
}
ตัดกันสีอ่อน
คลาส .well-contrasting-lighter-color แสดง L* ที่มีเดลต้า 60%
ด้วย เนื่องจากสีเริ่มต้นเป็นสีอ่อน (ค่าความสว่างสูง) จึงมีค่า 0.60
ที่หักออกจากช่องความสว่าง
.well-contrasting-lighter-color {
background: lightpink;
color: oklch(from lightpink calc(l - .60) c h);
}
ชุดสี
ไวยากรณ์สีแบบสัมพัทธ์นั้นดีมากในการสร้างชุดสี โดยเฉพาะอย่างยิ่ง มีประโยชน์และมีประสิทธิภาพ เพราะมีพื้นที่สีจำนวนมาก ดังต่อไปนี้ ตัวอย่างที่ยกมาทั้งหมดใช้ OKLCH เพราะช่องทางความสว่างเชื่อถือได้และโทนสี ช่องสามารถหมุนได้โดยไม่มีผลข้างเคียง ตัวอย่างสุดท้ายแสดงให้เห็นถึง โดยใช้การปรับความสว่างและการหมุนโทนสีเพื่อเพิ่มความน่าสนใจ ผลลัพธ์!
เปิดซอร์สโค้ดตัวอย่างของรายการเหล่านี้ แล้วลองเปลี่ยน --base-color เป็น
คุณจะได้เห็นว่าจานสีเหล่านี้มีไดนามิกมากน้อยเพียงใด สนุกจัง
หากคุณชื่นชอบวิดีโอ ฉันก็ให้ข้อมูลเชิงลึกเกี่ยวกับการสร้างชุดสีใน CSS ด้วย OKLCH บน YouTube
จานสีเดียว
การสร้างจานสีแบบโมโนโครมคือการสร้างจานสีทั้งหมดจากโทนสีเดียวกันแต่ ด้วยสีที่แตกต่างกันไประหว่างความมืดกับความมืด สีตรงกลางคือสีต้นฉบับ สำหรับชุดสี ซึ่งจะใช้สีอ่อน 2 สีและเข้มกว่า 2 ตัว
:root {
--base-color: deeppink;
--color-0: oklch(from var(--base-color) calc(l + .20) c h); /* lightest */
--color-1: oklch(from var(--base-color) calc(l + .10) c h);
--color-2: var(--base-color);
--color-3: oklch(from var(--base-color) calc(l - .10) c h);
--color-4: oklch(from var(--base-color) calc(l - .20) c h); /* darkest */
}
ลองใช้ชุดพาเล็ตจำนวนมากซึ่งสร้างด้วยไวยากรณ์สีแบบสัมพัทธ์และ OKLCH
Open Props คือไลบรารีของตัวแปร CSS ฟรีและข้อเสนอพิเศษ ที่สร้างโดยใช้กลยุทธ์นี้ และทำให้ใช้งานง่ายด้วย นำเข้า ทั้งหมดนี้สร้างขึ้นจากสีที่คุณสามารถปรับแต่งได้ เพราะนี่คือสี แล้วก็ดึงจานสีออกมา
จานสีที่คล้ายกัน
เนื่องจากการหมุนโทนสีง่ายมากเมื่อใช้ OKLCH และ HSL การสร้าง ชุดสีที่คล้ายกัน หมุนโทนสีตามจำนวนที่คุณชอบผลลัพธ์และเปลี่ยนสีฐาน และดูจานสีใหม่ๆ ที่เบราว์เซอร์สร้างขึ้น
:root {
--base-color: blue;
--primary: var(--base-color);
--secondary: oklch(from var(--base-color) l c calc(h - 45));
--tertiary: oklch(from var(--base-color) l c calc(h + 45));
}
ชุดสี Triadic
คล้ายกับสีคู่ตรงข้าม ชุดสีสามมิติ
อยู่ตรงข้ามกันแต่เป็นการหมุนสีที่เข้ากันอย่างลงตัวเมื่อใช้สีฐาน โดยที่
สีคู่ตรงข้ามจะอยู่ตรงข้ามกับสี เช่น เส้นตรง
ที่ลากผ่านตรงกลางของวงล้อสี ชุดสี 3 ชุดเปรียบเสมือน
สามเหลี่ยมของเส้น หา 2 สีที่หมุนจากสีฐานให้เท่ากัน
บรรลุเป้าหมายนี้ได้โดยหมุนโทนสี 120deg
นี่เป็นการลดความซับซ้อนของทฤษฎีสี แต่ก็พอใช้ได้ ถ้าคุณสนใจ
:root {
--base-color: yellow;
--triad-1: oklch(from var(--base-color) l c calc(h - 120));
--triad-2: oklch(from var(--base-color) l c calc(h + 120));
}
จานสี Tetradic
จานสี Tetradic คือชุดสี 4 สีที่แบ่งออกเท่าๆ กันรอบวงล้อสี ซึ่งทำให้ จานสีที่ไม่มีค่าที่โดดเด่นอย่างชัดเจน คุณคิดดูได้เช่นกัน เช่น คู่สีคู่ตรงข้าม หากใช้อย่างชาญฉลาด สิ่งนี้จะให้ประโยชน์อย่างมาก
นี่เป็นการลดความซับซ้อนของทฤษฎีสี แต่ก็พอใช้ได้ หากคุณสนใจ ก็เริ่มต้นศึกษาชุดสี Tetradic ที่ซับซ้อนยิ่งขึ้นได้เลย
:root {
--base-color: lime;
--color-1: var(--base-color);
--color-2: oklch(from var(--base-color) l c calc(h + 90));
--color-3: oklch(from var(--base-color) l c calc(h + 180));
--color-4: oklch(from var(--base-color) l c calc(h + 270));
}
สีเดียวที่มีการหมุนโทนสีเล็กน้อย
ผู้เชี่ยวชาญด้านสีหลายคนทำตามเคล็ดลับนี้กันอยู่ ปัญหาก็คือ โทนสีเดียวอาจน่าเบื่อ วิธีแก้ไขคือให้เพิ่ม การหมุนสีเล็กน้อยหรือหลักเป็นสีใหม่แต่ละสีเมื่อความสว่างเปลี่ยนไป
ตัวอย่างต่อไปนี้จะลดความสว่างลง 10% ในแต่ละตัวอย่างแผ่น และหมุน ปรับโทนสีได้ 10 องศา ผลลัพธ์ที่ได้คือจานสี hotpink เป็นสีครามที่ดูเหมือน ผสมผสานอย่างลงตัว เหมือนการไล่ระดับสี
:root {
--base-color: deeppink;
--color-1: var(--base-color);
--color-2: oklch(from var(--base-color) calc(l - .10) c calc(h - 10));
--color-3: oklch(from var(--base-color) calc(l - .20) c calc(h - 20));
--color-4: oklch(from var(--base-color) calc(l - .30) c calc(h - 30));
--color-5: oklch(from var(--base-color) calc(l - .40) c calc(h - 40));
}
ลองใช้ลีดเดอร์บอร์ดนี้ที่สร้างด้วย OKLCH และการหมุนโทนสี
อินเทอร์เฟซลีดเดอร์บอร์ดต่อไปนี้ใช้กลยุทธ์การหมุนเวียนโทนสีนี้ แต่ละรายการ
รายการจะติดตามดัชนีในเอกสารเป็นตัวแปรที่ชื่อ --i ดัชนีนี้
จากนั้นจึงใช้เพื่อปรับความโครมา ความสว่าง และโทนสี ปรับเพียง 5% หรือ
5deg ลงไปลึกกว่าตัวอย่างข้างต้นเมื่อใช้ Deeppink จึงต้องใช้
แววตาชัดๆ ว่า
ทำไมลีดเดอร์บอร์ดนี้อาจอยู่ในเฉดสีแบบนี้
ความสง่างาม
ตรวจสอบว่าได้เปลี่ยนโทนสีในแถบเลื่อนใต้ลีดเดอร์บอร์ด และดูว่า ไวยากรณ์สีสัมพัทธ์ ทำให้เกิดช่วงเวลาของสีที่สวยงาม
li {
--_bg: oklch(
/* decrease lightness as list grows */
calc(75% - (var(--i) * 5%))
/* decrease chroma as list grows */
calc(.2 - (var(--i) * .01))
/* lightly rotate the hue as the list grows */
calc(var(--hue) - (var(--i) + 5))
);
}