เครื่องสร้างพาเลตสีโมโนโครม
สีและพาเลตถูกสร้างในเบราว์เซอร์นี้ ในโหมดทีละขั้น โปรเจกต์จะอยู่ในพื้นที่จัดเก็บเซสชันของแท็บนี้ไม่เกิน 30 นาที โดยไม่มีค่าสีใดถูกส่งไปยังเซิร์ฟเวอร์ของเรา หรือใส่ใน URL
สร้างสเกลสีโมโนโครม
ป้อนสีหนึ่งสี แล้วเลือกการแปลง ปริภูมิการประมาณค่า และจำนวนตัวอย่างสี
รูปแบบที่รองรับ: #RGB, #RRGGBB, rgb(0–255) และ hsl() ที่ใช้เปอร์เซ็นต์ ไม่รองรับช่องอัลฟา
ใช้ในการส่งออกตัวแปร CSS, Tailwind, SCSS และโทเค็นการออกแบบ
เลือกสีพื้นฐาน แล้วเครื่องมือจะสร้างพาเลตสีโมโนโครมรอบสีนั้น ประกอบด้วย ทินต์ (ผสมกับสีขาวทีละน้อยเพื่อไล่ให้สว่างขึ้น) เชด (ผสมกับสีดำทีละน้อยเพื่อไล่ให้เข้มขึ้น) และโทน (ผสมกับสีเทาเพื่อลดความอิ่มตัว) เหมาะสำหรับระบบออกแบบที่ต้องการชุดสีไล่ระดับที่กลมกลืนจากสีแบรนด์เพียงสีเดียว เช่น สเกล 50–950 ของ Tailwind แต่ปรับแต่งได้ หรือใช้เลือกสีของสถานะ hover และสถานะ active โดยไม่ต้องออกจากพาเลตเดิม
วิธีสร้างพาเลต
-
1
ป้อนสีพื้นฐาน
ใช้ #RGB, #RRGGBB, ช่องสี rgb() แบบจำนวนเต็ม หรือเปอร์เซ็นต์ hsl()
-
2
เลือกประเภทพาเลต
เลือกสเกลสว่างและมืดแบบเต็ม ทินต์ไปทางสีขาว เชดไปทางสีดำ หรือโทนไปทางสีกลาง
-
3
เลือกจำนวนขั้น
5, 9 หรือ 11 ขั้น โดย 9 ขั้นใช้ป้าย 100–900 แบบ Material ที่พบได้ทั่วไป ส่วน 11 ขั้นเพิ่ม 50 และ 950 สำหรับสเกลแบบ Tailwind
-
4
คัดลอกหรือส่งออก
คัดลอก HEX, RGB, HSL หรือ OkLCH หรือส่งออก CSS, Tailwind, SCSS และ JSON ตาม Design Tokens Community Group
ทินต์ เทียบกับ เชด เทียบกับ โทน
- ทินต์ = สีพื้นฐาน + สีขาว สว่างขึ้นและออกพาสเทลมากขึ้น
mix(base, #fff, p%)โดย p คือเปอร์เซ็นต์ของสีขาว - เชด = สีพื้นฐาน + สีดำ เข้มขึ้นและดูขรึมขึ้น
mix(base, #000, p%) - โทน = สีพื้นฐาน + สีเทา ความสว่างเท่าเดิมแต่ความอิ่มตัวลดลง จึงดูนุ่มนวลขึ้น
การแปลงทั้งสามแบบให้บุคลิกทางสายตาที่ต่างกัน ทินต์ให้ความรู้สึกโปร่งเบาและสดใส เชดให้ความรู้สึกหนักแน่นและจริงจัง ส่วนโทนให้ความรู้สึกสุขุมและประณีต
ชุดไล่ระดับ 9 ขั้นจากสีพื้นฐานเดียว
| ขั้น | คำอธิบาย | การใช้งานทั่วไป |
|---|---|---|
| 100 | อ่อนมาก | พื้นผิว, พื้นหลังชิป |
| 200 | อ่อน | สถานะปิดใช้งาน |
| 300 | อ่อนปานกลาง | เส้นขอบ, เส้นแบ่ง |
| 400 | หม่นลงเล็กน้อย | ข้อความรอง (พื้นหลังสว่าง) |
| 500 | สีพื้นฐาน | สีแบรนด์เริ่มต้น, ค่ามาตรฐานของคุณ |
| 600 | เข้มปานกลาง | สถานะ hover ของปุ่มหลัก |
| 700 | เข้ม | สถานะ active, ส่วนหัว |
| 800 | เข้มมาก | ข้อความหนักบนพื้นหลังสว่าง |
| 900 | เชดเข้มที่สุด | ข้อความคอนทราสต์สูงสุด |
ป้ายตัวเลขอ้างอิงแนวทางตั้งชื่อโทเค็นที่ใช้กันทั่วไป สีที่สร้างขึ้นไม่ใช่ค่าสีทางการของ Material หรือ Tailwind
ทำไมโมโนโครมจึงเหมาะกับอินเทอร์เฟซ
- ความกลมกลืน ทุกองค์ประกอบดูเป็นชุดเดียวกันอย่างชัดเจน
- ความสอดคล้อง การใช้เฉดสีเดิมซ้ำช่วยให้เห็นความสัมพันธ์ได้ง่าย แต่ไม่ได้ทำให้อินเทอร์เฟซรองรับความแตกต่างด้านการมองเห็นสีโดยอัตโนมัติ
- ความเรียบง่าย การตัดสินใจเพียงข้อเดียวคือสีพื้นฐาน กำหนดทั้งพาเลต
การจับคู่กับสีกลาง
พาเลตโมโนโครมก็ต้องมีสีเทาด้วย รูปแบบที่พบบ่อย:
- ชุดไล่ระดับหลักจากสีแบรนด์ของคุณ (9 ขั้น)
- ชุดไล่ระดับสีกลางจากสีหลักที่ลดความอิ่มตัวลง (9 ขั้น)
- อาจมีสีเน้นอีกหนึ่งสี (ขั้นเดียวที่คัดมาอย่างดีสำหรับการแจ้งเตือนและ CTA)
ใช้โครงสร้างนี้เป็นจุดเริ่มต้น ไม่ใช่กฎตายตัว จำนวนพาเลตขึ้นอยู่กับสถานะของผลิตภัณฑ์ การแสดงข้อมูล สีเชิงความหมาย และข้อกำหนดด้านการเข้าถึง
จุดตรวจสอบคอนทราสต์
สำหรับข้อความบนพื้นหลัง WCAG กำหนดคอนทราสต์ 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ ป้าย 100, 500 หรือ 900 ไม่ได้หมายถึงอัตราส่วนคอนทราสต์ตายตัว เพราะผลลัพธ์ขึ้นอยู่กับสีพื้นฐาน ประเภทพาเลต และปริภูมิการประมาณค่า
ควรตรวจสอบคู่สีที่คุณตั้งใจจะใช้จริงด้วยเครื่องมือตรวจคอนทราสต์เสมอ
ส่งออกไปยังระบบออกแบบของคุณ
รูปแบบการส่งออก:
- CSS custom property:
--primary-50: #f0f9ff; --primary-100: ... - การตั้งค่า Tailwind: ออบเจ็กต์ JS ที่พร้อมวางลงใน
tailwind.config.js → theme.extend.colors - SCSS map สำหรับโปรเจกต์ Sass
- Design tokens JSON ที่ใช้โครงสร้าง
$type/$valueของ Design Tokens Community Group
คำถามที่พบบ่อย
ทินต์ตั้งใจไล่ไปทางสีขาว สีพื้นฐานที่อิ่มตัวมากจึงกลายเป็นพาสเทลได้เร็ว ลองเปรียบเทียบ HSL กับ OkLCH ใช้จำนวนขั้นน้อยลง หรือเลือกสีพื้นฐานที่อิ่มตัวน้อยลง
คุณเลือก HSL หรือ OkLCH ได้ HSL ปรับแกนความสว่างและความอิ่มตัว ส่วน OkLCH ปรับความสว่างตามการรับรู้และ chroma พร้อมลด chroma เมื่อจำเป็นเพื่อให้ผลลัพธ์อยู่ในขอบเขต sRGB
ในสเกลแบบเต็ม สีพื้นฐานคือโทเค็น 500 ตรงกลาง สเกลทินต์จบที่สีพื้นฐาน สเกลเชดเริ่มจากสีพื้นฐาน และสเกลโทนจบที่สีพื้นฐาน ป้ายไม่ได้รับรองค่าความสว่างเฉพาะ
เครื่องมือนี้ไม่ได้เชื่อมต่อกับ Figma โดยตรง ให้คัดลอกค่าแต่ละสี หรือใช้ข้อความ CSS, Tailwind, SCSS หรือ JSON ตามโครงสร้าง Design Tokens Community Group เป็นจุดเริ่มต้นของขั้นตอนทำงาน
เครื่องมือที่เกี่ยวข้อง
เครื่องมือสร้าง QR Code
สร้าง QR Code จากข้อความหรือ URL ในเบราว์เซอร์ แล้วดาวน์โหลดเป็น PNG
เครื่องสร้างบาร์โค้ด
สร้างบาร์โค้ด Code 128, EAN-13, UPC, ITF-14 และรูปแบบเชิงเส้นอื่นอีกเจ็ดแบบ ข้อมูลอยู่ในเบราว์เซอร์และดาวน์โหลดเป็น SVG หรือ PNG ได้
เครื่องมือสร้างมีม
อัปโหลดรูป JPG, PNG หรือ WebP ใส่ข้อความด้านบนและด้านล่าง ปรับฟอนต์ สี และเส้นขอบ แล้วดาวน์โหลดมีมเป็น PNG โดยประมวลผลในเบราว์เซอร์
แปลง WebP เป็น JPG
แปลงรูปภาพ WebP เป็น JPG/JPEG ได้โดยตรงในเบราว์เซอร์ เลือกคุณภาพ ผสานความโปร่งใสเข้ากับสีพื้นหลัง แล้วดาวน์โหลดโดยไม่ต้องอัปโหลดไฟล์
ตัวสร้าง GIF
แปลงชุดรูปภาพหรือวิดีโอสั้นให้เป็น GIF เคลื่อนไหว ปรับอัตราเฟรม จำนวนรอบการเล่น และขนาดก่อนส่งออก
เครื่องมือปรับขนาดรูปภาพสำหรับโซเชียลมีเดีย
ปรับขนาดรูปภาพหนึ่งภาพเป็นพรีเซ็ตโซเชียลมีเดียในตัวสำหรับ Instagram, Facebook, X, LinkedIn, YouTube, Pinterest และ TikTok ดูตัวอย่าง PNG แต่ละไฟล์และดาวน์โหลดขนาดที่ต้องใช้