โค้ดสี · Blue · 27 เฉด
โค้ดสีน้ำเงิน รหัสสีน้ำเงินทุกเฉด HEX RGB CMYK
โค้ดสีน้ำเงินที่หน้านี้ใช้เป็นสีตัวแทนคือน้ำเงินโคบอลต์ #0047AB หรือ RGB 0, 71, 171 และหน้านี้รวมสีน้ำเงินไว้ 27 เฉด พร้อมโค้ด HEX RGB CMYK HSL ให้แตะคัดลอกได้ทันที
- HEX
-
#0047AB - RGB
-
0, 71, 171 - CMYK
-
100, 58, 0, 33 - HSL
-
215°, 100%, 34%
น้ำเงินเป็นสีที่ใช้ได้แทบทุกงาน ตั้งแต่โลโก้บริษัท สไลด์นำเสนอ ไปจนถึงเว็บไซต์ เลือกเฉดด้านล่างแล้วกดคัดลอกค่าที่ต้องการไปวางใน Canva, Photoshop หรือ Figma ได้เลย
โค้ดสีน้ำเงินทั้ง 27 เฉด
ด้านล่างคือสีน้ำเงินทั้ง 27 เฉด เรียงจากอ่อนไปเข้ม แต่ละเฉดมีค่า HEX, RGB, CMYK และ HSL ให้แตะคัดลอกได้ทีละค่า เฉดที่มีป้าย "มาตรฐาน CSS" (11 เฉด) ใช้ค่าตามตารางชื่อสีมาตรฐานของ W3C พิมพ์ชื่อสีนั้นในโค้ด CSS ได้ตรง ๆ ส่วนเฉดที่มีป้าย "ค่าที่นิยมใช้" (16 เฉด) เป็นค่าที่ ThaiGraph เลือกให้ตรงกับชื่อเรียกที่คนไทยใช้ ไม่ใช่ค่ามาตรฐาน และแต่ละคนอาจเรียกสีเดียวกันต่างกันได้เล็กน้อย ความต่างของเฉดอ่อน เฉดเข้ม และโทนหม่น อธิบายไว้ที่ เฉดสีและโทนสี
- #7B68EE
น้ำเงิน
สเลต กลาง Medium slate blue
มาตรฐาน CSS
mediumslateblue- HEX
-
#7B68EE - RGB
-
123, 104, 238 - CMYK
-
48, 56, 0, 7 - HSL
-
249°, 80%, 67%
- #6495ED
น้ำเงิน
ดอก คอร์นฟลาวเวอร์ Cornflower blue
มาตรฐาน CSS
cornflowerblue- HEX
-
#6495ED - RGB
-
100, 149, 237 - CMYK
-
58, 37, 0, 7 - HSL
-
219°, 79%, 66%
- #2E5BFF
น้ำเงิน
ไฟฟ้า Electric blue
ค่าที่นิยมใช้
- HEX
-
#2E5BFF - RGB
-
46, 91, 255 - CMYK
-
82, 64, 0, 0 - HSL
-
227°, 100%, 59%
- #6A5ACD
น้ำเงิน
อม ม่วง สเลต Slate blue
มาตรฐาน CSS
slateblue- HEX
-
#6A5ACD - RGB
-
106, 90, 205 - CMYK
-
48, 56, 0, 20 - HSL
-
248°, 53%, 58%
- #4169E1
น้ำเงิน
รอยัล Royal blue
มาตรฐาน CSS
royalblue- HEX
-
#4169E1 - RGB
-
65, 105, 225 - CMYK
-
71, 53, 0, 12 - HSL
-
225°, 73%, 57%
- #3F48CC
น้ำเงิน
อุลตรามารีน Ultramarine
ค่าที่นิยมใช้
- HEX
-
#3F48CC - RGB
-
63, 72, 204 - CMYK
-
69, 65, 0, 20 - HSL
-
236°, 58%, 52%
- #5D7FA8
น้ำเงิน
ยีนส์ ซีด Faded denim
ค่าที่นิยมใช้
- HEX
-
#5D7FA8 - RGB
-
93, 127, 168 - CMYK
-
45, 24, 0, 34 - HSL
-
213°, 30%, 51%
- #5A7BA6
น้ำเงิน
ตุ่น Dusty blue
ค่าที่นิยมใช้
- HEX
-
#5A7BA6 - RGB
-
90, 123, 166 - CMYK
-
46, 26, 0, 35 - HSL
-
214°, 30%, 50%
- #0000FF
น้ำเงิน
สด Blue
มาตรฐาน CSS
blue- HEX
-
#0000FF - RGB
-
0, 0, 255 - CMYK
-
100, 100, 0, 0 - HSL
-
240°, 100%, 50%
- #4682B4
น้ำเงิน
เหล็ก Steel blue
มาตรฐาน CSS
steelblue- HEX
-
#4682B4 - RGB
-
70, 130, 180 - CMYK
-
61, 28, 0, 29 - HSL
-
207°, 44%, 49%
- #1C39BB
น้ำเงิน
เปอร์เซีย Persian blue
ค่าที่นิยมใช้
- HEX
-
#1C39BB - RGB
-
28, 57, 187 - CMYK
-
85, 70, 0, 27 - HSL
-
229°, 74%, 42%
- #1560BD
น้ำเงิน
ยีนส์ Denim
ค่าที่นิยมใช้
- HEX
-
#1560BD - RGB
-
21, 96, 189 - CMYK
-
89, 49, 0, 26 - HSL
-
213°, 80%, 41%
- #0000CD
น้ำเงิน
กลาง Medium blue
มาตรฐาน CSS
mediumblue- HEX
-
#0000CD - RGB
-
0, 0, 205 - CMYK
-
100, 100, 0, 20 - HSL
-
240°, 100%, 40%
- #0F52BA
น้ำเงิน
แซฟไฟร์ Sapphire
ค่าที่นิยมใช้
- HEX
-
#0F52BA - RGB
-
15, 82, 186 - CMYK
-
92, 56, 0, 27 - HSL
-
216°, 85%, 39%
- #483D8B
น้ำเงิน
สเลต เข้ม Dark slate blue
มาตรฐาน CSS
darkslateblue- HEX
-
#483D8B - RGB
-
72, 61, 139 - CMYK
-
48, 56, 0, 45 - HSL
-
248°, 39%, 39%
- #22409A
น้ำเงิน
คราม Indigo dye blue
ค่าที่นิยมใช้
- HEX
-
#22409A - RGB
-
34, 64, 154 - CMYK
-
78, 58, 0, 40 - HSL
-
225°, 64%, 37%
- #0047AB
น้ำเงิน
โคบอลต์ Cobalt blue
ค่าที่นิยมใช้
- HEX
-
#0047AB - RGB
-
0, 71, 171 - CMYK
-
100, 58, 0, 33 - HSL
-
215°, 100%, 34%
- #1F5F8B
น้ำเงิน
อม เขียว Teal blue
ค่าที่นิยมใช้
- HEX
-
#1F5F8B - RGB
-
31, 95, 139 - CMYK
-
78, 32, 0, 45 - HSL
-
204°, 64%, 33%
- #2B2F77
น้ำเงิน
ขาบ Deep violet blue
ค่าที่นิยมใช้
- HEX
-
#2B2F77 - RGB
-
43, 47, 119 - CMYK
-
64, 61, 0, 53 - HSL
-
237°, 47%, 32%
- #0F4C81
น้ำเงิน
คลาสสิก Classic blue
ค่าที่นิยมใช้
- HEX
-
#0F4C81 - RGB
-
15, 76, 129 - CMYK
-
88, 41, 0, 49 - HSL
-
208°, 79%, 28%
- #00008B
น้ำเงิน
เข้ม Dark blue
มาตรฐาน CSS
darkblue- HEX
-
#00008B - RGB
-
0, 0, 139 - CMYK
-
100, 100, 0, 45 - HSL
-
240°, 100%, 27%
- #191970
น้ำเงิน
เที่ยงคืน Midnight blue
มาตรฐาน CSS
midnightblue- HEX
-
#191970 - RGB
-
25, 25, 112 - CMYK
-
78, 78, 0, 56 - HSL
-
240°, 64%, 27%
- #005F86
น้ำเงิน
นกยูง Peacock blue
ค่าที่นิยมใช้
- HEX
-
#005F86 - RGB
-
0, 95, 134 - CMYK
-
100, 29, 0, 47 - HSL
-
197°, 100%, 26%
- #000080
น้ำเงิน
กรมท่า Navy
มาตรฐาน CSS
navy- HEX
-
#000080 - RGB
-
0, 0, 128 - CMYK
-
100, 100, 0, 50 - HSL
-
240°, 100%, 25%
- #1B2A4A
น้ำเงิน
หมึก Ink blue
ค่าที่นิยมใช้
- HEX
-
#1B2A4A - RGB
-
27, 42, 74 - CMYK
-
64, 43, 0, 71 - HSL
-
221°, 47%, 20%
- #003153
น้ำเงิน
ปรัสเซียน Prussian blue
ค่าที่นิยมใช้
- HEX
-
#003153 - RGB
-
0, 49, 83 - CMYK
-
100, 41, 0, 67 - HSL
-
205°, 100%, 16%
- #0B1630
น้ำเงิน
อม ดำ Blue black
ค่าที่นิยมใช้
- HEX
-
#0B1630 - RGB
-
11, 22, 48 - CMYK
-
77, 54, 0, 81 - HSL
-
222°, 63%, 12%
ค่า CMYK ในหน้านี้คำนวณจากค่าสีบนจอด้วยสูตรแปลงพื้นฐาน ใช้เป็นจุดตั้งต้นได้ดี แต่สีที่พิมพ์ออกมาจริงขึ้นกับกระดาษ หมึก และโปรไฟล์สีของโรงพิมพ์ งานที่สีต้องตรงควรขอปรู๊ฟก่อนเสมอ ความต่างของ RGB กับ CMYK อ่านต่อได้ที่ CMYK กับ RGB ต่างกันอย่างไร
พาเล็ตต์สีน้ำเงินพร้อมใช้
พาเล็ตต์ 4 ชุดนี้จับคู่สีน้ำเงินกับสีพื้น สีตัวหนังสือ และสีเน้นไว้ให้แล้ว แตะสีใดก็ได้เพื่อคัดลอกโค้ดทีละสี หรือกด "คัดลอกทั้งชุด" เพื่อเอาไปวางทีเดียวครบ 5 สี ลำดับสีในแต่ละชุดไม่ได้บังคับ ลองสลับว่าสีไหนเป็นพื้นหลังและสีไหนเป็นตัวหนังสือ แล้วตรวจความอ่านง่ายด้วยตารางค่าคอนทราสต์ด้านล่าง หรือแปลงค่าเป็นรูปแบบอื่นด้วย เครื่องมือแปลงโค้ดสี
-
องค์กรมั่นคง
#0B1630#0F4C81#5A7BA6#E8EEF5#F2A541 -
ยีนส์ฟอก
#1560BD#5D7FA8#A9BCD6#F4F1EA#2B2B2B -
ทะเลลึก
#003153#005F86#1F5F8B#7FB3D5#EAF4FB -
น้ำเงินกับส้ม
#0047AB#4169E1#F7F7F7#FF8C42#1B2A4A
สีน้ำเงินเข้ากับสีอะไร
สีที่ตัดกับน้ำเงินโคบอลต์ได้ชัดที่สุดคือสีตรงข้ามบนวงจรสี #AB6400 ส่วนสีที่กลมกลืนที่สุดคือสีข้างเคียง #009DAB และ #0F00AB ทุกค่าด้านล่างคำนวณจากน้ำเงินโคบอลต์ #0047AB ด้วยการหมุนค่าเฉดสี (Hue) ในระบบ HSL โดยคงความสด (Saturation) และความสว่าง (Lightness) ไว้เท่าเดิม ชื่อที่กำกับใต้สีคือเฉดในคลังที่ดูใกล้เคียงที่สุด ถ้าไม่มีเฉดไหนใกล้พอจะแสดงเพียงองศาที่หมุน หลักการของแต่ละแบบอ่านต่อได้ที่ สีคู่ตรงข้าม และ วงจรสี
-
คู่ตรงข้าม Complementary · +180°
ตัดกันแรงที่สุด ใช้สีหนึ่งเป็นสีหลักและให้อีกสีเป็นจุดเน้นเล็ก ๆ เช่น ปุ่มหรือหัวข้อ
#0047ABน้ำเงิน
โคบอลต์ สีตั้งต้น#AB6400ไม่มีชื่อเฉดในคลัง +180°
-
สีข้างเคียง Analogous · -30° / +30°
กลมกลืนและสบายตา เหมาะกับพื้นหลัง ภาพประกอบ และงานที่ต้องการอารมณ์เดียวกันทั้งหน้า
#0047ABน้ำเงิน
โคบอลต์ สีตั้งต้น#009DABไม่มีชื่อเฉดในคลัง -30°
#0F00ABไม่มีชื่อเฉดในคลัง +30°
-
สามเส้า Triadic · +120° / +240°
สดใสและสมดุล ควรให้สีหนึ่งเด่นที่สุด แล้วใช้อีกสองสีเป็นสีรองในพื้นที่เล็กกว่า
-
คู่ตรงข้ามแยก Split complementary · +150° / +210°
ตัดกันชัดแต่ไม่แรงเท่าคู่ตรงข้าม จับคู่ง่ายกว่าและพลาดยากกว่า
ตัวหนังสือบนสีน้ำเงินควรเป็นสีอะไร
บนน้ำเงินโคบอลต์ #0047AB ตัวหนังสือสีขาวอ่านง่ายกว่า ได้ค่าคอนทราสต์ 8.43:1 ส่วนตัวหนังสือสีดำได้ 2.48:1 เกณฑ์ขั้นต่ำของ WCAG 2.2 (ระดับ AA) คือคอนทราสต์ระหว่างตัวหนังสือกับพื้นหลังอย่างน้อย 4.5:1 สำหรับตัวหนังสือขนาดปกติ และ 3:1 สำหรับตัวหนังสือขนาดใหญ่ (อย่างน้อย 18pt หรือ 14pt ตัวหนา) ตารางด้านล่างคำนวณค่านี้ให้สีน้ำเงินอีกหลายเฉด เพื่อเลือกสีตัวหนังสือได้ถูกตั้งแต่แรก
| เฉด | ตัวหนังสือขาว | ตัวหนังสือดำ |
|---|---|---|
| น้ำเงิน | 4.15:1 ผ่านเฉพาะตัวใหญ่ | 5.05:1 ผ่าน · แนะนำ |
| น้ำเงิน | 5.30:1 ผ่าน · แนะนำ | 3.95:1 ผ่านเฉพาะตัวใหญ่ |
| น้ำเงิน | 4.14:1 ผ่านเฉพาะตัวใหญ่ | 5.06:1 ผ่าน · แนะนำ |
| น้ำเงิน | 4.10:1 ผ่านเฉพาะตัวใหญ่ | 5.11:1 ผ่าน · แนะนำ |
| น้ำเงิน | 11.16:1 ผ่าน · แนะนำ | 1.88:1 ไม่ผ่าน |
| น้ำเงิน | 9.25:1 ผ่าน · แนะนำ | 2.26:1 ไม่ผ่าน |
| น้ำเงิน | 8.43:1 ผ่าน · แนะนำ | 2.48:1 ไม่ผ่าน |
| น้ำเงิน | 11.82:1 ผ่าน · แนะนำ | 1.77:1 ไม่ผ่าน |
| น้ำเงิน | 14.84:1 ผ่าน · แนะนำ | 1.41:1 ไม่ผ่าน |
สีน้ำเงินให้ความรู้สึกแบบไหน
พจนานุกรมฉบับราชบัณฑิตยสถานให้ความหมายของคำว่า "น้ำเงิน" ในฐานะชื่อสีว่า "สีอย่างสีคราม" ซึ่งเป็นนิยามที่ใช้อ้างอิงได้เมื่อต้องอธิบายสีนี้เป็นภาษาไทย
น้ำเงินเข้มอย่างกรมท่าหรือน้ำเงินคลาสสิกให้ภาพที่สุขุมและเป็นทางการ จึงเห็นบ่อยในงานของธนาคาร โรงพยาบาล และหน่วยงาน ส่วนน้ำเงินสดอย่างโคบอลต์หรือน้ำเงินไฟฟ้าดูทันสมัยและมีพลังกว่ามาก เหมาะกับแบรนด์เทคโนโลยีหรืองานที่อยากให้คนหยุดมอง
จุดที่ควรระวังคือน้ำเงินสดจัดอย่าง #0000FF จะดูแสบตาบนจอถ้าใช้เป็นพื้นที่ใหญ่ ในงานจริงนักออกแบบมักลดความสดลงเล็กน้อย หรือเลือกเฉดที่มีเทาเจืออย่างน้ำเงินตุ่นมาเป็นพื้น แล้วเก็บน้ำเงินสดไว้ใช้กับปุ่มหรือจุดที่ต้องการให้เด่น
ความหมายของสีในวัฒนธรรมไทย เช่น สีกับงานมงคลและงานพิธี อ่านต่อได้ที่ จิตวิทยาสีไทย
เคล็ดลับใช้สีน้ำเงินในงานออกแบบ
หลักง่าย ๆ คือให้สีน้ำเงินมีบทบาทเดียวในงาน จะเป็นสีหลัก สีพื้น หรือสีเน้นก็ได้ แล้วเลือกสีอื่นมารับบทที่เหลือให้ชัดเจน เคล็ดลับด้านล่างใช้ได้ทั้งงานพิมพ์และงานบนจอ
- ใช้น้ำเงินเข้มเป็นสีตัวหนังสือบนพื้นขาวแทนสีดำได้ อ่านง่ายและดูนุ่มกว่า
- จับคู่น้ำเงินกับส้มหรือเหลืองเพื่อให้ปุ่มหรือข้อความสำคัญเด่นขึ้นมาทันที
- งานพิมพ์ที่ใช้น้ำเงินพื้นที่ใหญ่ ควรขอปรู๊ฟสีจากโรงพิมพ์ เพราะน้ำเงินบนจอมักสดกว่าบนกระดาษ
- ถ้าต้องการน้ำเงินหลายระดับในงานเดียว ให้คุมโทนเดียวกันแล้วไล่ความสว่าง แทนการผสมน้ำเงินคนละโทน
วิธีนำโค้ดสีน้ำเงินไปใช้
แตะค่า HEX ในตารางเพื่อคัดลอก แล้ววางในช่องรหัสสีของโปรแกรมได้ทันที ใช้ได้ทั้ง Canva, Figma, Photoshop และ Illustrator ส่วน Microsoft Word ให้ไปที่ More Colors แล้ววางค่า HEX ในช่อง Hex ของแท็บ Custom (Word รุ่นเก่าที่ไม่มีช่องนี้ให้ใส่ค่า RGB แทน) ขั้นตอนของแต่ละโปรแกรมอยู่ที่ หน้ารวมโค้ดสี ถ้ามีโค้ดสีในรูปแบบอื่นอยู่แล้ว เช่น CMYK จากโรงพิมพ์ แปลงกลับเป็น HEX ได้ที่ เครื่องมือแปลงโค้ดสี
โค้ดสีตระกูลอื่น
ThaiGraph รวมโค้ดสีไว้ 19 ตระกูล รวม 450 เฉด เลือกตระกูลที่ต้องการด้านล่าง หรือดูทุกเฉดในหน้าเดียวพร้อมช่องค้นหาที่ รวมโค้ดสี ส่วนสีไทยโบราณอยู่ที่ สีไทย Thaitone
ตรวจสอบข้อมูลเมื่อ November 2026
แหล่งอ้างอิง
- ค่า HEX ของเฉดที่มีป้าย "มาตรฐาน CSS" ทั้ง 11 เฉด (เช่น blue = #0000FF) ตามตารางชื่อสีมาตรฐาน—W3C, CSS Color Module Level 4 — §6.1 Named Colors (accessed Nov 3, 2026)
- ความหมายของคำว่า "น้ำเงิน": "สีอย่างสีคราม"—พจนานุกรมฉบับราชบัณฑิตยสถาน (ฉบับออนไลน์) สำนักงานราชบัณฑิตยสภา (accessed Nov 3, 2026)
- โค้ด HEX 6 หลักคือค่าแดง เขียว และน้ำเงิน คู่ละ 2 หลัก ในระบบเลขฐานสิบหก—W3C, CSS Color Module Level 4 — §5.2 The RGB Hexadecimal Notations (accessed Nov 3, 2026)
- เกณฑ์คอนทราสต์ขั้นต่ำ 4.5:1 สำหรับตัวหนังสือขนาดปกติ และ 3:1 สำหรับตัวหนังสือขนาดใหญ่ (อย่างน้อย 18pt หรือ 14pt ตัวหนา)—W3C, Understanding WCAG 2.2 — Success Criterion 1.4.3 Contrast (Minimum) (accessed Nov 3, 2026)