🎨 เครื่องมือแปลงโค้ดสี

เลือกสีเพื่อดูค่า HEX, RGB, HSL และ CMYK

👆 จิ้มที่นี่เพื่อเลือกสี
รองรับการใช้งานสำหรับ Web Developer และ Graphic Designer
    ✨ วิธีใช้งานใน 3 ขั้นตอน
    👆

    1. เลือกเฉดสีที่ต้องการ

    คลิกที่ กล่องสี หรือจิ้มที่แถบสเปกตรัมเพื่อค้นหาเฉดสีที่คุณถูกใจ

    🔄

    2. ระบบแปลงค่าให้อัตโนมัติ

    ได้ครบทั้งรหัส HEX (เว็บ), RGB (หน้าจอ), และ CMYK (สิ่งพิมพ์) โดยไม่ต้องคำนวณเอง

    📋

    3. กดปุ่ม Copy ไปใช้ได้เลย

    กดปุ่ม Copy เพื่อคัดลอกรหัสสี แล้วนำไปวางในโปรแกรมกราฟิกได้ทันที

เจาะลึก SEO: “โค้ดสี” คำไหนถูกค้นหาบ่อยที่สุด? พร้อมเผยกลุ่มเป้าหมายที่คุณอาจมองข้าม

🎨 Advanced Color Wheel
#
R
G
B
H
S
L
🍬 โค้ดสีพาสเทลยอดฮิต (14 สี)
ชมพูพาสเทล
#FFB6C1
เขียวมิ้นท์
#98FF98
ฟ้าอ่อน
#87CEFA
ม่วงลาเวนเดอร์
#E6E6FA
ครีมวานิลลา
#FFFDD0
สีพีช
#FFDAB9
ฟ้าพาวเดอร์
#B0E0E6
เหลืองเลมอน
#FFFACD
สีเบจ
#F5DEB3
ม่วงอ่อน
#D8BFD8
ชาเขียว
#D0F0C0
โอลด์โรส
#FFB7B2
แอปริคอท
#FBCEB1
เพอริวินเคิล
#CCCCFF
💰 โค้ดสีมงคล เรียกทรัพย์ (14 สี)
ทองคำ (Gold)
#FFD700
เงิน (Silver)
#C0C0C0
แดงนำโชค
#DC143C
เขียวเหนี่ยวทรัพย์
#50C878
ทองแดง
#CD7F32
ส้มรับทรัพย์
#FF8C00
ม่วงมหาเศรษฐี
#800080
ชมพูเมตตา
#FF1493
น้ำเงินบารมี
#000080
โรสโกลด์
#B76E79
เทอร์ควอยซ์
#40E0D0
ขาวมุก
#F5F5F5
หยก (Jade)
#00A86B
อำพัน (Amber)
#FFBF00
📅 สีประจำวันเกิด (7 วัน)
วันอาทิตย์ (แดง)
#FF3333
วันจันทร์ (เหลือง)
#FFE600
วันอังคาร (ชมพู)
#FF69B4
วันพุธ (เขียว)
#00AB00
วันพฤหัส (ส้ม)
#FF8C00
วันศุกร์ (ฟ้า)
#00BFFF
วันเสาร์ (ม่วง)
#800080
✅ คัดลอกเรียบร้อย!
🇹🇭 สีธงชาติไทย (ค่ามาตรฐานราชกิจจาฯ)
แดง (Red)
HEX #A51931
RGB 165, 25, 49
CMYK 24, 100, 83, 18
ขาว (White)
HEX #F4F5F8
RGB 244, 245, 248
CMYK 2, 1, 0, 3
น้ำเงิน (Blue)
HEX #2D2A4A
RGB 45, 42, 74
CMYK 87, 85, 42, 43
🌸 โค้ดสีชมพูพาสเทล (6 สี)
Light Pink
HEX#FFB6C1
RGB255, 182, 193
CMYK0, 29, 24, 0
Pastel Pink
HEX#FFD1DC
RGB255, 209, 220
CMYK0, 18, 14, 0
Baby Pink
HEX#F4C2C2
RGB244, 194, 194
CMYK0, 20, 20, 4
Rose Quartz
HEX#F7CAC9
RGB247, 202, 201
CMYK0, 18, 19, 3
Bubblegum
HEX#FFC1CC
RGB255, 193, 204
CMYK0, 24, 20, 0
Millennial
HEX#FFD1D8
RGB255, 209, 216
CMYK0, 18, 15, 0
✨ โค้ดสีทอง Canva (6 สี)
Metallic Gold
HEX#D4AF37
RGB212, 175, 55
CMYK0, 17, 74, 17
Web Gold
HEX#FFD700
RGB255, 215, 0
CMYK0, 16, 100, 0
Classic Gold
HEX#C5A059
RGB197, 160, 89
CMYK0, 19, 55, 23
Goldenrod
HEX#DAA520
RGB218, 165, 32
CMYK0, 24, 85, 15
Rich Gold
HEX#E5B80B
RGB229, 184, 11
CMYK0, 20, 95, 10
Old Gold
HEX#CFB53B
RGB207, 181, 59
CMYK0, 13, 72, 19
✅ คัดลอกแล้ว!
🌈 สร้างสีไล่ระดับ (CSS Gradient)
#3B82F6
#9333EA
background: linear-gradient(90deg, #3b82f6, #9333ea);
👁️ เช็คคู่สี (Contrast Checker)
www.โค้ดสี.com
ตัวอย่างข้อความทั่วไป (Normal Text)
21.00
Contrast Ratio (ยิ่งมากยิ่งดี)
ข้อความปกติ
ผ่าน (AAA)
ข้อความใหญ่
ผ่าน (AAA)
🎨 สร้างเฉดสี (Tints & Shades)
เลือกสีหลัก: #3B82F6
Tints (สีอ่อนลง / พาสเทล)
Shades (สีเข้มขึ้น)
📖 วิธีใช้งานง่ายๆ
1
เลือกสีหลัก ที่คุณต้องการจากแถบเลือกสี หรือใส่โค้ด HEX ของแบรนด์คุณ
2
ระบบจะคำนวณ Tints (สีผสมขาว) และ Shades (สีผสมดำ) ให้ทันที 12 ระดับ
3
คลิกที่แถบสี เพื่อคัดลอกรหัสโค้ดสี แล้วนำไปวางในงานออกแบบได้เลย
💡 เทคนิคการนำไปใช้ (Pro Tips)
  • Tints (สีอ่อน) ใช้ทำ "สีพื้นหลัง (Background)" เพื่อให้ข้อความสีหลักดูโดดเด่นขึ้น
  • Shades (สีเข้ม) ใช้ทำ "เงา (Shadow)", "เส้นขอบ (Border)" หรือ "สีปุ่มตอนเอาเมาส์ชี้ (Hover State)"
  • Contrast การใช้สี Tints คู่กับ Shades จะช่วยให้อ่านง่ายและดูสบายตากว่าการใช้สีดำสนิท