เครื่องมือเลือกสีและแปลงสี

ฟรี 100% และไม่จำกัด: เลือกสีไม่จำกัดและแปลงระหว่างรูปแบบโดยไม่ต้องลงทะเบียน ไม่มีโฆษณา หรือข้อจำกัด

แปลงแบบเรียลไทม์: ดูค่า HEX, RGB และ HSL อัปเดตทันทีเมื่อคุณเลือกสี ไม่ต้องคำนวณเอง

พร้อมสำหรับนักพัฒนา: สร้างตัวแปร CSS, ตัวแปร SCSS และส่งออก JSON พร้อมใช้ในโปรเจกต์ของคุณ

สีพรีเซ็ต 50+ สี: เข้าถึงสียอดนิยมจาก Material Design และ Tailwind CSS อย่างรวดเร็ว ไม่ต้องจำรหัสสี

ปกป้องความเป็นส่วนตัว: การเลือกสีและแปลงทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ ไม่มีข้อมูลถูกอัปโหลดหรือจัดเก็บ

คัดลอกคลิกเดียว: คัดลอกรูปแบบสีใดก็ได้ (HEX, RGB, HSL) ไปยังคลิปบอร์ดทันทีเพื่อใช้ในการออกแบบ

HEX (เลขฐานสิบหก): รูปแบบที่ใช้มากที่สุดสำหรับการออกแบบเว็บ ใช้ 6 ตัวอักษร (0-9, A-F) นำหน้าด้วย # ตัวอย่าง: #3b82f6 2 ตัวแรก = แดง, 2 ตัวกลาง = เขียว, 2 ตัวสุดท้าย = น้ำเงิน แต่ละคู่มีค่าตั้งแต่ 00 (0) ถึง FF (255)

RGB (แดง, เขียว, น้ำเงิน): โมเดลสีแบบเพิ่มที่ใช้สามค่าตั้งแต่ 0-255 ตัวอย่าง: rgb(59, 130, 246) รองรับอย่างกว้างขวางใน CSS เข้าใจง่ายและปรับแต่งช่องสีแต่ละช่อง เหมาะสำหรับการจัดการสีด้วยโปรแกรม

HSL (เฉดสี, ความอิ่มตัว, ความสว่าง): เข้าใจง่ายกว่าสำหรับมนุษย์ เฉดสี (0-360°) = ตำแหน่งบนวงล้อสี, ความอิ่มตัว (0-100%) = ความเข้มของสี, ความสว่าง (0-100%) = ความสว่าง ตัวอย่าง: hsl(217, 91%, 60%) สร้างรูปแบบสีได้ง่ายกว่า

การพัฒนาเว็บ: เลือกสีสำหรับเว็บไซต์ แปลงสีแบรนด์เป็นรูปแบบ CSS สร้างตัวแปร CSS สำหรับธีมที่สม่ำเสมอ สร้างชุดสี จับคู่ดีไซน์ mock-up อย่างแม่นยำ

การออกแบบกราฟิก: แปลงสีระหว่างเครื่องมือออกแบบ (Figma เป็น Photoshop) ค้นหารหัสสีที่แน่นอนจากแนวทางแบรนด์ สร้างชุดสี จับคู่สีจากภาพ

การออกแบบแบรนด์: กำหนดสีหลัก สีรอง และสีเน้นในหลายรูปแบบ สร้างคู่มือสไตล์แบรนด์พร้อมรหัสสีทั้งหมด รับรองความสม่ำเสมอข้ามแพลตฟอร์ม

การออกแบบ UI/UX: เลือกชุดสีที่เข้าถึงได้ สร้างชุดสีโหมดมืด สร้างรูปแบบสี (hover states, disabled states) ทดสอบคอนทราสต์สี

การพัฒนาแอป: แปลงสีเว็บเป็นรูปแบบแอปมือถือ (Android XML, iOS Swift) สร้างไฟล์ธีม ใช้สี Material Design

โซเชียลมีเดีย: ได้รหัสสีที่แน่นอนสำหรับความสม่ำเสมอของแบรนด์ สร้างโพสต์สี แชร์ชุดสีกับทีม รักษาอัตลักษณ์ทางภาพ

สีหลัก: ใช้เครื่องมือเลือกสีเพื่อกำหนดสีแบรนด์หลัก สร้าง 5 เฉดสี (สว่างถึงมืด) สำหรับ UI ที่สม่ำเสมอ

สีรอง: เลือกสีเสริม (ตรงข้ามบนวงล้อสี) สำหรับสีเน้น CTA และความน่าสนใจทางภาพ

สีกลาง: เลือกสีเทาสำหรับข้อความ ขอบ และพื้นหลัง ใช้ HSL เพื่อสร้างสเกลเทาได้ง่ายโดยปรับความสว่าง

สีความหมาย: กำหนดสีสำเร็จ (เขียว), คำเตือน (เหลือง), ข้อผิดพลาด (แดง) และข้อมูล (น้ำเงิน) สำหรับ UI feedback

HEX เป็น RGB: เครื่องมือของเราแปลงอัตโนมัติ ด้วยตนเอง: แบ่ง hex เป็นคู่ แปลงแต่ละคู่จาก hex เป็นทศนิยม #3b82f6 → 3b=59, 82=130, f6=246

RGB เป็น HEX: แปลงแต่ละค่า (0-255) เป็นเลขฐานสิบหก (00-FF) รวมกับ # rgb(59, 130, 246) → #3b82f6

RGB เป็น HSL: การคำนวณซับซ้อนเกี่ยวกับการหาค่า RGB สูงสุด/ต่ำสุด คำนวณเฉดสีจากสีหลัก ความอิ่มตัวจากความบริสุทธิ์ของสี ความสว่างจากความสว่าง ใช้เครื่องมือของเราสำหรับการแปลงทันที

HSL เป็น RGB: การคำนวณย้อนกลับ สูตรต่างกันสำหรับช่วงเฉดสีต่างๆ เครื่องมือเลือกสีของเราจัดการสิ่งนี้โดยอัตโนมัติ

TXT: ข้อความธรรมดาพร้อมรูปแบบสีทั้งหมด เหมาะสำหรับการอ้างอิงด่วน เอกสาร การแชร์กับผู้ที่ไม่ใช่นักพัฒนา

CSS: คุณสมบัติกำหนดเอง CSS พร้อมใช้ใน :root คัดลอกลงในสไตล์ชีตโดยตรง รวม HEX, RGB และ HSL

SCSS: ตัวแปร Sass/SCSS พร้อมนำหน้า $ เหมาะสำหรับเวิร์กโฟลว์ preprocessor รองรับ Node-sass และ Dart Sass

JSON: รูปแบบข้อมูลโครงสร้างพร้อมข้อมูลสีทั้งหมด เหมาะสำหรับไฟล์กำหนดค่า ตัวสร้างธีม การใช้งานด้วยโปรแกรม ระบบเอกสาร