การสร้างรูปแบบสี

ภาพรวมพื้นฐานของวิธีสร้างรูปแบบสีแบบไดนามิกที่กำหนดค่าได้

Adam Argyle

ในโพสต์นี้ ฉันจะแชร์ความคิดเห็นเกี่ยวกับวิธีจัดการโทนสีที่หลากหลาย ใน CSS ลองใช้การสาธิต

สาธิต

หากต้องการดูวิดีโอ โปรดใช้โพสต์นี้ในเวอร์ชัน YouTube

ภาพรวม

เราจะสร้างระบบสีที่เข้าถึงได้โดยมีคุณสมบัติที่กำหนดเองและ calc() เพื่อ สร้างหน้าเว็บที่สามารถปรับเปลี่ยนตามความต้องการของผู้ใช้ ในขณะเดียวกันก็ยังคง ประสบการณ์ที่น้อยที่สุด เราเริ่มจากสีของแบรนด์พื้นฐาน และสร้างระบบ รูปแบบต่างๆ จากข้อมูลดังกล่าว ได้แก่ สีข้อความ 2 สี สีพื้นผิว 4 สี และเงาที่ตรงกัน

คู่มือนี้เริ่มต้นด้วยการกำหนดสีทั้งหมดสำหรับแต่ละชุดสี ด้านหน้า และพวกเขายังไม่ลองเปลี่ยนหน้าเว็บก่อนถึงตอนท้ายสุด

แบรนด์

บ่อยครั้งที่สีของแบรนด์มีการกำหนดไว้แล้วและส่งเป็น hex หรือ rgb ความท้าทายของ GUI นี้ มีสีฐานของแบรนด์ #0af ก่อนอื่น สำหรับระบบสีนี้ ค่าเลขฐาน 16 จำเป็นต้องแปลงเป็น hsl

* {
  --brand: #0af;
  --brand: hsl(200 100% 50%);
}

หากอยากทำให้แบรนด์สว่างขึ้นหรือปรับสีแบรนด์ให้สว่างขึ้น ให้พูดว่า 20% ต้องแยกแชแนล 3 แชแนลของค่าสี HSL ลงในแชแนลที่กำหนดเอง ในลักษณะนี้

* {
  --brand-hue: 200;
  --brand-saturation: 100%;
  --brand-lightness: 50%;
}

CSS คำนวณคุณสมบัติของสีเหล่านั้นได้ เช่น calc(var(--brand-lightness) - 20%) เพื่อลดค่าความสว่างลง 20% ซึ่งเป็นรากฐานในการสร้าง รูปแบบสีที่ CSS สามารถทำให้ทุกสีอยู่ในตระกูลสีเดียวกันได้ด้วยการปรับ ความอิ่มตัวของ HSL และความสว่าง

ธีมสว่าง

รูปแบบสีแต่ละแบบจะถูกกำกับด้วยรูปแบบที่ตรงกัน ซึ่งในกรณีนี้คือแต่ละสี ต่อท้ายด้วย -light

ตัวอย่างผลลัพธ์สุดท้ายของธีมสว่าง

แบรนด์

เริ่มต้นด้วยสีของแบรนด์ แล้วสร้างขึ้นมาใหม่โดยใส่ --brand-hue ลงไป --brand-saturation และคุณสมบัติที่กำหนดเอง --brand-lightness รายการภายในวงเล็บฟังก์ชัน () hsl โดยไม่มีการคำนวณใดๆ:

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
}

สีข้อความ

ต่อไป องค์ประกอบสำคัญของรูปแบบสีต้องมีสีข้อความ ข้อความในธีมสว่าง จะต้องมืดมาก สังเกตว่าสีต่อไปนี้มีความสว่างต่ำ ได้ต่ำกว่า 50%

* {
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
}

--text1-light เนื่องจากมืดมากที่ระดับความสว่าง 10% จะคงส่วนที่หนา 100% ความอิ่มตัวของสี เพื่อให้สีของแบรนด์ยังคงสามารถส่องทะลุไปเป็นสีกรมท่าสีเข้มได้

