เครื่องกำเนิดโทนสี
โทนสีเป็นผลจากการผสมสีกับสีขาว แต่ละขั้นตอนจะสว่างขึ้น ตัวสร้างจะใช้สีพื้นฐานของคุณและสร้างลำดับขั้นของโทนสีอ่อนลงเรื่อยๆ ซึ่งมีประโยชน์สำหรับช่วงพาเล็ตของระบบการออกแบบ (100 → 400) การเติมพื้นหลังแบบละเอียด สถานะโฮเวอร์บนแม่สีสีเข้ม และพื้นหลังป้าย/การแจ้งเตือนที่จำเป็นต้องมีสีที่ถูกเน้นแต่เงียบ
วิธีสร้างสีอ่อน
-
1
เลือกสีพื้นฐาน
ใช้ตัวเลือกสีเพื่อเลือกสีพื้นฐาน ทำงานได้ดีที่สุดกับฐานที่สว่างปานกลาง ฐานใกล้สีขาวมีพื้นที่ให้สว่างน้อย
-
2
เลือกจำนวนขั้น
ระหว่าง 3 ถึง 20 ขั้น ค่าเริ่มต้นคือ 10 โดย 10 ขั้นให้สเกลระบบการออกแบบที่สมบูรณ์ ส่วนงาน UI แบบเร่งด่วนใช้ขั้นน้อยกว่านี้ก็พอ
-
3
ผสมกับสีขาวในเปอร์เซ็นต์ที่เพิ่มขึ้น
ด้วย 10 ขั้น โทนแรกผสมสีขาวประมาณ 9% และโทนสุดท้ายประมาณ 91% การประมาณค่าทำในปริภูมิ RGB โดยตรง ดังนั้นความอิ่มสีจะจางลงเมื่อความสว่างเพิ่มขึ้น
-
4
อ่านค่า HEX
แต่ละช่องสีแสดงค่า HEX ของตัวเอง นำไปใช้ในตัวแปร CSS สเกล Tailwind หรือแผนที่ Sass ได้เลย
ตัวอย่างสเกลสีจาก #3B82F6
ตารางด้านล่างแสดงผลลัพธ์ที่เครื่องมือสร้างด้วยค่าเริ่มต้น 10 ขั้น:
| ขั้น | Hex | สีขาว | บทบาททั่วไป |
|---|---|---|---|
| 0 | #3B82F6 | สีฐาน | แบรนด์หลัก (blue-500) |
| 1 | #4C8DF6 | 9.1% | โฮเวอร์สว่างบนพื้นหลังสีเข้ม |
| 2 | #5E98F7 | 18.2% | เทียบเท่า blue-400 |
| 3 | #70A4F8 | 27.3% | |
| 4 | #82AFF9 | 36.4% | blue-300 |
| 5 | #94BAFA | 45.5% | |
| 6 | #A5C6FA | 54.5% | |
| 7 | #B7D1FB | 63.6% | |
| 8 | #C9DCFC | 72.7% | พื้นหลังบางเบา (blue-100/200) |
| 9 | #DBE8FD | 81.8% | |
| 10 | #EDF3FE | 90.9% | blue-50 |
โทนสีอ่อน + เฉดเข้ม = สเกลของระบบออกแบบ
รวมสีอ่อน (อ่อนกว่า) และเฉดสี (เข้มกว่า) ไว้รอบฐานเดียวเพื่อสร้างขนาดเต็ม:
- 50, 100, 200, 300, 400: โทนสี (อ่อนที่สุดถึงอ่อนกว่าฐานเล็กน้อย)
- 500: ฐาน
- 600, 700, 800, 900: เฉดสี (เข้มกว่าฐานเล็กน้อยถึงเข้มที่สุด)
ซึ่งตรงกับ Tailwind, Material, Open Color, Radix UI และระบบการออกแบบยอดนิยมส่วนใหญ่ สเกลขั้น 10-11 เป็นเรื่องปกติ
โดยที่สีอ่อน ๆ ส่องประกายใน UI
- พื้นหลังการแจ้งเตือนและป้ายสถานะ: ข้อความข้อผิดพลาด-500 บนพื้นหลังข้อผิดพลาด-50 = การจดจำทันทีโดยไม่ต้องตะโกนด้วยภาพ
- สถานะโฮเวอร์บนพื้นหลังสีเข้ม: ปุ่มบนพื้นผิวสีเข้มจะสว่างขึ้นเป็นสีอ่อนกว่าเมื่อโฮเวอร์
- มาตราส่วนตามลำดับในวิชวลไลซ์ข้อมูล: การแมปค่าต่อสีโดยที่ค่าสูงอิ่มตัวและค่าต่ำจางลงเป็นสีขาว
- ตัวแทนหมวดหมู่อวาตาร์ / แผนภูมิ: สีอ่อนของสีหลักเมื่อไม่มีรูปภาพ/ข้อมูล
- เลเยอร์พื้นผิว: พื้นหลังการ์ดมีสีแบรนด์เล็กน้อยเพื่อให้แบรนด์ดูละเอียดอ่อน
ทำไมโทนสีที่อ่อนที่สุดจึงเสียความอิ่มตัว
ตัวสร้างผสมสีโดยตรงในปริภูมิ RGB เมื่อเติมสีขาว ความอิ่มตัวจะลดลงเร็วกว่าความสว่างที่รับรู้เพิ่มขึ้น ดังนั้นขั้นบน ๆ จึงดูซีดหรือเทา นี่เป็นพฤติกรรมปกติของการผสมแบบ RGB:
- การผสม RGB (เครื่องมือนี้): ง่ายและคาดเดาได้ ความอิ่มตัวจางลงสม่ำเสมอ ขั้นที่สว่างมากจะดูไร้ความอิ่มตัว
- การประมาณค่า OKLCH หรือ LAB: โปรแกรมออกแบบใช้วิธีนี้เพื่อรักษาความเข้มสีให้คงที่กว่าเมื่อทำให้สว่างขึ้น เครื่องมือนี้ไม่มีโมเดลเหล่านั้น หากต้องการโทนสีที่สีคงที่ ให้สร้างในโปรแกรมออกแบบที่รองรับ OKLCH
- การเพิ่มความสว่างใน HSL: เพิ่มความสว่างโดยไม่ผสมสีขาว ผลลัพธ์อาจดูเป็นสีพาสเทลมากกว่าเหมือนสีทา
พื้นสีสำหรับ UI ที่ใช้งานได้
สีอ่อนมาก (ขั้นตอนที่ 8+) เข้าใกล้สีขาวบริสุทธิ์และแทบจะแยกไม่ออกทางสายตาบนพื้นหลังสีขาว มีประโยชน์เป็น:
- ไฮไลท์การเลือกที่ละเอียดอ่อนด้านหลังข้อความ
- แถบแถวที่แทบจะมองไม่เห็นในตารางที่มีความหนาแน่นสูง
แต่ไม่ดีสำหรับปุ่มหรือป้ายกำกับที่ผู้ใช้ต้องการเห็นสีที่แตกต่าง จับคู่สีอ่อนกับองค์ประกอบที่เข้มกว่า (เส้นขอบ ข้อความ) เพื่อบดบังสีเหล่านั้น
คำถามที่พบบ่อย
ตัวสร้างผสมสีโดยตรงใน RGB และการประมาณค่า RGB จะดึงความอิ่มสีลงเมื่อความสว่างเพิ่มขึ้น ทำให้ขั้นบน ๆ เฉือนไปทางขาว หากใช้การประมาณค่า OKLCH หรือ LAB กลับจะคงร่องรอยของสีฐานที่มองเห็นได้ ใช้โปรแกรมออกแบบที่รองรับ OKLCH เมื่อจุดนี้สำคัญ
คล้ายกันแต่ไม่เหมือนกัน การผสมกับสีขาวจะช่วยลดทั้งความอิ่มตัวและความสว่างตามสัดส่วน การปรับความสว่าง HSL จะเพิ่ม L อย่างอิสระ โทนสีให้ความรู้สึกเป็นธรรมชาติมากขึ้น (เหมือนสีทา); ความเบาของ HSL สามารถผลักดันไปสู่สีพาสเทลที่ไม่สมจริงได้
ใช่, โหมดมืดมักจะต้องใช้ “บันไดความสว่าง” ที่แตกต่างออกไป เนื่องจากพื้นหลังมืดอยู่แล้ว หลายระบบกลับค่ามาตราส่วน (50 ของโหมดมืดจะเทียบเท่ากับสีขาวบนมืด 900 ของโหมดแสง)
สร้างบันไดสี 5 ขั้น (50-500) และบันไดสี 5 ขั้น (500-900) จากฐานเดียวกัน เชื่อมต่อกันเพื่อให้ได้ขนาดระบบการออกแบบขั้นตอนเต็ม 10-11 ขั้นตอน
เครื่องมือที่เกี่ยวข้อง
ตารางอ้างอิง ASCII
ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL
อ้างอิงตัวอักษร HTML
รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ
ตัวลดรูปพีชคณิตบูลีน
ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^
เครื่องสร้างตัวอักษรสุ่ม
สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน
ตารางอ้างอิงแป้นพิมพ์ลัด
ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux
เครื่องมือตรวจสอบหมายเลขโทรศัพท์
ตรวจสอบโครงสร้างหมายเลขตามประเทศ พร้อมดูภูมิภาค ประเภท และรูปแบบ E.164 ระหว่างประเทศ ในประเทศ และ RFC 3966