디자인 도구

색상 코드 변환

HEX, RGB, HSL과 투명도를 변환하고 색을 미리 보며 바로 쓸 수 있는 CSS 값을 복사합니다.

색상 명암 대비 검사

WCAG 2.2에 따라 글자와 배경의 대비를 계산하고 일반·큰 글자의 AA와 AAA 충족 여부를 표시합니다.

CSS 그라디언트 생성기

선형·방사형 그라디언트의 색상, 위치와 각도를 조절하고 미리 보며 CSS를 만듭니다.

CSS 그림자 생성기

이동, 흐림, 확산, 색상과 불투명도를 조절해 안쪽·바깥쪽 그림자를 미리 보고 CSS를 얻습니다.

가로세로 비율 계산기

이미지나 영상의 비율을 약분하고 목표 너비 또는 높이에 맞는 나머지 길이를 계산합니다.

CSS Grid 생성기

고정·자동 열 구성과 간격·정렬을 미리 보고 CSS와 HTML을 생성하세요.

CSS Flexbox 생성기

방향·줄바꿈·간격·정렬을 실제 배치로 확인하고 CSS와 HTML을 가져오세요.

색상 팔레트 만들기

기준색으로 보색·유사색·삼각 배색·단색 팔레트를 만들고 HEX, CSS, JSON으로 저장하세요.

CSS 모서리 둥글기 생성기

네 모서리를 함께 또는 따로 조절하고 타원형 모서리까지 미리 보며 border-radius CSS를 만듭니다.

CSS 다각형 clip-path 생성기

다각형 꼭짓점을 드래그하거나 수치로 편집해 잘라낼 영역을 미리 보고 CSS를 내보냅니다.

CSS 베지어 이징 편집기

두 제어점을 조절하고 전환 효과를 재생해 cubic-bezier 이징 함수를 생성합니다.

CSS clamp 반응형 글자 크기 생성기

글자 크기와 뷰포트 너비의 최솟값·최댓값으로 px 또는 rem 기반 clamp()를 만듭니다.

CSS 이미지 필터 생성기

샘플이나 로컬 이미지에서 흐림, 밝기, 색상과 투명도를 미리 보고 filter CSS를 저장합니다.

CSS 2D·3D 변환 생성기

이동, 회전, 크기, 기울기와 변환 기준점을 조절하고 필요에 따라 원근감과 3D 변환을 더합니다.

용지 크기와 인쇄 픽셀 계산

A, ISO B, C와 북미 용지 규격을 조회하고 방향·해상도·도련에 따라 mm, 인치, 포인트, 픽셀을 계산하세요.

SVG 최적화 및 PNG 변환

SVG를 정리하고 최적화해 용량과 모양을 비교하세요. SVG 또는 원하는 크기의 투명·단색 배경 PNG로 저장할 수 있습니다.