Softonic

ตัวเลือกสี Material Design

ขั้นตอน 1 / 3 เลือกกลุ่มสี

พาเลต Material Design แบบคงที่ปี 2014 (Material Design 2) ส่วน Material 3 ใช้พาเลตโทนสีที่สร้างขึ้น

เลือกกลุ่มสี

Red Pink Purple Deep Purple Indigo Blue Light Blue Cyan Teal Green Light Green Lime Yellow Amber Orange Deep Orange Brown Gray Blue Gray Black White

พาเลต Material Design กำหนดกลุ่มสีทั้งหมด 19 กลุ่ม ตั้งแต่สีแดง สีชมพู สีม่วง ไปจนถึงสีเทาและสีน้ำเงินเทา โดยแต่ละกลุ่มมีช่วงเฉดสีตั้งแต่ 50 (อ่อน) ไปจนถึง 900 (เกือบดำ) พร้อมทั้งเฉดสีเน้นเสริมที่เลือกใช้ได้ตั้งแต่ A100 ถึง A700 ตัวเลือกนี้จัดวางตัวอย่างสีทุกตัวในรูปแบบตาราง และให้คุณคัดลอกค่าสีใดก็ได้ในรูปแบบ HEX, RGB, HSL หรือชื่อโทเคน Material เพื่อนำไปใช้ใน Tailwind, ตัวแปร CSS, iOS UIColor หรือแหล่งข้อมูลสีของ Android

วิธีใช้พาเลต

  1. 1

    กวาดสายตาดูตาราง

    กลุ่มสีเรียงลงมาทางด้านซ้าย ส่วนเฉดสีเรียงจากซ้ายไปขวาด้านบนตั้งแต่ 50 ถึง 900

  2. 2

    แตะที่ตัวอย่างสี

    ดู HEX, RGB, HSL และชื่อโทเคน Material มาตรฐาน (เช่น Indigo 500)

  3. 3

    คัดลอกรูปแบบที่คุณต้องการ

    คลิกเพียงครั้งเดียวจะคัดลอกสตริงอย่างแม่นยำ ได้แก่ `#3F51B5`, `rgb(63 81 181)`, `hsl(231 48% 48%)`

  4. 4

    ตรวจสอบค่าคอนทราสต์

    แผงนี้แสดงอัตราส่วนคอนทราสต์ตามมาตรฐาน WCAG เมื่อเทียบกับสีขาวและสีดำ เพื่อเลือกสีข้อความที่เข้าถึงได้

บันไดเฉดสี

เฉดสี การใช้งาน
50 พื้นหลังตอนชี้เมาส์ พื้นผิวสีอ่อน
100 พื้นหลังชิป การเติมสีแบบเน้นน้อย
200 สถานะที่ปิดใช้งาน พื้นผิวรอง
300 เส้นขอบ เส้นแบ่ง
400 ข้อความรองบนพื้นหลังสีอ่อน
500 สีเริ่มต้น / สีหลัก, เป็นค่าฐาน
600 สถานะเชิงโต้ตอบ (ชี้เมาส์ กดค้าง)
700 หัวเรื่อง การเน้นที่ชัดเจน
800 ข้อความสีเข้มบนพื้นหลังสีอ่อน
900 องค์ประกอบที่คอนทราสต์สูงสุด (เกือบดำ)
A100 สีเน้นอ่อน
A200 สีเน้นที่อ่อนกว่าค่าเริ่มต้น
A400 สีเน้น (มักเป็นสีเด่น “สว่างสดใส” ของแบรนด์)
A700 สีเน้นเข้ม

กลุ่มสีในพาเลท Material

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

สีน้ำตาล สีเทา และสีน้ำเงินเทาไม่มีเฉดสีเน้น, เป็นกลุ่มสีที่เป็นกลาง

การเลือกสีหลัก

ข้อกำหนดระบุว่าให้ใช้ 500 เป็นสีหลัก, 700 สำหรับเวอร์ชันที่เข้มกว่า (ใช้ในแถบสถานะบน Android) และสีเน้น A200 หรือ A400 สำหรับการดำเนินการรอง นี่เป็นเพียงแนวปฏิบัติทั่วไป ไม่ใช่กฎตายตัว, Material 3 รุ่นใหม่ (Dynamic Color) สร้างพาเลตจากสีตั้งต้นเพียงสีเดียว แทนที่จะเลือกจากช่วงเฉดสีที่กำหนดไว้ล่วงหน้า

