디자인 도구
색상 팔레트, 타이포그래피 도구, 간격 계산기, UI 디자인 유틸리티.
Tailwind Color Reference
16진수 및 RGB 값이 포함된 모든 Tailwind CSS 색상 팔레트를 탐색합니다.
Spacing Scale Generator
디자인 시스템을 위해 일관된 간격 척도를 생성합니다.
Font Pairing Guide
제목 및 본문 텍스트를 위한 조화로운 글꼴 조합을 찾습니다.
Line Height Calculator
가독 가능한 타이포그래피를 위한 최적 행 높이를 계산합니다.
Data URL Encoder
HTML과 CSS에 포함하기 위해 파일을 Base64 Data URL로 변환합니다.
브레이크포인트 시각화
Tailwind, Bootstrap, 커스텀 프레임워크의 CSS 브레이크포인트를 시각화합니다.
디자인 토큰 변환기
디자인 토큰을 JSON, CSS 변수, SCSS 형식으로 변환합니다.
와이어프레임 색상 팔레트
와이어프레임과 프로토타입용 중성 색상 팔레트를 생성합니다.
CSS 커서 생성기
모든 CSS 커서 유형을 실시간 미리보기와 함께 탐색하고 코드를 복사하세요.
아이콘 사이즈 참조표
iOS, Android, 웹, 데스크탑 앱의 표준 아이콘 크기입니다.
CSS Grid 생성기
CSS Grid 레이아웃을 시각적으로 구성하고 CSS 코드를 복사하세요.
색상 구성표 생성기
기본 색상에서 보색, 삼각, 유사색 구성표를 생성합니다.
테두리 둥글기 시각화
CSS border-radius 값을 실시간으로 미리보고 비교하세요.
그라디언트 메시 생성기
여러 색상 포인트로 부드러운 CSS 메시 그라디언트 배경을 생성합니다.
불투명도 틴트 생성기
색상에서 다양한 불투명도 변형으로 전체 틴트 팔레트를 생성합니다.
자간 생성기
CSS letter-spacing과 word-spacing을 미리 보고 생성합니다.
애니메이션 타이밍 생성기
CSS 애니메이션 타이밍(cubic-bezier) 생성기 및 시각적 커브 미리보기.
Z-Index 관리자
CSS z-index 스태킹 컨텍스트 시각화 도구.
스크롤 스냅 생성기
실시간 미리보기와 복사 가능한 코드로 CSS scroll-snap 속성을 생성합니다.
CSS 클립패스 생성기
시각적 편집기와 실시간 미리보기로 CSS clip-path 도형을 만듭니다.
CSS 필터 생성기
blur, brightness, contrast 등 CSS 필터 효과를 실시간 미리보기로 조정하고 CSS를 복사합니다.
Flexbox 생성기
시각적 편집기와 라이브 미리보기로 CSS flexbox 레이아웃 코드를 생성합니다.