เกี่ยวกับ Grabient

1 · คีย์เฟรม

คีย์เฟรมคือสีที่คุณเลือก เช่นเดียวกับในงานแอนิเมชัน คุณตั้งไว้ไม่กี่อัน แล้วสีระหว่างคีย์เฟรมจะถูกเติมให้ พาเลตต์หนึ่งมีคีย์เฟรม 2 ถึง 8 อัน วางห่างเท่า ๆ กันตามแนวไล่เฉดสี และไล่เฉดสีผ่านคีย์เฟรมทุกอัน:

คีย์เฟรมแต่ละอันคือตัวเลขสามตัวใน OKLCH ความสว่าง L มีค่าตั้งแต่ 0 (ดำ) ถึง 1 (ขาว) โครมา C คือความสดของสี: 0 คือสีเทา และสีที่สดที่สุดบนหน้าจออยู่ที่ประมาณ 0.3 เฉดสี H คือมุมบนวงล้อสี มีหน่วยเป็นองศา

2 · สูตรคำนวณ

ความสว่าง โครมา และเฉดสีต่างมีเส้นโค้งของตัวเอง ซึ่งวาดไว้ในกราฟด้านบน เส้นโค้งแต่ละเส้นผ่านคีย์เฟรมและโค้งอย่างนุ่มนวลระหว่างคีย์เฟรม สี ณ จุดใดก็ตามคือค่าที่อ่านได้จากเส้นโค้งทั้งสามที่จุดนั้น

ไล่เฉดสีของ CSS และ Figma เชื่อมจุดสีด้วยเส้นตรง จึงอาจเห็นขอบจาง ๆ ตรงที่การไล่สีเปลี่ยนจังหวะ

ในสูตร t มีค่าตั้งแต่ 0 ที่จุดเริ่มต้นของไล่เฉดสีไปจนถึง 1 ที่ปลาย เมื่อมีคีย์เฟรม K อัน คีย์เฟรม i จะอยู่ที่ t = i / (K − 1) โดยนับจาก 0 เส้นโค้งแต่ละเส้นเป็นสไปลน์ Catmull–Rom และ gamut() ปรับสีให้พอดีกับหน้าจอ (หัวข้อที่ 6):

color(t) = gamut( L(t), C(t), H(t) )

// one axis: a Catmull–Rom spline through K evenly spaced valuesconst { min, max, floor } = Math;function spline(v, t) {  const K = v.length, x = min(max(t, 0), 1) * (K - 1);  const i = min(K - 2, floor(x)), u = x - i;  const p0 = v[max(i - 1, 0)], p1 = v[i];  const p2 = v[i + 1], p3 = v[min(i + 2, K - 1)];  return p1 + 0.5 * u * (p2 - p0    + u * (2*p0 - 5*p1 + 4*p2 - p3    + u * (3*(p1 - p2) + p3 - p0)));}// the color at t from the keyframes' L, C and H. A spline can overshoot// between keyframes, so L is kept in 0..1 and C at 0 or more. The// browser fits an oklch() color to the screen (section 6).function color(L, C, H, t) {  const l = min(max(spline(L, t), 0), 1), c = max(spline(C, t), 0);  return `oklch(${l} ${c} ${spline(H, t)})`;}

3 · จำนวนสี

ในการวาดภาพไล่เฉดสี Grabient จะดึงสีจากจุดที่ห่างเท่า ๆ กัน สีแรกและสีสุดท้ายคือคีย์เฟรมแรกและคีย์เฟรมสุดท้าย สไตล์ไล่เฉดสีใช้สีเหล่านี้เป็นจุดสี สไตล์แถบสีแสดงแต่ละสีเป็นแถบสีทึบ จำนวนสีไม่น้อยกว่าจำนวนคีย์เฟรมเสมอ:

4 · ทำไมต้อง OKLCH

RGB และ HSL อธิบายว่าหน้าจอผสมแสงอย่างไร และตัวเลขของทั้งสองมักไม่ตรงกับสิ่งที่เราเห็น สีเหลืองล้วนและสีน้ำเงินล้วนมีความสว่างใน HSL เท่ากันที่ 50% แต่สีเหลืองดูสว่างกว่ามาก OKLCH ให้ค่า 0.97 และ 0.45 ปริภูมินี้คือ OKLab ของ Björn Ottosson ในรูปพิกัดเชิงขั้ว ซึ่งสร้างขึ้นให้การเปลี่ยนตัวเลขที่เท่ากันดูเท่ากัน สองสีที่ผสมด้วยทั้งสองวิธี:

เนื่องจากความสว่าง โครมา และเฉดสีแยกจากกัน การเปลี่ยนเฉดสีของคีย์เฟรมจึงคงความสว่างไว้

5 · เฉดสีที่เกิน 360°

ระหว่างเฉดสีสองค่า ไล่เฉดสีไปได้ทั้งสองทางรอบวงล้อสี และเครื่องมือส่วนใหญ่เลือกทางที่สั้นกว่า Grabient ให้เฉดสีนับเกิน 360° ได้: 690° คือสีเดียวกับ 330° หลังวนไปอีกหนึ่งรอบ ไล่เฉดสีจะไปจนครบทั้งระยะ:

ระยะทางของพาเลตต์คือเฉดสีสุดท้ายลบเฉดสีแรก นับรวมรอบที่วน สายรุ้งเต็มวงจึงมีระยะทาง 360° คีย์เฟรมที่อยู่ติดกันห่างกันได้สูงสุด 540°

6 · สีที่หน้าจอแสดงไม่ได้

OKLCH สามารถระบุสีที่สดเกินกว่าที่หน้าจอจะแสดงได้ สำหรับสีเหล่านั้น Grabient จะคงความสว่างและเฉดสีไว้ แล้วลดโครมาลงจนสีพอดีกับหน้าจอ: sRGB บนหน้าจอทั่วไป และ Display P3 บนหน้าจอที่มีขอบเขตสีกว้าง CSS Color 4 ก็ทำแบบเดียวกันกับสี oklch():

7 · สูตรพาเลตต์

พาเลตต์บางอันกับเส้นโค้งที่สร้างพาเลตต์เหล่านั้น:

“กลับลำดับ” เรียงคีย์เฟรมในลำดับย้อนกลับ ส่วน “กลับสี” สร้างภาพเนกาทีฟ: ความสว่าง L แต่ละค่ากลายเป็น 1 − L และเฉดสีแต่ละค่าหมุนไป 180°

8 · รหัสพาเลตต์

ที่อยู่ของพาเลตต์แต่ละอันมีรหัสพาเลตต์อยู่ด้วย ซึ่งเป็นรหัสสั้น ๆ ของคีย์เฟรม รหัสของรูปแรกคือ kW6iw33i87sY6O2wq7rmZ07I

รหัสพาเลตต์คือ k ตามด้วยคีย์เฟรมที่อัดเป็นบิต: ความสว่าง 8 บิต โครมา 8 บิต เฉดสีแรก 9 บิต จากนั้นเฉดสีถัดไปอันละ 10 บิต โดยเก็บเป็นค่าที่เปลี่ยนไปจากอันก่อนหน้า:

คีย์เฟรมสองอันได้รหัสพาเลตต์ยาว 11 ตัวอักษร และแปดอันได้รหัสยาว 37 ตัวอักษร พาเลตต์แต่ละอันมีรหัสเพียงหนึ่งเดียว

คีย์เฟรมที่ตั้งจากสี hex จะเก็บสีนั้นไว้ตรงตามเดิมใน 24 บิต รหัสพาเลตต์แบบนี้ยาว 9 ถึง 50 ตัวอักษร