컬러 스튜디오
팔레트, 그라데이션, 휠 — 완벽한 색을 찾는 모든 방법.
AI 팔레트 생성기
분위기를 설명하면 어울리는 팔레트를 받아보세요 — 브라우저 안에서 완전히 실행되는 실제 신경망이 구동합니다. 서버 없음, 대기 없음, 데이터는 기기를 떠나지 않습니다.
AI · 신경망AI 스타일 가이드
브랜드를 설명하면 완전한 디자인 시스템 — 팔레트, 폰트 페어, 타이포 스케일, 간격, 라운드, 섀도 — 을 신경망이 매칭해 하나의 복사 가능한 CSS 블록으로 조립합니다.
AI · 디자인 시스템색상 변환기
즉각적인 양방향 변환을 통해 HEX, RGB, HSL, CMYK 및 OKLCH 간 변환이 가능합니다.
변환기 · 모든 형식색상 하모니
임의의 기본 색상에서 보색, 삼각, 유사, 분할 보색 팔레트를 생성하세요. 스와치를 클릭하면 HEX 코드가 복사됩니다.
색상 · 이론AI 색상 명명
아무 색상값이나 입력하면 가장 가까운 색명을 찾아줍니다 — CSS 표준색, 중국 전통색, 일본 와가이로 등 12개 문화의 색. 지각 색채 과학이 진짜 가장 가까운 일치를 찾고, AI 모델이 관련 팔레트 테마를 제안합니다.
AI · 색채 과학색상환
색상, 채도, 색상 관계를 탐색할 수 있는 대화형 색상환입니다. 색상을 선택하고 잠그려면 클릭하세요.
인터랙티브·시각적그라데이션 생성기
실시간 캔버스 미리보기를 통해 아름다운 선형 및 방사형 그래디언트를 디자인하세요. CSS 코드를 즉시 복사하세요.
그라데이션 · CSS 내보내기그라데이션 프리셋
15개의 아름다운 그라데이션 프리셋을 찾아보고 복사하세요.
프리셋·원클릭이미지 팔레트
스마트 색상 양자화를 사용하여 모든 이미지에서 아름다운 색상 팔레트를 추출합니다.
추출·스마트팔레트 생성기
단색, 보색, 유사, 삼원색 모드를 사용하여 조화로운 색상 구성표를 만듭니다. CSS 내보내기를 통한 실시간 미리보기.
컬러 · 인터랙티브틴트 & 셰이드 생성기
어떤 색에서든 전체 틴트/셰이드 스케일 생성 — 20단계, HEX 및 SCSS 내보내기 지원.
틴트, 셰이드, 색상 스케일효과 및 깊이
그림자, 유리, 모서리 — UI를 실감나게 만드는 섬세한 디테일.
블롭 메이커
배경, 아바타, 섹션 장식용 부드러운 유기적 도형을 생성하세요. 원클릭 랜덤 생성, 곡률 미세 조정, border-radius 또는 SVG 코드 복사.
CSS · 오가닉테두리 둥글기
실시간 미리보기가 가능한 시각적 경계 반경 편집기. 개별 코너 컨트롤을 사용하여 CSS 코드를 복사합니다.
CSS · 비주얼 편집기그림자 생성기
다중 레이어링, 실시간 캔버스 미리보기 및 CSS 출력을 갖춘 대화형 상자 그림자 빌더입니다.
CSS · 레이어드CSS 버튼 생성기
몇 초 만에 아름다운 버튼 디자인 — 6가지 스타일, 사용자 색상, 모서리 반경, 패딩, CSS 복사 지원.
버튼 생성기, CSS 버튼, 버튼 디자인CSS 필터 생성기
CSS filter()로 시각 효과를 만드세요 — 블러, 밝기, 대비, 색조 회전, 세피아 등. 샘플 이미지에서 실시간 미리보기, 전체 필터 체인 즉시 복사.
CSS · 이미지 효과글래스모피즘 생성기
배경 흐림, 투명도, 섬세한 테두리를 갖춘 프로스티드 글래스 카드를 만드세요. 실시간 미리보기와 복사-붙여넣기 CSS.
UI · 프로스티드 글래스그라디언트 텍스트 생성기
그라디언트 채우기와 애니메이션으로 텍스트를 돋보이게 — 각도와 색상을 조절하고 CSS를 즉시 복사.
그라디언트 텍스트, 텍스트 그라디언트텍스트 그림자 생성기
실시간 미리보기로 다층 텍스트 그림자를 디자인하세요. 오프셋, 흐림, 색상, 불투명도를 조정하고 CSS를 즉시 복사하세요.
CSS · 타이포그래피실용 툴킷
접근성과 일관성을 유지하는 검사, 변환, 시스템.
AI CSS 스니펫
원하는 효과를 설명하세요 — 빛나는 버튼, 로딩 스피너, 글래스 카드 — 신경망이 맞는 CSS 스니펫을 찾아줍니다. 실시간 렌더링 미리보기, 바로 쓰는 코드 복사.
AI · 코드 라이브러리색맹 시뮬레이터
색맹 사용자에게 색상이 어떻게 보이는지 시뮬레이션합니다.
접근성·시뮬레이션대비 검사기
텍스트 및 배경 색상에 대한 WCAG AA/AAA 준수를 확인합니다. 즉각적인 접근성 등급을 받으세요.
접근성 · AA/AAA큐빅 베지어 생성기
라이브 미리보기와 애니메이션으로 맞춤 CSS 이징 곡선을 디자인하세요. 제어점을 드래그하고 프리셋을 고른 뒤 cubic-bezier() 함수를 즉시 복사하세요.
CSS · 모션PX-REM 변환기
PX와 REM을 즉시 양방향으로 변환하세요. 기준 글꼴 크기 조정과 전체 변환표 포함. 접근성 있고 확장 가능한 CSS에 필수적입니다.
CSS · 단위CSS 변형 생성기
회전, 크기 조절, 이동, 기울이기 등 CSS 변형을 시각화하고 생성하세요. 라이브 대화형 미리보기와 함께 transform 속성을 즉시 복사할 수 있습니다.
CSS · 애니메이션UI 색상 시스템
단일 시드 색상으로 완전한 디자인 토큰 팔레트를 생성합니다. Tailwind, CSS 또는 SCSS로 내보냅니다.
디자인 토큰 · Tailwind레이아웃 및 그리드
그리드와 비율 — 모든 인터페이스의 구조적 뼈대.
화면 비율 계산기
16:9, 4:3, 1:1, 9:16 및 사용자 정의 등 모든 화면 비율을 계산하고 조정하세요. 비율을 유지하며 크기를 변경할 수 있고 일반적인 해상도 프리셋이 포함되어 있습니다.
유틸리티 · 비율CSS Grid 생성기
실시간 미리보기로 CSS Grid 레이아웃을 시각적으로 생성합니다.
CSS·비주얼 에디터황금비 계산기
레이아웃, 타이포그래피, 로고를 위한 황금비(1:1.618) 치수를 계산하세요. 크고 작은 황금값을 즉시 얻고 시각적 미리보기도 제공합니다.
레이아웃 · 비율SVG 웨이브 생성기
웹사이트용 부드러운 SVG 웨이브 구분선 생성 — 진폭, 파장, 레이어를 조절하고 SVG를 복사.
SVG 웨이브, 웨이브 구분선타이포그래피 아틀리에
폰트 페어링과 스케일 — 디자인의 목소리.
AI 폰트 페어링
프로젝트를 설명하면 브라우저 안에서 실행되는 실제 신경망이 매칭한 전문 Google 폰트 페어를 받아보세요. 실시간 렌더링 미리보기와 바로 쓰는 CSS 복사.
AI · 폰트Clamp 계산기
CSS clamp()으로 유동적인 타이포그래피를 생성하세요. 최소, 선호, 최대 크기를 설정하면 완벽한 clamp() 공식과 시각적 스케일 미리보기를 얻습니다.
CSS · 플루이드 타입폰트 페어링
선별된 컬렉션에서 제목과 본문 텍스트의 조화로운 글꼴 조합을 찾아보세요.
타이포그래피 · 300개 이상의 글꼴타이포그래피 스케일 생성기
황금비, 장3도 등 고전적인 비율로 조화로운 모듈식 타입 스케일을 생성하세요. 크기를 시각적으로 미리보고 전체 CSS를 복사하세요.
타이포그래피 · 스케일14개 언어
모든 도구, 모든 라벨, 모든 가이드가 완벽하게 번역되었습니다.
접근성 우선
모든 팔레트에는 WCAG 대비 점수가 포함되어 있습니다. 처음부터 포괄적으로 디자인하세요.
개발자 친화적 내보내기
CSS, Tailwind, SCSS, JSON — 프로젝트에 필요한 형식을 복사하세요.