디자인·컬러

HEX·RGB·HSL·HWB·LAB·LCH·OKLCH로 색을 변환하고 가장 가까운 색 이름을 알려 줍니다.

OKLCH 좌표판에서, 화면 스포이드로, 또는 업로드한 이미지에서 색을 고르고 원하는 표기법으로 복사합니다.

전경·배경 색 조합을 WCAG 2와 APCA 기준으로 채점하고 통과하는 가장 가까운 색을 제안합니다.

기준 색에서 보색·삼각·유사색 규칙으로 조화로운 팔레트를 만듭니다.

목표 비율에 맞는 나머지 한 변을 계산하고 해당하는 표준 규격을 알려 줍니다.

여러 겹의 박스·텍스트 그림자를 미리보기와 함께 구성하고 CSS로 내보냅니다.

정지점을 끌어 선형·원형·원뿔 그라디언트를 만들고 sRGB 또는 OKLCH CSS를 내보냅니다.

이름이 붙은 영역으로 그리드를 시각적으로 배치하고 grid-template CSS를 만듭니다.

색 하나에서 50~950 램프를 만들고 뒤집어 다크 램프로 만들어, 토큰 짝마다 대비를 그대로 유지합니다.

스크린샷을 휴대폰·태블릿·노트북·브라우저 프레임에 넣고 배경과 그림자를 더합니다.

예제에서 flex 속성을 바꿔 보며 CSS와 각 속성이 무엇을 바꿨는지 확인합니다.

두 화면 너비 사이에서 크기가 매끄럽게 변하는 clamp() 식을 계산합니다.

TTF·OTF와 WOFF를 브라우저 안에서 양방향 변환하고 알맞은 @font-face 규칙을 만듭니다. WOFF2는 Brotli가 필요해 다루지 않고 데스크톱 도구를 안내합니다.

시스템 글꼴 스택으로 제목용·본문용 글꼴 조합을 제안하고 직접 입력한 한글·영문으로 미리 본 뒤 CSS를 줍니다.

TrueType 폰트에서 실제로 쓰는 글자만 남기고 WOFF로도 싸 줍니다. 한글 웹폰트에서 4MB와 90KB를 가르는 작업입니다.

임의의 색과 가장 가까운 Tailwind 팔레트 값을 찾고 체감 색차를 보여 줍니다.

제목·부제·브랜드 문구와 로고(선택)를 템플릿에 얹어 1200×630 공유 이미지를 만들고 함께 넣을 메타 태그를 써 줍니다.

SVG를 실시간 미리보기 옆에서 고치면서 파일을 해설합니다. viewBox와 확대, 변환, 경로 명령, 상속된 채색, 낭비되는 바이트, <img>·데이터 URI·인라인에서 무엇이 깨지는지 알려 줍니다.

한 색에서 체감상 고른 간격의 50~950 명도 단계를 만들어 디자인 토큰으로 바로 씁니다.

줄무늬·점·격자·노이즈 등 이음매 없는 SVG 패턴을 색과 크기를 정해 만듭니다.

모서리마다 값을 따로 주고 두 값 문법의 곡선 형태까지 만들어 CSS로 내보냅니다.

샘플에 블러·밝기·채도·색조·그림자 필터를 겹쳐 보고 CSS를 만듭니다.

스타일시트에서 색·간격·모서리·글꼴 값을 뽑아 커스텀 속성 세트를 제안합니다.

움직이는 미리보기를 보며 cubic-bezier나 스프링 곡선을 조절하고 CSS 타이밍 함수를 만듭니다.

폰트 파일을 열어 블록별 글리프 범위·한글 음절 수·굵기·가변 축·임베딩 허용 여부와 라이선스 이름 정보를 보여 줍니다.

별도 용지·ICC 프로파일 없이 교과서 공식으로 RGB를 CMYK로 바꾸고, 인쇄로 내면 탁해질 채도 높은 색을 표시합니다.

패스 데이터를 절대·상대 명령으로 바꾸고 이동·확대·회전·방향 뒤집기를 적용하며 경계 상자와 미리보기를 보여 줍니다.

SVG를 CSS 배경용 데이터 URI로 인코딩하며 꼭 필요한 문자만 이스케이프해 크기를 줄입니다.

기준 크기와 비율로 글자·간격의 모듈러 스케일을 만들어 CSS나 토큰으로 내보냅니다.