단일 브랜드 색상을 50~950 단계 스케일, 라이트 및 다크 모드용 시맨틱 토큰, 접근성 준수 대비 쌍을 갖춘 완전한 디자인 시스템으로 변환합니다. CSS 사용자 정의 속성, Tailwind 구성 또는 디자인 토큰으로 내보내 프로덕션에서 즉시 사용할 수 있습니다.
브랜드 팔레트의 모든 색상에 대해 50~950 스케일을 생성합니다. 각 단계는 지각적으로 균일하며 일관된 밝기 단계로 테스트되었습니다.
라이트 및 다크 모드 모두에서 작동하는 시맨틱 색상 토큰을 자동으로 생성합니다. 표면, 텍스트 및 강조 색상이 두 테마에 매핑됩니다.
모든 색상 쌍은 WCAG AA 대비 비율에 대해 확인됩니다. 텍스트, UI 및 장식 요소에 어떤 조합이 작동하는지 확인할 수 있습니다.
전체 색상 시스템을 CSS 사용자 정의 속성, Tailwind CSS 구성, SCSS 맵, JSON 토큰 또는 공유 가능한 스타일 가이드로 내보냅니다.
시맨틱 토큰은 색상을 특정 값이 아닌 목적(예: 'background', 'text-primary', 'border', 'error')에 매핑합니다. 이렇게 하면 구성 요소 코드를 건드리지 않고도 테마(라이트/다크)를 전환하거나 리브랜딩하기 쉽습니다.
저희는 지각적으로 균일한 명도 단계를 위해 OKLCH 색 공간을 사용합니다. 브랜드 색상에서 시작하여 단순한 HSL 명도 조정과 달리 인간의 눈에 균일하게 느껴지는 10가지 음영을 계산합니다.
기본 색상으로 시작하세요. 생성기가 이를 중심으로 완전한 시스템을 만듭니다. 생성된 시스템 내에서 보조 색상과 강조 색상을 조정할 수 있습니다.
네. 내보낸 Tailwind 설정은 Tailwind v3(tailwind.config.js) 및 v4(@theme inline)와 모두 호환되는 CSS 사용자 정의 속성 형식을 사용합니다.