--text2-light สีไม่ค่อยเข้มเท่าสีที่ 1 ซึ่งดีพอๆ กัน สีรอง และมีความอิ่มตัวน้อยกว่ามาก

สีพื้นผิว

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

* {
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
}

สร้างสีพื้นผิว 4 สีเนื่องจากสีตกแต่งมีแนวโน้มที่จะต้องการสีมากกว่า ตัวแปร สำหรับช่วงเวลาที่มีการโต้ตอบ เช่น :focus หรือ :hover หรือเพื่อสร้าง ลักษณะของเลเยอร์กระดาษ ในสถานการณ์เช่นนี้ การเปลี่ยนผ่าน --surface2-light เมื่อวางเมาส์เหนือ --surface3-light ดังนั้นการวางเมาส์เหนือจะส่งผลให้เกิด คอนทราสต์เพิ่มขึ้น (ความสว่าง 99% ถึง 92% ทำให้มืดลง)

เงา

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

* {
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
}

--surface-shadow-light ไม่ได้รวมอยู่ในฟังก์ชัน hsl นั่นเป็นเพราะ ระบบจะรวมค่า --shadow-strength เพื่อสร้างความทึบแสงและข้อกำหนดด้าน CSS แต่ละส่วนมาคำนวณ ข้ามไปที่เงาแรด เพื่อดูข้อมูลเพิ่มเติม

สีอ่อนทั้งหมดรวมกัน

ไม่ต้องไล่ล่าหาสีของแสง ทั้งหมดในที่เดียวใน CSS

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
  --surface-shadow-light: var(--brand-hue) 10% calc(var(--brand-lightness) / 5);
  --shadow-strength-light: .02;
}
ภาพหน้าจอของสีไฟทั้งหมดรวมกัน
แซนด์บ็อกซ์บน CodePen

ธีมมืด

แบรนด์ส่วนใหญ่ไม่ได้เริ่มต้นด้วยธีมสีเข้ม แต่เป็นรูปแบบผลิตภัณฑ์หลัก สีอ่อนลง ในทางกลับกัน ผู้ใช้มักจะเลือกธีมมืด บริบทที่แตกต่างกัน เช่น เวลากลางคืน ปัจจัยเหล่านี้ทำให้ผมยังคง สิ่งสำคัญที่ควรคำนึงถึงเมื่อใช้ธีมมืด

  1. โดยปกติผู้ใช้จะอยู่ในโหมดมืด เมื่อใช้ธีมนี้ ดังนั้นให้ทดสอบใน มืด
  2. สีควรจางลงเพื่อไม่ให้หน้าจอสั่นเนื่องจาก มากเกินไป

ตัวอย่างผลลัพธ์สุดท้ายของธีมมืด

แบรนด์

ธีมสว่างใช้ค่าแชแนลสี HSL ของแบรนด์ 3 ค่าโดยไม่มีการปรับเปลี่ยน ธีมมืดจะไม่มี ลดความอิ่มตัวให้เหลือครึ่งหนึ่งและลดความสว่างลง 50%

* {
  --brand-dark: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 2)
    calc(var(--brand-lightness) / 1.5)
  );
}

สีข้อความ

ในธีมมืด สีข้อความควรเป็นสีอ่อน สีต่อไปนี้มีคุณภาพสูง สำหรับความสว่าง แสงก็จะใกล้เคียงกับสีขาว

* {
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
}

สีพื้นผิว

สีพื้นผิวควรเป็นสีเข้มในธีมมืด สีต่อไปนี้มี ความสว่างและความอิ่มตัวต่ำ โดยพื้นผิว 1 จะมืดที่สุดที่ระดับ 10%

* {
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
}

เงา

ในธีมมืด เงาอาจมองเห็นได้ยากมาก ฟังดูสมเหตุสมผลเพราะยากต่อ ปรับส่วนที่ค่อนข้างมืดอยู่แล้วให้มืดลง นี่คือที่ --shadow-strength-dark มีประโยชน์มากเนื่องจากช่วยให้เราปรับ โดยเปลี่ยนตัวแปร 1 ตัว

* {
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}

