ป้อนสีแบรนด์หนึ่ง ส่งออก primary / secondary / success / warning / danger เป็น Tailwind config และ CSS variables
2F6FED · L 57%
หลัก
สร้างขึ้นโดยอัตโนมัติ คงความสว่างและความอิ่มตัวของแบรนด์
รอง
สร้างขึ้นโดยอัตโนมัติ คงความสว่างและความอิ่มตัวของแบรนด์
สำเร็จ
สร้างขึ้นโดยอัตโนมัติ คงความสว่างและความอิ่มตัวของแบรนด์
เตือน
สร้างขึ้นโดยอัตโนมัติ คงความสว่างและความอิ่มตัวของแบรนด์
อันตราย
สร้างขึ้นโดยอัตโนมัติ คงความสว่างและความอิ่มตัวของแบรนด์
ส่งออกโค้ด
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
DEFAULT: "#010101",
light: "#010101",
dark: "#000101",
foreground: "#ffffff",
},
secondary: {
DEFAULT: "#010101",
light: "#010101",
dark: "#010101",
foreground: "#ffffff",
},
success: {
DEFAULT: "#000101",
light: "#010101",
dark: "#000100",
foreground: "#ffffff",
},
warning: {
DEFAULT: "#010100",
light: "#010101",
dark: "#010100",
foreground: "#ffffff",
},
danger: {
DEFAULT: "#010101",
light: "#010101",
dark: "#010000",
foreground: "#ffffff",
},
},
},
},
};ป้อนสีแบรนด์, รับชุดความหมายห้าชุดทุกอินเทอร์เฟซต้องการ, ส่งออกเป็นโค้ด
วาง HEX แบรนด์ของคุณ; สีความหมายจะสืบทอดลักษณะความสว่างและโครมาของมัน
Success อยู่ในช่วงเฉดสีเขียว, Warning ในสีเหลืองอำพัน, Danger ในสีแดง - เฉดสีมีความหมาย, ลักษณะยังคงเป็นแบรนด์
คัดลอกเป็น Tailwind config / CSS variables / JSON เพื่อนำไปใช้กับระบบดีไซน์ของคุณโดยตรง
คำถามที่พบบ่อย 3 ข้อเมื่อเชื่อมต่อกับระบบดีไซน์
เปิดตัวแก้ไขบอร์ดและลองใช้เป็นอินเทอร์เฟซจริง
ปรับแต่ง L / C / H ในพื้นที่สี OKLCH ที่สม่ำเสมอตามการรับรู้ พร้อมตัวอย่างสด และผลลัพธ์ oklch() / HEX / RGB
แปลงสีใด ๆ ให้เป็นสเกลระบบดีไซน์ 11 ระดับ โดยมีความสม่ำเสมอทางการรับรู้ใน OKLCH, ความคมชัดตามมาตรฐาน WCAG ต่อระดับ และส่งออกไปยัง Tailwind/CSS/SCSS/JSON
ตรวจสอบคอนทราสต์ตามมาตรฐาน WCAG 2.1 ระหว่างสีพื้นหน้าและพื้นหลังใดๆ
อธิบายฉากหรืออารมณ์ในหนึ่งบรรทัด — รับจานสี 5 บทบาทพร้อมเหตุผล