เว็บไซต์และแอปพลิเคชัน
เลือกสีแบรนด์ สีพื้น และสีเน้น แล้ววางโดยตรงลงในตัวแปร CSS Tailwind หรือธีม Android
Color Palette Generator — สร้างชุดสีที่เข้ากันและส่งออกเป็นโค้ด
เลือกสีพื้นฐานและธีม แล้วสร้างชุดสีที่สมดุลประกอบด้วย 3 ถึง 8 สี บันทึกสีที่คุณชอบ ตรวจสอบความชัดเจนของข้อความสีขาวและสีดำบนแต่ละสี จากนั้นคัดลอกโค้ดไปใช้เป็นตัวแปร CSS, Tailwind, Android colors.xml หรือ Jetpack Compose ทุกอย่างทำงานในเบราว์เซอร์ของคุณ และชุดสีที่บันทึกไว้จะเก็บไว้ในอุปกรณ์ของคุณ
สร้างพาเลตต์
ทำงานในเบราว์เซอร์ของคุณ
พาเลตของคุณ
เลือกสีที่คุณชอบไว้ แล้วกด Generate เพื่อเปลี่ยนสีที่เหลือ คลิกที่รหัส hex เพื่อคัดลอก คลิกที่พาเลตแล้วกด Space เพื่อสร้าง
ส่งออกเป็นโค้ด
พาเลตที่บันทึกไว้
ยังไม่มีพาเลตที่บันทึกไว้ กด "บันทึกพาเลต" เพื่อบันทึกพาเลตหนึ่งไว้บนอุปกรณ์นี้
คู่มือ
คู่มือพาเลตสี: ชุดสี ความตัดกัน และการส่งออกเป็นโค้ด
เรียนรู้วิธีการทำงานของชุดสี ตรวจสอบความคมชัดของข้อความ และนำชุดสีของคุณไปใช้ในโครงการจริง
เครื่องมือสร้างชุดสีคืออะไร?
ชุดสีคือกลุ่มสีขนาดเล็กที่เข้ากันได้ดี นักออกแบบสร้างชุดสีนี้จากวงล้อสี โดยเลือกสีเริ่มต้นหนึ่งสี แล้วเลือกสีอื่นๆ ที่อยู่ตามมุมคงที่จากสีนั้น เพื่อให้ผลลัพธ์ดูสมดุลแทนที่จะดูสุ่ม
เครื่องมือสร้างนี้ช่วยคุณทำสิ่งนั้นได้ เลือกสีพื้นฐานและธีม ล็อกสีที่คุณชอบ แล้วส่งออกผลลัพธ์เป็นโค้ด CSS, Tailwind, Android XML หรือ Jetpack Compose แต่ละตัวอย่างสีจะแสดงค่า RGB และ HSL รวมถึงระดับความชัดเจนของข้อความสีขาวและสีดำบนพื้นสีนั้น ค่า Hex เป็นระบบฐาน 16: เครื่องแปลงเลขฐานสองเป็นเลขฐานสิบจะแสดงให้เห็นความสัมพันธ์ของค่าเหล่านี้กับตัวเลขทั่วไป
ทำไมคนจึงสร้างชุดสี
สไลด์ โปสเตอร์ และเอกสาร
เลือกชุดสีที่เข้ากันได้อย่างลงตัว สำหรับการนำเสนอ โพสต์บนโซเชียลมีเดีย หรือการออกแบบสิ่งพิมพ์ โดยไม่ต้องเดา
กราฟและแดชบอร์ด
สร้างสีที่ต่างกันแต่กลมกลืนกันสำหรับชุดข้อมูล และตรวจสอบความต่างของสีเพื่อให้ข้อความบนป้ายยังคงอ่านได้ชัดเจน
อธิบายเกี่ยวกับชุดสี
| แผน | วิธีการสร้าง | สัมผัสและใช้งาน |
|---|---|---|
| คล้ายกัน | สีที่อยู่ติดกัน ห่างกัน 30° | สงบและเป็นธรรมชาติ เหมาะสำหรับใช้เป็นพื้นหลังและส่วนติดต่อผู้ใช้ที่นุ่มนวล |
| สีเดียว | สีเดียว แต่ระดับความสว่างต่างกัน | เรียบง่ายและกลมกลืน เหมาะสำหรับดีไซน์แบบมินิมัล |
| เสริม | สองสีที่ตรงกันข้ามกัน ห่างกัน 180° | ความต่างสีสูง เหมาะสำหรับสีเน้นที่เด่นชัด |
| แบบเสริมกันแบบแยกส่วน | สีหนึ่งบวกกับสองสีที่อยู่ข้างสีตรงข้ามของมัน | ความตัดกันที่มีความตึงเครียดน้อยกว่าความตัดกันแบบเสริมกัน |
| สามส่วน | สามสี ห่างกัน 120° | สดใสและสมดุล แต่ยังขาดสีหลักหนึ่งสี |
| สี่เหลี่ยม (สี่เหลี่ยมจัตุรัส) | สี่สี ห่างกัน 90° | มีสีสันที่อุดมสมบูรณ์และหลากหลาย ใช้ได้ดีที่สุดเมื่อใช้สีหลักเพียงสีเดียว |
วิธีใช้เครื่องมือสร้างพาเลตสี
- เลือกสีพื้นฐานจากกล่องสี หรือป้อนรหัส hex เลือกชุดสีและจำนวนสีที่คุณต้องการ
- กดปุ่ม "Generate" เพื่อลองฐานใหม่แบบสุ่ม กดปุ่ม "Lock" ใต้สีใดก็ตามที่คุณต้องการเก็บไว้
- ตรวจสอบข้อมูลเกี่ยวกับความต่างสีบนตัวอย่างสีแต่ละชิ้น ให้พยายามรักษาอัตราส่วนความต่างสีที่ 4.5:1 หรือสูงกว่า ในทุกจุดที่ข้อความปรากฏบนพื้นสี
- คลิกที่รหัสเฮกซ์เพื่อคัดลอก หรือเปิดตัวเลือก “ส่งออกเป็นรหัส” แล้วเลือก CSS, Tailwind, Android หรือ Compose.
- กดปุ่ม "Save palette" เพื่อเก็บไว้บนอุปกรณ์นี้, "Copy link" เพื่อแชร์ หรือ "Download PNG" เพื่อดาวน์โหลดภาพในรูปแบบ PNG
ความตัดกันของสีและความสะดวกในการใช้งาน
อัตราส่วนความต่างของสี
ค่าตั้งแต่ 1:1 (เหมือนกัน) ไปจนถึง 21:1 (สีดำบนพื้นสีขาว) ที่ใช้เปรียบเทียบความสว่างของสองสี
WCAG AA
อย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ (ประมาณ 24 px หรือ 19 px แบบตัวหนา) นี่คือเป้าหมายทั่วไปทั้งทางกฎหมายและทางปฏิบัติ
WCAG AAA
อย่างน้อย 7:1 สำหรับข้อความทั่วไป ซึ่งเป็นระดับที่เข้มงวดกว่าและมีประโยชน์สำหรับผู้ที่มีปัญหาการมองเห็น
อย่าพึ่งพาเพียงสีเท่านั้น
ประมาณ 1 ใน 12 ผู้ชายมีปัญหาในการมองเห็นสีในรูปแบบใดรูปแบบหนึ่ง ควรจับคู่สีกับป้ายกำกับ ไอคอน หรือลวดลาย เพื่อไม่ให้ความหมายสูญหายไป
รูปแบบการส่งออกมีลักษณะอย่างไร
CSS: --color-1: #1f3a5f;
SCSS: $color-1: #1f3a5f;
Tailwind: 'palette-1': '#1f3a5f',
Android: #1F3A5F
Compose: val Palette1 = Color(0xFF1F3A5F)
JSON: ["#1f3a5f", "#ff5733"]
ใน Android Studio ให้วาง XML ลงใน res/values/colors.xml, หรือเพิ่มบรรทัด Compose ลงใน Color.kt ไฟล์ของคุณ ค่า Compose จะรวมถึงคำนำหน้า alpha FF ที่แสดงระดับความทึบเต็ม
เคล็ดลับในการเลือกพาเลตต์ที่ใช้งานได้ดี
- ใช้สีหลักหนึ่งสี สีเสริมหนึ่งหรือสองสี และสีกลางหนึ่งสี การใช้ทุกสีในปริมาณเท่ากันมักทำให้ภาพดูวุ่นวาย
- ตรวจสอบความตัดกันของข้อความกับทุกสีพื้นก่อนที่จะตัดสินใจใช้ชุดสีนั้น
- กำหนดสีแบรนด์ของคุณและสร้างตัวเลือกต่างๆ รอบสีนั้นเพื่อสำรวจตัวเลือกต่างๆ
- ดูพาเลตต์บนหน้าจอจริงในขนาดที่มันจะปรากฏ ไม่ใช่แค่ในรูปแบบตัวอย่างสีเท่านั้น
- ลองทดสอบในโหมดมืดด้วย: สีที่ดูดีบนพื้นขาวอาจไม่ดูดีบนพื้นสีดำเกือบสนิท
ข้อจำกัดและความเป็นส่วนตัว
ความเป็นส่วนตัว
ชุดสีจะถูกสร้างขึ้นในเบราว์เซอร์ของคุณ ชุดสีที่บันทึกไว้จะถูกเก็บไว้ในพื้นที่จัดเก็บข้อมูลท้องถิ่นของเบราว์เซอร์บนอุปกรณ์ของคุณ และจะไม่ถูกอัปโหลดขึ้นเลย
ข้อจำกัด
สีถูกแสดงในพื้นที่สี sRGB และลักษณะที่ปรากฏอาจแตกต่างกันไปตามหน้าจอ ชุดสีที่เสนอเป็นเพียงคำแนะนำที่อิงตามทฤษฎีสี ไม่ใช่การแทนที่การทดสอบกับผู้ใช้จริง เครื่องมือนี้ไม่ตรวจสอบความเหมาะสมสำหรับผู้ใช้ที่มีภาวะตาบอดสี นอกเหนือจากความต่างของสี
คำถามที่พบบ่อย
คำถามที่พบบ่อยเกี่ยวกับเครื่องมือสร้างชุดสี
เครื่องมือสร้างชุดสีทำงานอย่างไร?
เลือกสีพื้นฐานและชุดสี แล้วเครื่องมือนี้จะใช้ล้อสีเพื่อเปลี่ยนสีพื้นฐานเป็นชุดสีที่เข้ากัน กด "Generate" เพื่อสร้างสีพื้นฐานใหม่แบบสุ่ม หรือล็อกสีที่คุณชอบไว้ แล้วสร้างสีที่เหลือ
ความแตกต่างระหว่างชุดสีต่างๆ คืออะไร?
การใช้สีแบบอนาล็อก (Analogous) จะใช้สีที่อยู่ใกล้เคียงกันเพื่อสร้างบรรยากาศที่สงบ ส่วนการใช้สีแบบคอมพลีเมนทารี (Complementary) จะจับคู่สีที่อยู่ตรงข้ามกันเพื่อสร้างความตัดกัน การใช้สีแบบสปลิตคอมพลีเมนทารี (Split Complementary) และแบบไตรแอดิก (Triadic) จะใช้สามสีที่กระจายอย่างเท่าเทียมกัน ส่วนแบบเททราดิก (Tetradic) จะใช้สี่สี และแบบโมโนโครมาติก (Monochromatic) จะใช้สีเดียวแต่ปรับระดับความสว่างให้แตกต่างกัน
ทำอย่างไรให้สีหนึ่งคงอยู่ขณะที่เปลี่ยนสีอื่นๆ?
กดปุ่ม Lock ใต้ตัวอย่างสีใดก็ได้ สีที่ถูกล็อกจะคงอยู่ไม่เปลี่ยนแปลงเมื่อคุณกด Generate เปลี่ยนสีพื้นฐาน หรือเปลี่ยนชุดสี การแก้ไขตัวอย่างสีด้วยปุ่ม Edit จะทำให้สีนั้นถูกล็อกด้วย
ตัวเลขความต่างนี้มีความหมายอย่างไร?
ตัวอย่างสีแต่ละตัวอย่างแสดงอัตราส่วนความต่างของสีขาวและสีดำบนสีนั้น WCAG กำหนดให้อัตราส่วนความต่างของสีขาวและสีดำสำหรับข้อความปกติ (AA) ต้องไม่น้อยกว่า 4.5:1 สำหรับระดับ AAA ที่เข้มงวดกว่า ต้องไม่น้อยกว่า 7:1 และสำหรับข้อความขนาดใหญ่ ต้องไม่น้อยกว่า 3:1
มีรูปแบบการส่งออกใดบ้าง?
รายการ HEX, ตัวแปร CSS, ตัวแปร SCSS, มัลติพลาย JSON, ไฟล์กำหนดค่า Tailwind, ไฟล์ colors.xml ของ Android และค่าสีของ Jetpack Compose เพื่อให้คุณสามารถคัดลอกพาเลตสีไปใช้ในโครงการได้ทันที
ฉันสามารถแบ่งปันหรือบันทึกพาเลตของฉันได้ไหม?
ใช่ครับ การคัดลอกลิงก์จะสร้างที่อยู่เว็บที่เปิดหน้าที่มีสีเดียวกันขึ้นมาใหม่ การดาวน์โหลด PNG จะบันทึกภาพของชุดสี และการบันทึกชุดสีจะเก็บชุดสีได้สูงสุด 12 ชุดในเบราว์เซอร์นี้
ทำไมสีของฉันดูต่างไปเมื่อแสดงบนหน้าจออื่น?
หน้าจอแต่ละเครื่องมีความแตกต่างด้านความสว่าง ความแม่นยำของสี และโปรไฟล์สี รหัส Hex ใช้เพื่ออธิบายสีด้วยตัวเลข แต่ลักษณะที่ปรากฏจะขึ้นอยู่กับหน้าจอที่ใช้ ดังนั้น ควรตรวจสอบสีสำคัญบนอุปกรณ์ที่กลุ่มเป้าหมายของคุณจะใช้
พาเลตต์ควรมีสีทั้งหมดกี่สี?
การออกแบบหลายแบบใช้สี 5 สีได้อย่างดี: สีหลัก 1 สี, สีเสริม 1 หรือ 2 สี, สีพื้นหลังที่อ่อน และสีตัวอักษรที่เข้ม เครื่องมือนี้ให้คุณเลือกได้ตั้งแต่ 3 ถึง 8 สี
เครื่องกำเนิดไฟฟ้านี้ใช้ฟรีหรือไม่ และข้อมูลของฉันถูกเก็บไว้หรือไม่?
บริการนี้ฟรี พาเลตถูกสร้างขึ้นในเบราว์เซอร์ของคุณ พาเลตที่บันทึกไว้จะถูกเก็บไว้ในพื้นที่จัดเก็บข้อมูลท้องถิ่นของอุปกรณ์ของคุณ และจะไม่ถูกอัปโหลดขึ้นเลย
สามารถสร้างลิงก์ไปยังพาเลตได้ไหม?
ใช่ครับ ให้เพิ่ม ?colors=1f3a5f-ff5733-00aa88 ลงในที่อยู่หน้าเว็บ โดยใช้รหัสเฮกซ์ 2 ถึง 8 ตัว แยกด้วยเครื่องหมายขีดกลาง (-) และไม่ต้องใส่เครื่องหมาย #
จากผู้ใช้เครื่องมือนี้
รีวิว
กำลังโหลดรีวิว…
อย่าหยุด
เครื่องมือเพิ่มเติมในกล่อง
หน้าหลักมีเครื่องมือฟรีอีกหลายสิบชนิดที่ไม่จำเป็นต้องใช้ API key
ตัวแปลงตัวอักษรใหญ่-เล็ก
แปลงข้อความเป็นตัวพิมพ์ใหญ่ทั้งหมด, camelCase, title case, snake_case และรูปแบบอื่นๆ อีกมากมาย
เครื่องมือแบบเปิดตัวนับคำ
นับจำนวนคำ ตัวอักษร ประโยค และเวลาอ่านขณะที่คุณพิมพ์
เครื่องมือแบบเปิดเครื่องมือลบช่องว่าง
ลบช่องว่างที่ไม่จำเป็นและจัดระเบียบระยะห่างระหว่างบรรทัดที่ดูไม่เป็นระเบียบ
เครื่องมือแบบเปิดเครื่องมือตรวจสอบความแตกต่างของข้อความ
เปรียบเทียบข้อความสองฉบับบรรทัดต่อบรรทัดเพื่อดูว่าส่วนใดมีการเปลี่ยนแปลง
เครื่องมือแบบเปิด