แจก 300 โค้ดสี HTML คัดพาเลตมาให้แล้วจากดีไซน์เนอร์

Peridot

โค้ดสี 100 แบบ ไล่สีสันสำหรับงานออกแบบ มาดูกันเลยว่าจะมีสีอะไรเด็ด ๆ สวย ๆ ให้เรานำไปใช้ในการออกแบบได้บ้าง โดยสีที่นำมาเสนอวันนี้ได้มาจากพาเลตของ Material design design system จาก Google

เราได้เรียงสีพร้อมแนะนำโค้ดสี HTML ในรูปแบบของ Hex code มาทั้งหมด โดยมีสีดังต่อไปนี้

สีแดง

01 hex cod red
01 hex cod red

สีแดงแบบไล่สีจากอ่อนไปหาเข้ม

  • 50 – #ffebee
  • 100 – #ffcdd2
  • 200 – #ef9a9a
  • 300 – #e57373
  • 400 – #ef5350
  • 500 – #f44336
  • 600 – #e53935
  • 700 – #d32f2f
  • 800 – #c62828
  • 900 – #b71c1c
02hex pink
02hex pink

สีชมพู

  • 50 – #fce4ec
  • 100 – #f8bbd0
  • 200 – #f48fb1
  • 300 – #f06292
  • 400 – #ec407a
  • 500 – #e91e63
  • 600 – #d81b60
  • 700 – #c2185b
  • 800 – #ad1457
  • 900 – #880e4f

สีม่วง

03 hex code purple
03hex purple

สีม่วงอมชมพูแบบไล่สีจากอ่อนไปหาเข้ม

  • 50 – #f3e5f5
  • 100 – #e1bee7
  • 200 – #ce93d8
  • 300 – #ba68c8
  • 400 – #ab47bc
  • 500 – #9c27b0
  • 600 – #8e24aa
  • 700 – #7b1fa2
  • 800 – #6a1b9a
  • 900 – #4a148c
04 hex purple
04 hex purple

สีม่วงเข้มอมน้ำเงิน

  • 50 – #ede7f6
  • 100 – #d1c4e9
  • 200 – #b39ddb
  • 300 – #9575cd
  • 400 – #7e57c2
  • 500 -#673ab7
  • 600 – #5e35b1
  • 700 – #512da8
  • 800 – #4527a0
  • 900 – #311b92

สีน้ำเงิน

05 hex indigo
05 hex indigo

สีม่วงน้ำเงิน Indigo

  • 50 – #e8eaf6
  • 100 – #c5cae9
  • 200 – #9fa8da
  • 300 – #7986cb
  • 400 – #5c6bc0
  • 500 – #3f51b5
  • 600 – #3949ab
  • 700 – #303f9f
  • 800 – #283593
  • 900 – #1a237e
06 hex blue
06 hex blue

สีฟ้า

  • 50 – #e3f2fd
  • 100 – #bbdefb
  • 200 – #90caf9
  • 300 – #64b5f6
  • 400 – #42a5f5
  • 500 – #2196f3
  • 600 – #1e88e5
  • 700 – #1976d2
  • 800 – #1565c0
  • 900 – #0d47a1

สีฟ้าอ่อน

07 hex light blue
07 hex light blue

สีฟ้าอ่อน

  • 50 – #e1f5fe
  • 100 – #b3e5fc
  • 200 – #81d4fa
  • 300 – #4fc3f7
  • 400 – #29b6f6
  • 500 – #03a9f4
  • 600 – #039be5
  • 700 – #0288d1
  • 800 – #0277bd
  • 900 – #01579b
08 hex cyan
08 hex cyan

สีฟ้าอมเขียว Cyan

  • 50 – #e0f7fa
  • 100 – #b2ebf2
  • 200 – #80deea
  • 300 – #4dd0e1
  • 400 – #26c6da
  • 500 – #00bcd4
  • 600 – #00acc1
  • 700 – #0097a7
  • 800 – #00838f
  • 900 – #006064

สี Teal

09 hex teal
09 hex teal

สีเขียวอมฟ้า Teal

  • 50 – #e0f2f1
  • 100 – #b2dfdb
  • 200 – #80cbc4
  • 300 – #4db6ac
  • 400 – #26a69a
  • 500 – #009688
  • 600 – #00897b
  • 700 – #00796b
  • 800 – #00695c
  • 900 – #004d40
10 hex green
10 hex green

สีเขียว

  • 50 – #e8f5e9
  • 100 – #c8e6c9
  • 200 – #a5d6a7
  • 300 – #81c784
  • 400 – #66bb6a
  • 500 – #4caf50
  • 600 – #43a047
  • 700 – #388e3c
  • 800 – #2e7d32
  • 900 – #1b5e20

สีเขียวอ่อน

11 hex light green
11 hex light green