รวมถึงดูความอิ่มตัวของเงานั้นด้วย คุณสังเกตเห็นสีดังกล่าวไหม เวลาที่ดูอินเทอร์เฟซ ลองนำความอิ่มตัวออกจาก คุณชอบเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์แบบไหน

สีเข้มทั้งหมดพร้อมกัน

* {
  --brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 2) calc(var(--brand-lightness) / 1.5));
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}
ภาพหน้าจอของสีเข้มทั้งหมดพร้อมกัน
แซนด์บ็อกซ์บน CodePen

ธีมสลัว

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

ตัวอย่างของผลลัพธ์สุดท้ายจากธีมสลัว

แบรนด์

* {
  --brand-dim: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 1.25)
    calc(var(--brand-lightness) / 1.25)
  );
}

สีข้อความ

* {
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
}

สีพื้นผิว

* {
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
}

เงา

* {
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: .2;
}

หรี่สีทั้งหมดพร้อมกัน

* {
  --brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: .2;
}
ภาพหน้าจอของสีสลัวทั้งหมดรวมกัน
แซนด์บ็อกซ์บน CodePen

สีที่เข้าถึงได้

โปรดสังเกตค่าความสว่างต่ำสุดในชุดข้อความสีเข้มคือ 65% และ ความสว่างสูงสุดในพื้นผิวที่มืดคือ 25% นั่นคือ 40% ของความสว่าง ที่ขาดไม่ได้ ในธีมสว่าง หายใจได้ 55% ธีมสว่าง รักษาความแตกต่างของความสว่างระหว่างข้อความและสีพื้นผิว ที่ประมาณ 40-50% จะช่วยให้อัตราส่วนคอนทราสต์ของสีอยู่ในระดับสูง ขณะเดียวกันก็ ปุ่มกดเล็กๆ เพื่อปรับในกรณีที่คะแนนไม่ดี

ผมเรียกว่า "Bump bump til ya Pass" ซึ่งเป็นการโต้ตอบของการชน ค่าความสว่างจนกระทั่งเครื่องมือแสดงว่า "ฉันผ่าน"

Shift + ลูกศรลงจะถูกกดเพื่อลดความสว่างและเพิ่มคอนทราสต์จนกว่าจะผ่าน

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

.surface1 {
  background-color: var(--surface1);
  color: var(--text2);
}

.surface2 {
  background-color: var(--surface2);
  color: var(--text2);
}

.surface3 {
  background-color: var(--surface3);
  color: var(--text1);
}

.surface4 {
  background-color: var(--surface4);
  color: var(--text1);
}
ภาพหน้าจอของการจับคู่พื้นผิวสลัวและข้อความ
ภาพหน้าจอของพื้นผิวสลัวและการจับคู่ข้อความกับ VisBug

เงาแรด

ธีมใช้คลาสยูทิลิตีที่เรียกว่า .rad-shadow เงานี้สร้างขึ้น ที่เครื่องมือ Smooth Shadow นี้ ซึ่งผมชอบมาก มาก ฉันจึงนำตัวอย่างข้อมูลที่สร้างขึ้นมาปรับแต่งด้วยสีของฉันเอง สำหรับการคำนวณความทึบแสง เหตุผลที่เป็นเช่นนี้ก็เพื่อทำให้เกิดเงาที่เราสามารถปรับได้ ภายในรูปแบบสีแต่ละแบบ

เงาแต่ละข้างอยู่ติดกัน

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

:root {
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
}

.rad-shadow {
  box-shadow:
    0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),
    0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))
  ;
}

หากฉันต้องการใช้เงามากกว่า 1 ชุดในรูปแบบสี ฉันก็จะใช้เงา ทำมุมของโทเค็นการออกแบบให้คงที่ด้วย เนื่องจากทิศทางแสงควรจะเหมือนกัน ระหว่างเงาทั้งหมดของการออกแบบ

การใช้รูปแบบสี

