Loading
เลือกสีและคัดลอกค่า HEX, RGB, HSL และรูปแบบอื่นที่แสดง
ดีไซน์#6366F1
rgb(99, 102, 241)
hsl(239, 84%, 67%)
cmyk(59%, 58%, 0%, 5%)
18-3946 (baja-blue)
ลองปรับค่า HSL ความสว่าง (L) เพื่อสร้างโทนสีที่นุ่มนวลขึ้น หรือปรับ RGB ทีละนิดเพื่อหาสีที่เข้ากับแบรนด์ของคุณที่สุด
สีมีผลต่อความรู้สึกของผู้ใช้งานโดยตรง เช่น สีน้ำเงินให้ความรู้สึกน่าเชื่อถือ (Trust) สีแดงกระตุ้นความตื่นเต้น (Excitement) และสีเขียวให้ความรู้สึกปลอดภัยหรือเป็นธรรมชาติ
มาตรฐานหลักในงานเว็บดีไซน์ ประกอบด้วยรหัสฐาน 16 จำนวน 6 ตัว
ค่าความเข้มของแสง แดง, เขียว, น้ำเงิน (0-255) สำหรับงานหน้าจอ
การตั้งค่าตามมุมสี ความอิ่มตัว และความสว่าง ทำให้เลือกสีที่ดูดีได้ง่ายขึ้น
ระบบสี Cyan, Magenta, Yellow, Black สำหรับงานสิ่งพิมพ์มืออาชีพ
ระบบจับคู่สีมาตรฐาน (PMS) ที่ใช้ในงานออกแบบแบรนด์และวัสดุจริง
• สีโทนร้อน: ดึงดูดความสนใจและกระตุ้นการตัดสินใจ • สีโทนเย็น: ให้ความรู้สึกสงบและเป็นมืออาชีพ • สีกลาง (Neutral): ช่วยให้เนื้อหาอ่านง่ายและสบายตา
ลองปรับค่า HSL ความสว่าง (L) เพื่อสร้างโทนสีที่นุ่มนวลขึ้น หรือปรับ RGB ทีละนิดเพื่อหาสีที่เข้ากับแบรนด์ของคุณที่สุด
ปรับจุดสีของ gradient แบบเส้นหรือรัศมี แล้วคัดลอก CSS
สร้างเงา CSS หลายชั้นพร้อมปรับตำแหน่ง ความเบลอ การกระจาย สี และ inset
ปรับมุมโค้งแต่ละด้านเป็นพิกเซลหรือเปอร์เซ็นต์ แล้วคัดลอก CSS
สร้างชุดสีจากสีตั้งต้นและรูปแบบความสัมพันธ์สี แล้วคัดลอกค่าสี
ดูตารางสี Tailwind ที่มีในเครื่องมือและคัดลอกค่าสีหรือ utility
จำลองพื้นที่ที่อาจถูกบังบนรูปแนวตั้งสำหรับ TikTok, Reels หรือ Shorts
เลือกสีจากตัวเลือกของเบราว์เซอร์หรือแก้ค่า HEX
อ่านค่าที่แปลงในผลลัพธ์
คัดลอกรูปแบบที่ต้องการ
พบข้อมูลผิดหรือผลลัพธ์ไม่ตรง? แจ้งทีมพร้อมขั้นตอนและตัวอย่างที่ไม่มีข้อมูลลับ
ปรับจุดสีของ gradient แบบเส้นหรือรัศมี แล้วคัดลอก CSS
สร้างเงา CSS หลายชั้นพร้อมปรับตำแหน่ง ความเบลอ การกระจาย สี และ inset
ปรับมุมโค้งแต่ละด้านเป็นพิกเซลหรือเปอร์เซ็นต์ แล้วคัดลอก CSS
สร้างชุดสีจากสีตั้งต้นและรูปแบบความสัมพันธ์สี แล้วคัดลอกค่าสี
ดูตารางสี Tailwind ที่มีในเครื่องมือและคัดลอกค่าสีหรือ utility
จำลองพื้นที่ที่อาจถูกบังบนรูปแนวตั้งสำหรับ TikTok, Reels หรือ Shorts