สีเขียวอ่อน สีเขียวใบตอง

  • 50 – #f1f8e9
  • 100 – #dcedc8
  • 200 – #c5e1a5
  • 300 – #aed581
  • 400 – #9ccc65
  • 500 – #8bc34a
  • 600 – #7cb342
  • 700 – #689f38
  • 800 – #558b2f
  • 900 – #33691e
12 hex lime
12 hex lime

สีเขียวอ่อน สีเขียวมะนาว อมเหลืองนิด ๆ

  • 50 – #f9fbe7
  • 100 – #f0f4c3
  • 200 – #e6ee9c
  • 300 – #dce775
  • 400 – #d4e157
  • 500 – #cddc39
  • 600 – #c0ca33
  • 700 – #afb42b
  • 800 – #9e9d24
  • 900 – #827717

สีเหลือง

13 hex yellow
13 hex yellow

สีเขียวเหลือง สว่าง สดใส

  • 50 – #fffde7
  • 100 – #fff9c4
  • 200 – #fff59d
  • 300 – #fff176
  • 400 – #ffee58
  • 500 – #ffeb3b
  • 600 – #fdd835
  • 700 – #fbc02d
  • 800 – #f9a825
  • 900 – #f57f17

สีเหลืองเข้ม

14 hex amber
14 hex amber

สีเขียวเหลืองเข้มอมส้ม

  • 50 – #fff8e1
  • 100 – #ffecb3
  • 200 – #ffe082
  • 300 – #ffd54f
  • 400 – #ffca28
  • 500 – #ffc107
  • 600 – #ffb300
  • 700 – #ffa000
  • 800 – #ff8f00
  • 900 – #ff6f00
15 hex orange
15 hex orange

สีส้มสวย ๆ สดใส

  • 50 – #fff3e0
  • 100 – #ffe0b2
  • 200 – #ffcc80
  • 300 – #ffb74d
  • 400 – #ffa726
  • 500 – #ff9800
  • 600 – #fb8c00
  • 700 – #f57c00
  • 800 – #ef6c00
  • 900 – #e65100

สีส้มเข้ม

16 hex deeporange
16 hex deeporange

สีส้มเข้ม

  • 50 – #fbe9e7
  • 100 – #ffccbc
  • 200 – #ffab91
  • 300 – #ff8a65
  • 400 – #ff7043
  • 500 – #ff5722
  • 600 – #f4511e
  • 700 – #e64a19
  • 800 – #d84315
  • 900 – #bf360c
17 hex brown
17 hex brown

สีน้ำตาล

  • 50 – #efebe9
  • 100 – #d7ccc8
  • 200 – #bcaaa4
  • 300 – #a1887f
  • 400 – #8d6e63
  • 500 – #795548
  • 600 – #6d4c41
  • 700 – #5d4037
  • 800 – #4e342e
  • 900 – #3e2723

สีเทา

18 hex grey
18 hex grey

สีเทา

  • 50 – #fafafa
  • 100 – #f5f5f5
  • 200 – #eeeeee
  • 300 – #e0e0e0
  • 400 – #bdbdbd
  • 500 – #9e9e9e
  • 600 – #757575
  • 700 – #616161
  • 800 – #424242
  • 900 – #212121
19 hex bluegrey
19 hex blue-grey

สีฟ้าอมเทา

  • 50 – #eceff1
  • 100 – #cfd8dc
  • 200 – #b0bec5
  • 300 – #90a4ae
  • 400 – #78909c
  • 500 – #607d8b
  • 600 – #546e7a
  • 700 – #455a64
  • 800 – #37474f
  • 900 – #263238

บทความที่เกี่ยวข้อง:
ถ้ายังไม่จุใจอย่าลืมอ่านเว็บไซต์นี้นะครับ เลือกสีและโค้ดสีด้วยตนเองตามเฉดสีของแบรนด์ตัวเองเลยครับ

หากเพื่อน ๆ ต้องการไล่สีด้วยตนเอง เราขอแนะนำเว็บไซต์นี้

โค้ดสี material ui color
โค้ดสี material ui color

Meterial UI Color – เว็บไซต์ที่ช่วยในการวางโค้ดสีสวย ๆ สำหรับการออกแบบในเว็บไซต์ โดยจะเป็นเว็บไซต์ที่ช่วยให้เราวางแผนการออกแบบ เลือกสีลงบนแอพลิเคชั่น จับคู่สีให้เข้ากันบนงาน User interface ข้อดีคือระบบนี้จะมาพร้อมกับหน้า Accessibility ที่จะช่วยให้เราเช็คได้ว่าสีของเรานั้นมีระดับ Contrast ที่คนตาบอดสีสามารถมองเห็นและอ่านได้ง่ายมั้ย

บทความที่เกี่ยวข้อง

Peridot

Peridot

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

Related posts