Knowledge Sharing ชุมชนแห่งการเรียนรู้...

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

คำสำคัญ : HTMLcode  

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

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

 

  • สีแดง
    #e51c23
  • 50#fde0dc
  • 100#f9bdbb
  • 200#f69988
  • 300#f36c60
  • 400#e84e40
  • 500#e51c23
  • 600#dd191d
  • 700#d01716
  • 800#c41411
  • 900#b0120a
  • สีชมพู
    #e91e63
  • 50#fce4ec
  • 100#f8bbd0
  • 200#f48fb1
  • 300#f06292
  • 400#ec407a
  • 500#e91e63
  • 600#d81b60
  • 700#c2185b
  • 800#ad1457
  • 900#880e4f
  • สีม่วง
    #9c27b0
  • 50#f3e5f5
  • 100#e1bee7
  • 200#ce93d8
  • 300#ba68c8
  • 400#ab47bc
  • 500#9c27b0
  • 600#8e24aa
  • 700#7b1fa2
  • 800#6a1b9a
  • 900#4a148c
  • สีม่วงเข้ม
    #673ab7
  • 50#ede7f6
  • 100#d1c4e9
  • 200#b39ddb
  • 300#9575cd
  • 400#7e57c2
  • 500#673ab7
  • 600#5e35b1
  • 700#512da8
  • 800#4527a0
  • 900#311b92
  • สีน้ำเงินเข้ม
    #3f51b5
  • 50#e8eaf6
  • 100#c5cae9
  • 200#9fa8da
  • 300#7986cb
  • 400#5c6bc0
  • 500#3f51b5
  • 600#3949ab
  • 700#303f9f
  • 800#283593
  • 900#1a237e
  • สีน้ำเงินอ่อน
    #5677fc
  • 50#e7e9fd
  • 100#d0d9ff
  • 200#afbfff
  • 300#91a7ff
  • 400#738ffe
  • 500#5677fc
  • 600#4e6cef
  • 700#455ede
  • 800#3b50ce
  • 900#2a36b1
  • สีฟ้า
    #03a9f4
  • 50#e1f5fe
  • 100#b3e5fc
  • 200#81d4fa
  • 300#4fc3f7
  • 400#29b6f6
  • 500#03a9f4
  • 600#039be5
  • 700#0288d1
  • 800#0277bd
  • 900#01579b
  • สีน้ำเงินเขียว Cyan
    #00bcd4
  • 50#e0f7fa
  • 100#b2ebf2
  • 200#80deea
  • 300#4dd0e1
  • 400#26c6da
  • 500#00bcd4
  • 600#00acc1
  • 700#0097a7
  • 800#00838f
  • 900#006064
  • สีฟ้าอมเขียวเข้ม Teal
    #009688
  • 50#e0f2f1
  • 100#b2dfdb
  • 200#80cbc4
  • 300#4db6ac
  • 400#26a69a
  • 500#009688
  • 600#00897b
  • 700#00796b
  • 800#00695c
  • 900#004d40
  • สีเขียว
    #259b24
  • 50#d0f8ce
  • 100#a3e9a4
  • 200#72d572
  • 300#42bd41
  • 400#2baf2b
  • 500#259b24
  • 600#0a8f08
  • 700#0a7e07
  • 800#056f00
  • 900#0d5302
  • สีเขียวอ่อน
    #8bc34a
  • 50#f1f8e9
  • 100#dcedc8
  • 200#c5e1a5
  • 300#aed581
  • 400#9ccc65
  • 500#8bc34a
  • 600#7cb342
  • 700#689f38
  • 800#558b2f
  • 900#33691e
  • สีเขียวมะนาว
    #cddc39
  • 50#f9fbe7
  • 100#f0f4c3
  • 200#e6ee9c
  • 300#dce775
  • 400#d4e157
  • 500#cddc39
  • 600#c0ca33
  • 700#afb42b
  • 800#9e9d24
  • 900#827717
  • สีเหลือง
    #ffeb3b
  • 50#fffde7
  • 100#fff9c4
  • 200#fff59d
  • 300#fff176
  • 400#ffee58
  • 500#ffeb3b
  • 600#fdd835
  • 700#fbc02d
  • 800#f9a825
  • 900#f57f17
  • สีเหลืองอมส้ม
    #ffc107
  • 50#fff8e1
  • 100#ffecb3
  • 200#ffe082
  • 300#ffd54f
  • 400#ffca28
  • 500#ffc107
  • 600#ffb300
  • 700#ffa000
  • 800#ff8f00
  • 900#ff6f00
  • สีส้ม
    #ff9800
  • 50#fff3e0
  • 100#ffe0b2
  • 200#ffcc80
  • 300#ffb74d
  • 400#ffa726
  • 500#ff9800
  • 600#fb8c00
  • 700#f57c00
  • 800#ef6c00
  • 900#e65100
  • สีส้มเข้ม
    #ff5722
  • 50#fbe9e7
  • 100#ffccbc
  • 200#ffab91
  • 300#ff8a65
  • 400#ff7043
  • 500#ff5722
  • 600#f4511e
  • 700#e64a19
  • 800#d84315
  • 900#bf360c
  • สีน้ำตาล
    #795548
  • 50#efebe9
  • 100#d7ccc8
  • 200#bcaaa4
  • 300#a1887f
  • 400#8d6e63
  • 500#795548
  • 600#6d4c41
  • 700#5d4037
  • 800#4e342e
  • 900#3e2723
  • สีเทา
    #9e9e9e
  • 50#fafafa
  • 100#f5f5f5
  • 200#eeeeee
  • 300#e0e0e0
  • 400#bdbdbd
  • 500#9e9e9e
  • 600#757575
  • 700#616161
  • 800#424242
  • 900#212121
  • 1000#000000
  • 1000#ffffff
  • สีเทาอมฟ้า
    #607d8b
  • 50#eceff1
  • 100#cfd8dc
  • 200#b0bec5
  • 300#90a4ae
  • 400#78909c
  • 500#607d8b
  • 600#546e7a
  • 700#455a64
  • 800#37474f
  • 900#263238
  • สีซอฟต์พาสเทล
    #9BC2B2
  • 50#C5D6BA
  • 100#F2E9D3
  • 200#F6C8B6
  • 300#CA9CAC
  • 400#9292D1
  • 500#B6BBC7
  • 600#D6C3CE
  • 700#ECD4D4
  • 800#F5EED8
  • 900#F5E3CB
  • สีเบจ
    #9AA090
  • 50#f2eddd
  • 100#D3AD79
  • 200#dbcfb1
  • 300#9AA090
  • 400#f4dccb
  • สีเบจ 2
    #9b9484
  • 50#ece4d4
  • 100#d4ccc4
  • 200#e4d4bc
  • 300#c4bcac
  • 400#9b9484
  • สี Wood
    #a47454
  • 50#f9d4b4
  • 100#dbbc8c
  • 200#b49c74
  • 300#9c7d5c
  • 400#a47454
  • สี Wood 2
    #3a3420
  • 50#ae917c
  • 100#3a3420
  • 200#6c2c10
  • 300#44140c
  • 400#2e0b06

