เครื่องมือสร้างพาเลตสี - สร้างชุดสีที่กลมกลืน

เครื่องมือสร้างชุดสีคืออะไร?

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

เครื่องมือสร้างชุดสีอย่างไร

เครื่องมือแปลงสีหลักจากรหัสเลขฐานสิบหก (เช่น #3B82F6) เป็นแบบจำลองสี HSL โดย HSL อธิบายสีด้วยตัวเลข 3 ค่า:

• เฉดสี: ตำแหน่งของสีบนวงล้อสีขนาด 360 องศา (0° คือสีแดง, 120° คือสีเขียว, 240° คือสีน้ำเงิน)
• ความอิ่มตัว: ระดับความเข้มของสี ตั้งแต่ 0% (สีเทา) ถึง 100% (สีบริสุทธิ์)
• ความสว่าง: ระดับความใกล้เคียงของสีกับสีดำหรือสีขาว ตั้งแต่ 0% (สีดำ) ถึง 100% (สีขาว)

ประเภทความกลมกลืนแต่ละแบบจะปรับเฉดสี ความสว่าง หรือทั้งสองค่า จากนั้นแปลงผลลัพธ์กลับเป็นรหัสเลขฐานสิบหก

วิธีคำนวณสีคู่ตรงข้าม

สูตร:

$h' = (h + 180) \bmod 360$

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

ความอิ่มตัวและความสว่างคงเดิม

ตัวอย่างการคำนวณ: สีน้ำเงินบริสุทธิ์ #0000FF มีเฉดสี 240° ความอิ่มตัว 100% และความสว่าง 50% เมื่อบวก 180° จะได้เฉดสี 60° เมื่อนำเฉดสี 60° กลับไปแปลงเป็นเลขฐานสิบหก โดยใช้ความอิ่มตัวและความสว่างเท่าเดิม จะได้ #FFFF00 ซึ่งเป็นสีเหลือง ดังนั้นเครื่องมือนี้จึงจับคู่สีน้ำเงินกับสีเหลือง ไม่ใช่สีส้ม

เรื่องนี้อาจทำให้สับสน เพราะชั้นเรียนศิลปะมักสอนวงล้อสีอีกแบบหนึ่ง คือวงล้อสีของรงควัตถุ RYB (แดง-เหลือง-น้ำเงิน) ซึ่งสีตรงข้ามกับสีน้ำเงินคือสีส้ม เครื่องมือนี้ใช้วงล้อ HSL ที่อิงระบบ RGB ซึ่งเป็นระบบที่หน้าจอใช้ ดังนั้นคู่สีตรงข้ามจึงแตกต่างจากวงล้อสำหรับการผสมสี

วิธีคำนวณสีข้างเคียง

สีข้างเคียงอยู่ใกล้สีหลักบนวงล้อสี เครื่องมือสร้างเฉดสี 2 ค่าโดยห่างจากเฉดสีหลัก 30° และอีก 2 ค่าโดยห่าง 60° โดยทั้งหมดมีความอิ่มตัวและความสว่างเท่ากัน

$h \pm 30^{\circ}, \qquad h \pm 60^{\circ}$

โดยที่ h คือค่าสีของสีหลัก

ตัวอย่างการคำนวณ: สีน้ำเงิน #0000FF (เฉดสี 240°) ให้เฉดสี 270° (#8000FF), เฉดสี 210° (#0080FF), เฉดสี 300° (#FF00FF) และเฉดสี 180° (#00FFFF) เมื่อรวมกับสีหลักแล้ว ชุดสีนี้มีทั้งหมด 5 สี

วิธีคำนวณสีสามเส้า

สีสามเส้ามีระยะห่างกัน 120° บนวงล้อสี ทำให้เกิดกลุ่มสีสามสีที่เว้นระยะเท่า ๆ กัน โดยมีสีหลักเป็นหนึ่งในนั้น

$h + 120^{\circ}, \qquad h + 240^{\circ}$

ตัวอย่างการคำนวณ: สีแดง #FF0000 (เฉดสี 0°) ให้เฉดสี 120° (#00FF00 สีเขียว) และเฉดสี 240° (#0000FF สีน้ำเงิน) ชุดสี 3 สีจึงประกอบด้วยสีแดง สีเขียว และสีน้ำเงิน ซึ่งเป็นเฉดสีหลัก 3 สีเดียวกับที่ใช้ในหน้าจอดิจิทัล

วิธีคำนวณสีเอกรงค์

สีเอกรงค์คงเฉดสีและความอิ่มตัวเดิมไว้ และเปลี่ยนเฉพาะความสว่าง เครื่องมือจะปรับความสว่างขึ้นและลงด้านละ 15 และ 30 จุดเปอร์เซ็นต์ โดยจำกัดค่าให้อยู่ระหว่าง 5% ถึง 95%

$l \pm 15, \qquad l \pm 30$

โดยที่ l คือค่าความสว่างของสีหลักในหน่วยจุดเปอร์เซ็นต์

ตัวอย่างการคำนวณ: สีน้ำเงิน #0000FF (ความสว่าง 50%) ให้ความสว่าง 65% (#4D4DFF), ความสว่าง 35% (#0000B3), ความสว่าง 80% (#9999FF) และความสว่าง 20% (#000066)

เนื่องจากมีการจำกัดค่าที่ 5% และ 95% สีหลักที่สว่างหรือมืดมากอยู่แล้วอาจชนค่าจำกัดเดียวกันถึง 2 ครั้ง สีดำ #000000 ให้ความสว่าง 15% (#262626), 5% (#0D0D0D), 30% (#4D4D4D) และ 5% อีกครั้ง (#0D0D0D) จึงมีสีหนึ่งซ้ำกัน

การใช้เครื่องมือ

1. เลือกสีหลักด้วยเครื่องมือเลือกสี หรือพิมพ์รหัสเลขฐานสิบหก เช่น #3B82F6
2. เลือกประเภทความกลมกลืนของสี ได้แก่ สีคู่ตรงข้าม สีข้างเคียง สีสามเส้า หรือสีเอกรงค์
3. ดูชุดสีที่สร้างขึ้น แถบสีแต่ละแถบจะแสดงรหัสเลขฐานสิบหกบนปุ่ม
4. คลิกปุ่มนั้นเพื่อคัดลอกรหัสเลขฐานสิบหก หรือใช้ "คัดลอกสีทั้งหมด" เพื่อคัดลอกชุดสีทั้งหมดในครั้งเดียว

การตรวจสอบคอนทราสต์เพื่อการเข้าถึง

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

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

โดยที่ C คืออัตราส่วนคอนทราสต์

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

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

คำถามที่พบบ่อย

เครื่องมือสร้างชุดสีคืออะไร เป็นเครื่องมือที่สร้างชุดสีที่เข้ากันได้ โดยเริ่มจากสีหลักหนึ่งสีและกฎความกลมกลืนที่เลือกไว้

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

ประเภทความกลมกลืนของสีแต่ละแบบสร้างสีกี่สี สีคู่ตรงข้ามสร้างทั้งหมด 2 สี (รวมสีหลัก) สีสามเส้าสร้าง 3 สี สีข้างเคียงสร้าง 5 สี และสีเอกรงค์สร้าง 5 สี

เครื่องมือนี้ใช้แบบจำลองสีใดภายในระบบ HSL (เฉดสี ความอิ่มตัว และความสว่าง) เครื่องมือจะแปลงรหัสเลขฐานสิบหกขาเข้าเป็น HSL คำนวณ จากนั้นแปลงผลลัพธ์กลับเป็นเลขฐานสิบหก

เครื่องมือนี้ตรวจสอบว่าสีเข้าถึงได้หรือไม่ ใช่ แถบสีแต่ละแถบจะแสดงว่าสีมีคอนทราสต์เพียงพอเมื่อเทียบกับสีขาวและสีดำหรือไม่ เพื่อให้ผ่านมาตรฐาน WCAG AA สำหรับข้อความปกติ ซึ่งกำหนดให้อัตราส่วนอย่างน้อย 4.5

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

รูปแบบสี

เครื่องมือเขียนสีที่สร้างขึ้นทุกสีเป็นรหัสเลขฐานสิบหก 6 หลัก โดยมีเครื่องหมาย # นำหน้า (เช่น #ff0000 สำหรับสีแดง) รหัสเลขฐานสิบหกจะจับคู่โดยตรงกับค่าของสีแดง สีเขียว และสีน้ำเงิน ตั้งแต่ 0 ถึง 255 ในแต่ละช่อง สีหลักจะแสดงตรงตามที่ป้อน ดังนั้นรูปแบบย่อ 3 หลัก เช่น #F00 จะยังคงเป็นรูปแบบย่อ รหัส 3 หลักหมายถึงสีเดียวกับรูปแบบ 6 หลัก โดยแต่ละหลักจะซ้ำสองครั้ง ดังนั้น #F00 จึงเท่ากับ #FF0000 HSL เป็นอีกวิธีหนึ่งในการอธิบายสีเดียวกัน โดยใช้เฉดสี ความอิ่มตัว และความสว่างแทนปริมาณสีแดง สีเขียว และสีน้ำเงิน