Softonic

เครื่องกำเนิดจานสี

ขั้นตอน 1 / 4 Palette builder

เริ่มต้นด้วยสีเดียว — สีหลักของแบรนด์ของคุณ รูปภาพที่คุณดึงสำเนียงมา หรือข้อเสนอแนะแบบสุ่ม — และเครื่องสร้างจะสร้างชุดสี 4-8 สีโดยใช้กฎความกลมกลืนแบบคลาสสิก: เสริม อะนาล็อก ไตรอะดิก เตตราดิก แบ่งเสริม เอกรงค์ ส่งออกเป็นตัวแปร CSS, การกำหนดค่า Tailwind, โทเค็น Figma หรือเพียง CSV ของรหัสฐานสิบหก

จานสีถูกสร้างขึ้นอย่างไร

  1. 1

    ป้อนหรือเลือกสีพื้นฐาน

    Hex, RGB, HSL หรือใช้ปุ่ม "สุ่ม" เพื่อเป็นจุดเริ่มต้นใหม่

  2. 2

    เลือกรูปแบบความสามัคคี

    สีคู่เสริม (2 สี ห่างกัน 180°), อะนาล็อก (3 เพื่อนบ้านทำมุม 30°), ไตรอะดิก (3 ที่ 120°), เตตราดิก (4 ที่ 90°), แยกคอมพลีเมนต์ (ฐาน + 2 ใกล้ส่วนเติมเต็ม), เอกรงค์ (สีเดียวกัน, ความสว่าง/ความอิ่มตัวต่างกัน)

  3. 3

    Palette เรนเดอร์สด

    ตัวอย่าง 4-8 ปรากฏขึ้นพร้อมกับ hex, RGB และ HSL ปรับแถบเลื่อนความอิ่มตัวและความสว่างเพื่อปรับแต่ง

  4. 4

    ส่งออก

    ตัวแปร CSS, การกำหนดค่า Tailwind `extend.colors`, โทเค็น Figma JSON, ตัวแปร Sass หรือ CSV

แผนความสามัคคี

โครงสร้างพาเลทสำหรับงานจริง

โดยทั่วไประบบการออกแบบจะต้องมี:

จานสีความสามัคคีช่วยให้คุณมีสำเนียงหลัก + รอง + ความเป็นกลางและความหมายมักจะมาจากรูปแบบที่แยกจากกัน (ลดความอิ่มตัวของสีเทาใกล้; เฉดสีความหมายที่เป็นมาตรฐาน)

รูปแบบการส่งออก

คุณสมบัติที่กำหนดเองของ CSS:

:root {
  --brand-primary: #2E86AB;
  --brand-secondary: #A23B72;
  --brand-accent: #F18F01;
  --brand-neutral: #C73E1D;
}

การกำหนดค่า Tailwind:

theme: {
  extend: {
    colors: {
      brand: {
        primary: '#2E86AB',
        secondary: '#A23B72',
        accent: '#F18F01',
      }
    }
  }
}

SCSS:

$brand-primary: #2E86AB;
$brand-secondary: #A23B72;

ความคมชัดและการเข้าถึง

แผนความสามัคคีไม่ได้รับประกันการเข้าถึง ตรวจสอบการจับคู่จานสีกับข้อกำหนดความคมชัดของ WCAG:

จับคู่ตัวสร้างกับตัวตรวจสอบคอนทราสต์เพื่อค้นหาคอมโบที่สอดคล้อง

เคล็ดลับ

คำถามที่พบบ่อย

เสริมสำหรับแบรนด์พลังงานสูง คล้ายคลึงกับความรู้สึกสงบและเหนียวแน่น (สุขภาพ ความหรูหรา กลางแจ้ง) Triadic สำหรับแบรนด์ที่สนุกสนานและสมดุล ภาพสีเดียวเพื่อความสวยงามแบบบรรณาธิการที่มินิมอลเป็นพิเศษ เมื่อมีข้อสงสัย การเปรียบเทียบคือการให้อภัย

ใช่ ปักหมุดสีที่คุณต้องการเก็บไว้และสร้างสีอื่นๆ ขึ้นมาใหม่เพื่อให้กลมกลืนกัน มีประโยชน์เมื่อสีหลักของแบรนด์ได้รับการแก้ไขแล้วและคุณกำลังสำรวจสำเนียง

สีหลัก 3-5 สีเป็นจุดที่น่าสนใจสำหรับแบรนด์ส่วนใหญ่ เพิ่มสีอ่อน/เฉดสีสำหรับขนาดระบบการออกแบบเต็มรูปแบบ นอกเหนือจากสีหลัก 8 สีแล้ว ความสอดคล้องกันยังยากต่อการรักษา

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

เครื่องมือที่เกี่ยวข้อง

เครื่องสร้างโทนสีแบบสุ่ม

สร้างพาเลทสี 5 สี โดยใช้โทนพื้นฐานแบบสุ่ม และประกอบด้วยสีเสริม สีใกล้เคียง และสีสามสีในกลุ่มทริเอเดีย

ตัวสร้างเลขสุ่ม

สร้างสี RGB แบบสุ่ม ดูค่าเฮกซาเดซิมอล (hex), HSL และ RGB ได้ทันที และคัดลอกข้อมูลในรูปแบบใดก็ได้เพียงคลิกเดียว

เครื่องเลือกสี HEX

ให้เลือกสีใดๆ โดยการมองเห็น จากนั้นดึงค่า HEX, RGB, HSL, HSV และ CMYK ของสีนั้น รวมถึงค่าความต่างของคอนทราสต์สำหรับการเข้าถึง (accessibility contrast) เมื่อเปรียบเทียบกับสีขาวและสีดำ

เครื่องสร้างตัวเลขสุ่ม

สร้างตัวอักษรสุ่มจากอักษรภาษาอังกฤษ ให้เลือกประเภทของตัวอักษร (ตัวพิมพ์ใหญ่หรือเล็ก) ระบุว่าต้องการตัวที่ซ้ำหรือตัวที่ไม่ซ้ำ และกำหนดจำนวนตัวที่ต้องการ

ตัวจัดรูปแบบ JSON

กำหนดรูปแบบและแสดงข้อมูลในรูปแบบ JSON ที่สวยงาม โดยรองรับการปรับระดับการแทรกบรรทัด การเรียงลำดับคีย์ และระบบตรวจสอบความถูกต้องแบบในเนื้อหา (inline validation) ซึ่งจะแสดงข้อผิดพลาดไว้ตรงตำแหน่งที่เกิดขึ้น

เครื่องสร้าง Anagram

ใส่คำหรือวลี แล้ว generator จะคืน anagrams ที่ถูกต้องโดยใช้ตัวอักษรเดียวกัน กรองตามความยาวและพจนานุกรม