เมื่อกำหนดสีไว้ล่วงหน้าเสร็จแล้ว ก็ถึงเวลาเปลี่ยนสีเหล่านั้นเป็น คุณสมบัติที่เข้าใจได้โดยไม่จำเป็นต้องเข้าใจภาษาที่พูด ในฐานะ CSS ผู้เขียนในโครงการโทนสีนี้ ซึ่งแทบไม่จำเป็นต้องเข้าถึง ค่าของรูปแบบสีที่เจาะจง ฉันต้องการให้อยู่ภายในธีมได้โดยง่าย

ด้วยเหตุนี้ การใช้รูปแบบสีจึงควรทำผ่าน คุณสมบัติที่กำหนดเองโดยทั่วไป ซึ่งเราจะกำหนดในอีกสักครู่ ด้วยวิธีนี้ ผู้ที่ใช้ตัวแปรการออกแบบ จะไม่ต้องกังวลว่ารูปแบบสีใด โดยใช้สีพื้นผิวและข้อความเท่านั้น แทนที่จะเป็น color: var(--text1-light) ใช้ color: var(--text1) การปรับเปลี่ยนทั้งหมดและการปรับเปลี่ยน ของสีจะมีประสิทธิภาพสูงกว่ามากใน CSS

เจาะลึกรูปแบบการเชื่อมโยงของธีมสว่างในโค้ดบล็อกต่อไปนี้ เชื่อมต่อคุณสมบัติที่กำหนดเองทั่วไปกับสีเฉพาะธีมสว่าง เริ่มเลย การใช้ var(--brand) จะใช้สีแบรนด์สว่าง

ธีมสว่าง (อัตโนมัติ)

:root {
  color-scheme: light;
  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

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

ธีมมืด (อัตโนมัติ)

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --brand: var(--brand-dark);
    --text1: var(--text1-dark);
    --text2: var(--text2-dark);
    --surface1: var(--surface1-dark);
    --surface2: var(--surface2-dark);
    --surface3: var(--surface3-dark);
    --surface4: var(--surface4-dark);
    --surface-shadow: var(--surface-shadow-dark);
    --shadow-strength: var(--shadow-strength-dark);
  }
}

ธีมสว่าง

[color-scheme="light"] {
  color-scheme: light;

  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

ธีมมืด

[color-scheme="dark"] {
  color-scheme: dark;

  --brand: var(--brand-dark);
  --text1: var(--text1-dark);
  --text2: var(--text2-dark);
  --surface1: var(--surface1-dark);
  --surface2: var(--surface2-dark);
  --surface3: var(--surface3-dark);
  --surface4: var(--surface4-dark);
  --surface-shadow: var(--surface-shadow-dark);
  --shadow-strength: var(--shadow-strength-dark);
}

ธีมสลัว

[color-scheme="dim"] {
  color-scheme: dark;

  --brand: var(--brand-dim);
  --text1: var(--text1-dim);
  --text2: var(--text2-dim);
  --surface1: var(--surface1-dim);
  --surface2: var(--surface2-dim);
  --surface3: var(--surface3-dim);
  --surface4: var(--surface4-dim);
  --surface-shadow: var(--surface-shadow-dim);
  --shadow-strength: var(--shadow-strength-dim);
}

ในขณะนี้ ผู้เขียนสามารถใช้คำทั่วไปสำหรับรูปแบบสีที่ให้ไว้เป็น จำเป็น และไม่ต้องกังวลกับธีมอีก

บทสรุป

เมื่อรู้แล้วว่าฉันทำแบบนั้นได้อย่างไร คุณจะทำอย่างไร 🙂

มาเพิ่มความหลากหลายให้กับแนวทางของเราและเรียนรู้วิธีทั้งหมดในการสร้างเนื้อหาบนเว็บกัน สร้าง Codepen หรือโฮสต์การสาธิตของคุณเอง ทวีตฉันด้วย แล้วฉันจะเพิ่มลงใน ส่วนรีมิกซ์ของชุมชนด้านล่าง

แหล่งที่มา

รีมิกซ์ในชุมชน - @chris-kruining ได้เพิ่มแถบเลื่อนโทนสี สีสถานะและโหมดคอนทราสต์สำหรับ no-preference, more และ less: การสาธิต