ที่มา :
https://www.designil.com/300-color-code/

ยกตัวอย่างการใช้งาน  

แท็กที่เกี่ยวกับตัวอักษร ใน HTML พื้นฐาน

<Hn> ข้อความ </Hn> กำหนดขนาดของหัวเรื่อง (Heading) เมื่อ n แทนระดับของหัว เรื่องโดยมีระดับ H1 ใหญ่สุด ถึง H6 เล็กสุด
<FONT COLOR="รหัสสีหรือชื่อสี ">ข้อความ</FONT> กำหนดสีของข้อความโดยกำหนดรหัสสี หรือ ชื่อสี
<FONT FACE="ชื่อฟอนต์">ข้อความ</FONT> กำหนดชื่อฟอนต์ที่ต้องการใช้ สามารถใส่ชื่อฟอนต์ได้หลายฟอนต์ พร้อมๆกัน
<FONT SIZE="3" >ข้อความ</FONT> กำหนดขนาดของฟอนต์ กำหนด ได้จาก 1 ถึง 7 โดยที่ 1 ขนาดเล็กสุด 7 ใหญ่สุด
<B>ข้อความ</B>หรือ
<strong>ข้อความ</strong>		 ทำข้อความให้เป็นตัวหนา
<I>ข้อความ</I> หรือ <em>ข้อความ</em> ทำข้อความให้นอนเป็นตัวเอน
<u>ข้อความ</u> ขีดเส้นใต้ข้อความ <strike>ข้อความ</strike> ขีดฆ่าข้อความ
<big>ข้อความ</big> เพิ่มขนาดอักษรขึ้นอีก 1 ระดับ
<small>ข้อความ</small> ลดขนาดตัวอักษรลง 1 ระดับ
<blink>ข้อความ</blink> ข้อความกระพริบ ใช้ได้ กับ เบราว์เซอร์บางตัว
<sub>ข้อความ</sub> แสดงข้อความแบบตัวห้อย
<sup>ข้อความ</sup> แสดงข้อความแบบตัวยกกำลัง
<comment>ข้อความ</comment> ใส่ข้อความหมายเหตุเมื่อไม่ต้องการให้ข้อความแสดง

เขียนโดย : น.ส.ศิริเบญจารัตน์   ฮาวต่อมแก้ว สอบถามข้อมูลเพิ่มเติม : siribenjarut.h@mhesi.go.th
เขียนโดย น.ส.ศิริเบญจารัตน์  ฮาวต่อมแก้ว