ข้ามไปยังเนื้อหา

โค้ดสี · Blue · 27 เฉด

โค้ดสีน้ำเงิน รหัสสีน้ำเงินทุกเฉด HEX RGB CMYK

โค้ดสีน้ำเงินที่หน้านี้ใช้เป็นสีตัวแทนคือน้ำเงินโคบอลต์ #0047AB หรือ RGB 0, 71, 171 และหน้านี้รวมสีน้ำเงินไว้ 27 เฉด พร้อมโค้ด HEX RGB CMYK HSL ให้แตะคัดลอกได้ทันที

น้ำเงินโคบอลต์ Cobalt blue
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

    มาตรฐาน CSSmediumslateblue

    HEX
    #7B68EE
    RGB
    123, 104, 238
    CMYK
    48, 56, 0, 7
    HSL
    249°, 80%, 67%
  • #6495ED

    น้ำเงินดอกคอร์นฟลาวเวอร์

    Cornflower blue

    มาตรฐาน CSScornflowerblue

    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

    มาตรฐาน CSSslateblue

    HEX
    #6A5ACD
    RGB
    106, 90, 205
    CMYK
    48, 56, 0, 20
    HSL
    248°, 53%, 58%
  • #4169E1

    น้ำเงินรอยัล

    Royal blue

    มาตรฐาน CSSroyalblue

    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

    มาตรฐาน CSSblue

    HEX
    #0000FF
    RGB
    0, 0, 255
    CMYK
    100, 100, 0, 0
    HSL
    240°, 100%, 50%
  • #4682B4

    น้ำเงินเหล็ก

    Steel blue

    มาตรฐาน CSSsteelblue

    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

    มาตรฐาน CSSmediumblue

    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

    มาตรฐาน CSSdarkslateblue

    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

    มาตรฐาน CSSdarkblue

    HEX
    #00008B
    RGB
    0, 0, 139
    CMYK
    100, 100, 0, 45
    HSL
    240°, 100%, 27%
  • #191970

    น้ำเงินเที่ยงคืน

    Midnight blue

    มาตรฐาน CSSmidnightblue

    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

    มาตรฐาน CSSnavy

    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°

    สดใสและสมดุล ควรให้สีหนึ่งเด่นที่สุด แล้วใช้อีกสองสีเป็นสีรองในพื้นที่เล็กกว่า

    #0047AB

    น้ำเงินโคบอลต์ สีตั้งต้น

    #47AB00

    ไม่มีชื่อเฉดในคลัง +240°

  • คู่ตรงข้ามแยก Split complementary · +150° / +210°

    ตัดกันชัดแต่ไม่แรงเท่าคู่ตรงข้าม จับคู่ง่ายกว่าและพลาดยากกว่า

    #0047AB

    น้ำเงินโคบอลต์ สีตั้งต้น

    #9DAB00

    ไม่มีชื่อเฉดในคลัง +210°

ตัวหนังสือบนสีน้ำเงินควรเป็นสีอะไร

บนน้ำเงินโคบอลต์ #0047AB ตัวหนังสือสีขาวอ่านง่ายกว่า ได้ค่าคอนทราสต์ 8.43:1 ส่วนตัวหนังสือสีดำได้ 2.48:1 เกณฑ์ขั้นต่ำของ WCAG 2.2 (ระดับ AA) คือคอนทราสต์ระหว่างตัวหนังสือกับพื้นหลังอย่างน้อย 4.5:1 สำหรับตัวหนังสือขนาดปกติ และ 3:1 สำหรับตัวหนังสือขนาดใหญ่ (อย่างน้อย 18pt หรือ 14pt ตัวหนา) ตารางด้านล่างคำนวณค่านี้ให้สีน้ำเงินอีกหลายเฉด เพื่อเลือกสีตัวหนังสือได้ถูกตั้งแต่แรก

ตัวหนังสือสีขาว Aa 8.43:1 · ผ่าน
ตัวหนังสือสีดำ Aa 2.48:1 · ไม่ผ่าน
เฉดตัวหนังสือขาวตัวหนังสือดำ
น้ำเงินสเลตกลาง#7B68EE 4.15:1 ผ่านเฉพาะตัวใหญ่ 5.05:1 ผ่าน · แนะนำ
น้ำเงินอมม่วงสเลต#6A5ACD 5.30:1 ผ่าน · แนะนำ 3.95:1 ผ่านเฉพาะตัวใหญ่
น้ำเงินยีนส์ซีด#5D7FA8 4.14:1 ผ่านเฉพาะตัวใหญ่ 5.06:1 ผ่าน · แนะนำ
น้ำเงินเหล็ก#4682B4 4.10:1 ผ่านเฉพาะตัวใหญ่ 5.11:1 ผ่าน · แนะนำ
น้ำเงินกลาง#0000CD 11.16:1 ผ่าน · แนะนำ 1.88:1 ไม่ผ่าน
น้ำเงินคราม#22409A 9.25:1 ผ่าน · แนะนำ 2.26:1 ไม่ผ่าน
น้ำเงินโคบอลต์#0047AB 8.43:1 ผ่าน · แนะนำ 2.48:1 ไม่ผ่าน
น้ำเงินขาบ#2B2F77 11.82:1 ผ่าน · แนะนำ 1.77:1 ไม่ผ่าน
น้ำเงินเที่ยงคืน#191970 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

แหล่งอ้างอิง

  1. ค่า HEX ของเฉดที่มีป้าย "มาตรฐาน CSS" ทั้ง 11 เฉด (เช่น blue = #0000FF) ตามตารางชื่อสีมาตรฐาน—W3C, CSS Color Module Level 4 — §6.1 Named Colors (accessed Nov 3, 2026)
  2. ความหมายของคำว่า "น้ำเงิน": "สีอย่างสีคราม"—พจนานุกรมฉบับราชบัณฑิตยสถาน (ฉบับออนไลน์) สำนักงานราชบัณฑิตยสภา (accessed Nov 3, 2026)
  3. โค้ด HEX 6 หลักคือค่าแดง เขียว และน้ำเงิน คู่ละ 2 หลัก ในระบบเลขฐานสิบหก—W3C, CSS Color Module Level 4 — §5.2 The RGB Hexadecimal Notations (accessed Nov 3, 2026)
  4. เกณฑ์คอนทราสต์ขั้นต่ำ 4.5:1 สำหรับตัวหนังสือขนาดปกติ และ 3:1 สำหรับตัวหนังสือขนาดใหญ่ (อย่างน้อย 18pt หรือ 14pt ตัวหนา)—W3C, Understanding WCAG 2.2 — Success Criterion 1.4.3 Contrast (Minimum) (accessed Nov 3, 2026)