จุดตรวจสอบการเข้าถึง

  • ข้อความเนื้อหา: อัตราส่วนคอนทราสต์ ≥ 4.5:1 เมื่อเทียบกับพื้นหลัง (WCAG AA)
  • ข้อความขนาดใหญ่ (18 pt ขึ้นไปแบบหนา หรือ 24 pt ขึ้นไปแบบปกติ): ≥ 3:1
  • องค์ประกอบ UI และวัตถุกราฟิก: ≥ 3:1

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

รูปแบบที่รองรับ

  • HEX: #3F51B5 (Indigo 500)
  • RGB: rgb(63 81 181) (รูปแบบสมัยใหม่) หรือ rgb(63, 81, 181) (รูปแบบเดิม)
  • HSL: hsl(231 48% 48%)
  • โทเคน Material: Indigo 500, เหมาะสำหรับเอกสารการออกแบบและ Figma
  • Tailwind: indigo-500, ใส่ลงในแอตทริบิวต์คลาสได้โดยตรง หากธีม Tailwind ของคุณใช้สเกล Material
  • XML สีของ Android: <color name="indigo_500">#FF3F51B5</color>, รูปแบบ ARGB
  • iOS UIColor: UIColor(red: 0.247, green: 0.318, blue: 0.710, alpha: 1.0)

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

เครื่องมือนี้แสดงพาเลต Material Design แบบคงที่ซึ่ง Google เผยแพร่ในปี 2014 และนำไปจัดทำเอกสารในเว็บไซต์ Material Design 2 ภายหลัง เครื่องมือนี้ไม่ได้สร้างพาเลตโทนสี Material 3 จากสีตั้งต้น เหมาะสำหรับใช้อ้างอิงเฉดสีแบบมีหมายเลขและสีเน้นชุดคลาสสิก

สีน้ำตาล สีเทา และสีน้ำเงินเทาเป็นสีกลาง จึงไม่เข้าร่วมในการจับคู่สีเน้น ข้อกำหนดจึงละเว้นช่วงค่า A100–A700 สำหรับสีเหล่านี้ไปเลย

พาเลตเริ่มต้นของ Tailwind ได้รับแรงบันดาลใจจาก Material แต่ไม่เหมือนกันทั้งหมด หากต้องการสีที่ตรงกับ Material อย่างแม่นยำ ให้ขยาย theme.extend.colors ด้วยค่าสีของ Material และอ้างอิงถึงสีเหล่านั้นในชื่อคลาสว่า material-indigo-500

ตามแนวปฏิบัติแล้วใช่ แต่ไม่มีอะไรห้ามคุณใช้ 700 หรือสีเน้นเป็นสีหลัก แนวปฏิบัติเรื่อง 500 มุ่งเน้นการมีเฉดสีฐานที่เชื่อถือได้ โดยมีระดับปรับได้ 8 ขั้นในทั้งสองทิศทางเพื่อสร้างความหลากหลาย

เครื่องมือที่เกี่ยวข้อง

เครื่องมือสร้าง QR Code

สร้าง QR Code จากข้อความหรือ URL ในเบราว์เซอร์ แล้วดาวน์โหลดเป็น PNG

เครื่องสร้างบาร์โค้ด

สร้างบาร์โค้ด Code 128, EAN-13, UPC, ITF-14 และรูปแบบเชิงเส้นอื่นอีกเจ็ดแบบ ข้อมูลอยู่ในเบราว์เซอร์และดาวน์โหลดเป็น SVG หรือ PNG ได้

แปลง WebP เป็น JPG

แปลงรูปภาพ WebP เป็น JPG/JPEG ได้โดยตรงในเบราว์เซอร์ เลือกคุณภาพ ผสานความโปร่งใสเข้ากับสีพื้นหลัง แล้วดาวน์โหลดโดยไม่ต้องอัปโหลดไฟล์

เครื่องมือสร้างมีม

อัปโหลดรูป JPG, PNG หรือ WebP ใส่ข้อความด้านบนและด้านล่าง ปรับฟอนต์ สี และเส้นขอบ แล้วดาวน์โหลดมีมเป็น PNG โดยประมวลผลในเบราว์เซอร์

ตัวสร้าง GIF

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

BMP เป็น PNG

แปลงไฟล์ BMP เป็น PNG ในเบราว์เซอร์ แบบไม่สูญเสียคุณภาพ คงความลึกของสี และเพิ่มความโปร่งใสจากช่อง alpha ของ BMP ต้นฉบับได้