하나의 브랜드 색상을 입력하면 primary / secondary / success / warning / danger를 제공하며 Tailwind 설정과 CSS 변수로 내보낼 수 있습니다.
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",
},
},
},
},
};브랜드 색상을 입력하면 모든 인터페이스에 필요한 5개의 시맨틱 세트를 얻을 수 있으며 코드로 내보낼 수 있습니다.
브랜드 HEX를 붙여넣으세요; 시맨틱 색상은 해당 색상의 밝기와 채도 특성을 상속받습니다.
성공은 녹색 색상 범위에, 경고는 호박색에, 위험은 빨간색에 위치합니다 - 색상은 시맨틱이며 특성은 브랜드에 유지됩니다.
Tailwind 설정 / CSS 변수 / JSON으로 복사하여 디자인 시스템에 직접 적용하세요.
디자인 시스템에 적용할 때 자주 묻는 세 가지 질문입니다.
보드 에디터를 열어 실제 인터페이스처럼 사용해 보세요.
지각적으로 균일한 OKLCH 공간에서 L / C / H를 조정하고 실시간 미리보기와 oklch() / HEX / RGB 출력을 제공합니다.
모든 색상을 OKLCH에서 인지적으로 균일한 11단계 디자인 시스템 스케일로 변환하고, 각 단계의 WCAG 대비율을 확인한 후 Tailwind/CSS/SCSS/JSON으로 내보낼 수 있습니다.
임의의 전경색과 배경색 간의 WCAG 2.1 대비 검증을 수행합니다.
장면이나 분위기를 한 줄로 설명하면 — 근거가 담긴 5가지 역할의 팔레트를 얻을 수 있습니다.