โค้ดสี · Light blue · 28 เฉด
สีฟ้า โค้ดสีฟ้าทุกเฉด รหัสสี HEX RGB CMYK
โค้ดสีฟ้าที่หน้านี้ใช้เป็นสีตัวแทนคือฟ้าท้องฟ้า #87CEEB หรือ RGB 135, 206, 235 ซึ่งเป็นชื่อสีมาตรฐาน CSS skyblue และหน้านี้รวมสีฟ้าไว้ 28 เฉด พร้อมโค้ด HEX RGB CMYK HSL ให้แตะคัดลอกได้ทันที
- HEX
-
#87CEEB - RGB
-
135, 206, 235 - CMYK
-
43, 12, 0, 8 - HSL
-
197°, 71%, 73%
สีฟ้าคือน้ำเงินในเฉดที่สว่างขึ้น ให้ความรู้สึกโล่ง สะอาด และเป็นมิตร หน้านี้รวมทั้งฟ้าอ่อนแบบพาสเทล ฟ้าสดแบบท้องฟ้ากลางวัน และฟ้าอมเขียวแบบน้ำทะเล
โค้ดสีฟ้าทั้ง 28 เฉด
ด้านล่างคือสีฟ้าทั้ง 28 เฉด เรียงจากอ่อนไปเข้ม แต่ละเฉดมีค่า HEX, RGB, CMYK และ HSL ให้แตะคัดลอกได้ทีละค่า เฉดที่มีป้าย "มาตรฐาน CSS" (15 เฉด) ใช้ค่าตามตารางชื่อสีมาตรฐานของ W3C พิมพ์ชื่อสีนั้นในโค้ด CSS ได้ตรง ๆ ส่วนเฉดที่มีป้าย "ค่าที่นิยมใช้" (13 เฉด) เป็นค่าที่ ThaiGraph เลือกให้ตรงกับชื่อเรียกที่คนไทยใช้ ไม่ใช่ค่ามาตรฐาน และแต่ละคนอาจเรียกสีเดียวกันต่างกันได้เล็กน้อย ความต่างของเฉดอ่อน เฉดเข้ม และโทนหม่น อธิบายไว้ที่ เฉดสีและโทนสี
- #E0FFFF
ฟ้า
ไซแอน อ่อน Light cyan
มาตรฐาน CSS
lightcyan- HEX
-
#E0FFFF - RGB
-
224, 255, 255 - CMYK
-
12, 0, 0, 0 - HSL
-
180°, 100%, 94%
- #D6ECF3
ฟ้า
น้ำ แข็ง Ice blue
ค่าที่นิยมใช้
- HEX
-
#D6ECF3 - RGB
-
214, 236, 243 - CMYK
-
12, 3, 0, 5 - HSL
-
194°, 55%, 90%
- #C9DDF0
ฟ้า
ซีด Pale blue
ค่าที่นิยมใช้
- HEX
-
#C9DDF0 - RGB
-
201, 221, 240 - CMYK
-
16, 8, 0, 6 - HSL
-
209°, 57%, 86%
- #AFEEEE
ฟ้า
เทอร์ควอยซ์ อ่อน Pale turquoise
มาตรฐาน CSS
paleturquoise- HEX
-
#AFEEEE - RGB
-
175, 238, 238 - CMYK
-
26, 0, 0, 7 - HSL
-
180°, 65%, 81%
- #B0E0E6
ฟ้า
แป้ง Powder blue
มาตรฐาน CSS
powderblue- HEX
-
#B0E0E6 - RGB
-
176, 224, 230 - CMYK
-
23, 3, 0, 10 - HSL
-
187°, 52%, 80%
- #ADD8E6
ฟ้า
อ่อน Light blue
มาตรฐาน CSS
lightblue- HEX
-
#ADD8E6 - RGB
-
173, 216, 230 - CMYK
-
25, 6, 0, 10 - HSL
-
195°, 53%, 79%
- #B7C9D6
ฟ้า
หมอก Mist blue
ค่าที่นิยมใช้
- HEX
-
#B7C9D6 - RGB
-
183, 201, 214 - CMYK
-
14, 6, 0, 16 - HSL
-
205°, 27%, 78%
- #A7C7E7
ฟ้า
พาสเทล Pastel blue
ค่าที่นิยมใช้
- HEX
-
#A7C7E7 - RGB
-
167, 199, 231 - CMYK
-
28, 14, 0, 9 - HSL
-
210°, 57%, 78%
- #B0C4DE
ฟ้า
เหล็ก อ่อน Light steel blue
มาตรฐาน CSS
lightsteelblue- HEX
-
#B0C4DE - RGB
-
176, 196, 222 - CMYK
-
21, 12, 0, 13 - HSL
-
214°, 41%, 78%
- #7FFFD4
ฟ้า
อะความารีน Aquamarine
มาตรฐาน CSS
aquamarine- HEX
-
#7FFFD4 - RGB
-
127, 255, 212 - CMYK
-
50, 0, 17, 0 - HSL
-
160°, 100%, 75%
- #87CEFA
ฟ้า
ท้องฟ้า อ่อน Light sky blue
มาตรฐาน CSS
lightskyblue- HEX
-
#87CEFA - RGB
-
135, 206, 250 - CMYK
-
46, 18, 0, 2 - HSL
-
203°, 92%, 75%
- #89CFF0
ฟ้า
เบบี้บลู Baby blue
ค่าที่นิยมใช้
- HEX
-
#89CFF0 - RGB
-
137, 207, 240 - CMYK
-
43, 14, 0, 6 - HSL
-
199°, 77%, 74%
- #87CEEB
ฟ้า
ท้องฟ้า Sky blue
มาตรฐาน CSS
skyblue- HEX
-
#87CEEB - RGB
-
135, 206, 235 - CMYK
-
43, 12, 0, 8 - HSL
-
197°, 71%, 73%
- #8DA9C4
ฟ้า
หม่น Dusty sky
ค่าที่นิยมใช้
- HEX
-
#8DA9C4 - RGB
-
141, 169, 196 - CMYK
-
28, 14, 0, 23 - HSL
-
209°, 32%, 66%
- #67D3E0
ฟ้า
สระว่ายน้ำ Pool blue
ค่าที่นิยมใช้
- HEX
-
#67D3E0 - RGB
-
103, 211, 224 - CMYK
-
54, 6, 0, 12 - HSL
-
186°, 66%, 64%
- #40E0D0
ฟ้า
เทอร์ควอยซ์ Turquoise
มาตรฐาน CSS
turquoise- HEX
-
#40E0D0 - RGB
-
64, 224, 208 - CMYK
-
71, 0, 7, 12 - HSL
-
174°, 72%, 56%
- #1E90FF
ฟ้า
ด็อดเจอร์ Dodger blue
มาตรฐาน CSS
dodgerblue- HEX
-
#1E90FF - RGB
-
30, 144, 255 - CMYK
-
88, 44, 0, 0 - HSL
-
210°, 100%, 56%
- #48D1CC
ฟ้า
เทอร์ควอยซ์ กลาง Medium turquoise
มาตรฐาน CSS
mediumturquoise- HEX
-
#48D1CC - RGB
-
72, 209, 204 - CMYK
-
66, 0, 2, 18 - HSL
-
178°, 60%, 55%
- #48C9B0
ฟ้า
อม เขียว Blue green
ค่าที่นิยมใช้
- HEX
-
#48C9B0 - RGB
-
72, 201, 176 - CMYK
-
64, 0, 12, 21 - HSL
-
168°, 54%, 54%
- #00FFFF
ฟ้า
ไซแอน Cyan / Aqua
มาตรฐาน CSS
cyan- HEX
-
#00FFFF - RGB
-
0, 255, 255 - CMYK
-
100, 0, 0, 0 - HSL
-
180°, 100%, 50%
- #5F9EA0
ฟ้า
อม เทา คาเด็ต Cadet blue
มาตรฐาน CSS
cadetblue- HEX
-
#5F9EA0 - RGB
-
95, 158, 160 - CMYK
-
41, 1, 0, 37 - HSL
-
182°, 25%, 50%
- #00BFFF
ฟ้า
สด ดีปสกาย Deep sky blue
มาตรฐาน CSS
deepskyblue- HEX
-
#00BFFF - RGB
-
0, 191, 255 - CMYK
-
100, 25, 0, 0 - HSL
-
195°, 100%, 50%
- #3B83BD
ฟ้า
คราม Cerulean blue
ค่าที่นิยมใช้
- HEX
-
#3B83BD - RGB
-
59, 131, 189 - CMYK
-
69, 31, 0, 26 - HSL
-
207°, 52%, 49%
- #1AC1DD
ฟ้า
คาริบเบียน Caribbean blue
ค่าที่นิยมใช้
- HEX
-
#1AC1DD - RGB
-
26, 193, 221 - CMYK
-
88, 13, 0, 13 - HSL
-
189°, 79%, 48%
- #00AEEF
ฟ้า
ไซแอน งานพิมพ์ Process cyan (screen)
ค่าที่นิยมใช้
- HEX
-
#00AEEF - RGB
-
0, 174, 239 - CMYK
-
100, 27, 0, 6 - HSL
-
196°, 100%, 47%
- #2E8BC0
ฟ้า
น้ำ ทะเล Sea blue
ค่าที่นิยมใช้
- HEX
-
#2E8BC0 - RGB
-
46, 139, 192 - CMYK
-
76, 28, 0, 25 - HSL
-
202°, 61%, 47%
- #00CED1
ฟ้า
เทอร์ควอยซ์ เข้ม Dark turquoise
มาตรฐาน CSS
darkturquoise- HEX
-
#00CED1 - RGB
-
0, 206, 209 - CMYK
-
100, 1, 0, 18 - HSL
-
181°, 100%, 41%
- #007BA7
ฟ้า
เซรูเลียน Cerulean
ค่าที่นิยมใช้
- HEX
-
#007BA7 - RGB
-
0, 123, 167 - CMYK
-
100, 26, 0, 35 - HSL
-
196°, 100%, 33%
ค่า CMYK ในหน้านี้คำนวณจากค่าสีบนจอด้วยสูตรแปลงพื้นฐาน ใช้เป็นจุดตั้งต้นได้ดี แต่สีที่พิมพ์ออกมาจริงขึ้นกับกระดาษ หมึก และโปรไฟล์สีของโรงพิมพ์ งานที่สีต้องตรงควรขอปรู๊ฟก่อนเสมอ ความต่างของ RGB กับ CMYK อ่านต่อได้ที่ CMYK กับ RGB ต่างกันอย่างไร
พาเล็ตต์สีฟ้าพร้อมใช้
พาเล็ตต์ 4 ชุดนี้จับคู่สีฟ้ากับสีพื้น สีตัวหนังสือ และสีเน้นไว้ให้แล้ว แตะสีใดก็ได้เพื่อคัดลอกโค้ดทีละสี หรือกด "คัดลอกทั้งชุด" เพื่อเอาไปวางทีเดียวครบ 5 สี ลำดับสีในแต่ละชุดไม่ได้บังคับ ลองสลับว่าสีไหนเป็นพื้นหลังและสีไหนเป็นตัวหนังสือ แล้วตรวจความอ่านง่ายด้วยตารางค่าคอนทราสต์ด้านล่าง หรือแปลงค่าเป็นรูปแบบอื่นด้วย เครื่องมือแปลงโค้ดสี
-
ท้องฟ้าโปร่ง
#007BA7#3B83BD#87CEEB#D6ECF3#FFFFFF -
ชายหาด
#1AC1DD#67D3E0#F5E6CA#FF8C69#1B2A4A -
ฟ้าพาสเทล
#A7C7E7#C9DDF0#F8C8DC#FFF5BA#5A6B7B -
คลินิกสะอาดตา
#2E8BC0#B0E0E6#F4F8FB#48C9B0#26314A
สีฟ้าเข้ากับสีอะไร
สีที่ตัดกับฟ้าท้องฟ้าได้ชัดที่สุดคือสีตรงข้ามบนวงจรสี #EBA487 (ใกล้เคียงสีโอรส) ส่วนสีที่กลมกลืนที่สุดคือสีข้างเคียง #87EBD6 และ #879CEB ทุกค่าด้านล่างคำนวณจากฟ้าท้องฟ้า #87CEEB ด้วยการหมุนค่าเฉดสี (Hue) ในระบบ HSL โดยคงความสด (Saturation) และความสว่าง (Lightness) ไว้เท่าเดิม ชื่อที่กำกับใต้สีคือเฉดในคลังที่ดูใกล้เคียงที่สุด ถ้าไม่มีเฉดไหนใกล้พอจะแสดงเพียงองศาที่หมุน หลักการของแต่ละแบบอ่านต่อได้ที่ สีคู่ตรงข้าม และ วงจรสี
-
คู่ตรงข้าม Complementary · +180°
ตัดกันแรงที่สุด ใช้สีหนึ่งเป็นสีหลักและให้อีกสีเป็นจุดเน้นเล็ก ๆ เช่น ปุ่มหรือหัวข้อ
#87CEEBฟ้า
ท้องฟ้า สีตั้งต้น#EBA487ใกล้ สี
โอรส +180° -
สีข้างเคียง Analogous · -30° / +30°
กลมกลืนและสบายตา เหมาะกับพื้นหลัง ภาพประกอบ และงานที่ต้องการอารมณ์เดียวกันทั้งหน้า
-
สามเส้า Triadic · +120° / +240°
สดใสและสมดุล ควรให้สีหนึ่งเด่นที่สุด แล้วใช้อีกสองสีเป็นสีรองในพื้นที่เล็กกว่า
#87CEEBฟ้า
ท้องฟ้า สีตั้งต้น#EB87CEไม่มีชื่อเฉดในคลัง +120°
#CEEB87ไม่มีชื่อเฉดในคลัง +240°
-
คู่ตรงข้ามแยก Split complementary · +150° / +210°
ตัดกันชัดแต่ไม่แรงเท่าคู่ตรงข้าม จับคู่ง่ายกว่าและพลาดยากกว่า
ตัวหนังสือบนสีฟ้าควรเป็นสีอะไร
บนฟ้าท้องฟ้า #87CEEB ตัวหนังสือสีดำอ่านง่ายกว่า ได้ค่าคอนทราสต์ 12.05:1 ส่วนตัวหนังสือสีขาวได้ 1.74:1 เกณฑ์ขั้นต่ำของ WCAG 2.2 (ระดับ AA) คือคอนทราสต์ระหว่างตัวหนังสือกับพื้นหลังอย่างน้อย 4.5:1 สำหรับตัวหนังสือขนาดปกติ และ 3:1 สำหรับตัวหนังสือขนาดใหญ่ (อย่างน้อย 18pt หรือ 14pt ตัวหนา) ตารางด้านล่างคำนวณค่านี้ให้สีฟ้าอีกหลายเฉด เพื่อเลือกสีตัวหนังสือได้ถูกตั้งแต่แรก
| เฉด | ตัวหนังสือขาว | ตัวหนังสือดำ |
|---|---|---|
| ฟ้า | 1.05:1 ไม่ผ่าน | 19.91:1 ผ่าน · แนะนำ |
| ฟ้า | 1.43:1 ไม่ผ่าน | 14.65:1 ผ่าน · แนะนำ |
| ฟ้า | 1.78:1 ไม่ผ่าน | 11.79:1 ผ่าน · แนะนำ |
| ฟ้า | 1.74:1 ไม่ผ่าน | 12.05:1 ผ่าน · แนะนำ |
| ฟ้า | 3.23:1 ผ่านเฉพาะตัวใหญ่ | 6.48:1 ผ่าน · แนะนำ |
| ฟ้า | 3.05:1 ผ่านเฉพาะตัวใหญ่ | 6.88:1 ผ่าน · แนะนำ |
| ฟ้า | 2.52:1 ไม่ผ่าน | 8.30:1 ผ่าน · แนะนำ |
สีฟ้าให้ความรู้สึกแบบไหน
พจนานุกรมฉบับราชบัณฑิตยสถานให้ความหมายของคำว่า "ฟ้า" ในฐานะชื่อสีว่า "สีน้ำเงินอ่อนอย่างสีท้องฟ้าในเวลามีแดด เรียกว่า สีฟ้า" ซึ่งเป็นนิยามที่ใช้อ้างอิงได้เมื่อต้องอธิบายสีนี้เป็นภาษาไทย
สีฟ้าอ่อนดูสบายตาและไม่กดดัน จึงเหมาะกับพื้นหลังเว็บไซต์ งานสุขภาพ งานเด็ก และแบรนด์ที่อยากดูเข้าถึงง่าย ส่วนฟ้าสดอย่างฟ้าด็อดเจอร์หรือฟ้าเซรูเลียนมีพลังพอจะใช้เป็นสีปุ่มหรือสีลิงก์ได้
ฟ้าอมเขียวอย่างเทอร์ควอยซ์และฟ้าน้ำทะเลให้อารมณ์ชายหาดและฤดูร้อน ใช้ได้ดีในงานท่องเที่ยว ร้านเครื่องดื่ม และโปสเตอร์กิจกรรมกลางแจ้ง
ความหมายของสีในวัฒนธรรมไทย เช่น สีกับงานมงคลและงานพิธี อ่านต่อได้ที่ จิตวิทยาสีไทย
เคล็ดลับใช้สีฟ้าในงานออกแบบ
หลักง่าย ๆ คือให้สีฟ้ามีบทบาทเดียวในงาน จะเป็นสีหลัก สีพื้น หรือสีเน้นก็ได้ แล้วเลือกสีอื่นมารับบทที่เหลือให้ชัดเจน เคล็ดลับด้านล่างใช้ได้ทั้งงานพิมพ์และงานบนจอ
- ฟ้าอ่อนมากอย่างฟ้าน้ำแข็ง หรือขาวอมฟ้าอย่างขาวอลิซบลู เหมาะเป็นพื้นหลังกล่องข้อความ แทนสีเทาที่ดูแห้ง
- ตัวหนังสือสีขาวบนฟ้าอ่อนมักอ่านยาก ให้ใช้ตัวหนังสือสีกรมท่าหรือสีดำแทน ดูค่าคอนทราสต์ในตารางด้านบน
- ฟ้าคู่กับชมพูพาสเทลหรือเหลืองอ่อนให้ภาพสดใสแบบงานเด็กและงานเทศกาล
- ฟ้าอมเขียวคู่กับส้มคอรัลเป็นคู่สีตรงข้ามที่สดแต่ไม่แสบตา
วิธีนำโค้ดสีฟ้าไปใช้
แตะค่า HEX ในตารางเพื่อคัดลอก แล้ววางในช่องรหัสสีของโปรแกรมได้ทันที ใช้ได้ทั้ง Canva, Figma, Photoshop และ Illustrator ส่วน Microsoft Word ให้ไปที่ More Colors แล้ววางค่า HEX ในช่อง Hex ของแท็บ Custom (Word รุ่นเก่าที่ไม่มีช่องนี้ให้ใส่ค่า RGB แทน) ขั้นตอนของแต่ละโปรแกรมอยู่ที่ หน้ารวมโค้ดสี ถ้ามีโค้ดสีในรูปแบบอื่นอยู่แล้ว เช่น CMYK จากโรงพิมพ์ แปลงกลับเป็น HEX ได้ที่ เครื่องมือแปลงโค้ดสี
โค้ดสีตระกูลอื่น
ThaiGraph รวมโค้ดสีไว้ 19 ตระกูล รวม 450 เฉด เลือกตระกูลที่ต้องการด้านล่าง หรือดูทุกเฉดในหน้าเดียวพร้อมช่องค้นหาที่ รวมโค้ดสี ส่วนสีไทยโบราณอยู่ที่ สีไทย Thaitone
ตรวจสอบข้อมูลเมื่อ November 2026
แหล่งอ้างอิง
- ค่า HEX ของเฉดที่มีป้าย "มาตรฐาน CSS" ทั้ง 15 เฉด (เช่น lightblue = #ADD8E6) ตามตารางชื่อสีมาตรฐาน—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)