한국어
디자인·색상
색상을 고르고 CSS·SVG를 만들고 직접 그려보세요.
41 도구10 개 언어로그인 없이 바로
즐겨찾기 · 최근 사용한 도구
최근 도구와 즐겨찾기는 이 기기에만 저장됩니다.
전체 도구
41- 색상 코드 변환기HEX 색상을 RGB와 HSL 코드로 변환하세요바로 사용
- CSS 그라데이션 만들기두 색상과 각도로 CSS 그라데이션을 만드세요바로 사용
- 화면 비율 계산기가로·세로 비율을 약분하고 크기 변경 값을 계산하세요바로 사용
- PX·REM 변환기기준 글자 크기에 따라 PX와 REM을 변환하세요바로 사용
- 랜덤 색상 팔레트무작위 색상 팔레트를 만들고 HEX 코드를 복사하세요바로 사용
- 온라인 그림판펜 색·굵기를 골라 그리고 결과를 PNG로 저장하세요바로 사용
- 픽셀 아트 그리기16×16 픽셀에 색을 채워 작은 그림을 만드세요바로 사용
- 조화로운 색상 팔레트기준색의 보색·유사색·삼각 배색을 만들어보세요바로 사용
- CSS 그림자 생성위치·흐림·색상·불투명도를 정해 그림자를 만드세요바로 사용
- CSS 모서리 생성네 모서리의 반지름을 각각 정하세요바로 사용
- CSS 변형 생성이동·회전·배율을 지정해 변형 코드를 만드세요바로 사용
- CSS 그리드 생성열 수와 간격을 지정하고 그리드를 미리 보세요바로 사용
- CSS 유동 글자 크기두 화면 폭과 글자 크기로 clamp 식을 만드세요바로 사용
- 색상 혼합두 sRGB 색상을 정한 비율로 혼합하세요바로 사용
- 색상 명암 팔레트흰색·검정과 섞은 단계별 색상 코드를 만드세요바로 사용
- HEX 투명도 변환색상과 불투명도로 8자리 HEX 코드를 만드세요바로 사용
- SVG 패턴 생성색상·간격·굵기를 지정해 점·선·격자 SVG를 만드세요바로 사용
- CSS 식별자 이스케이프CSS 식별자 이스케이프에 필요한 값을 입력하고 결과를 복사하거나 저장하세요바로 사용
- CSS 변수 만들기CSS 변수 만들기에 필요한 값을 입력하고 결과를 복사하거나 저장하세요바로 사용
- CSS 미디어 쿼리 생성CSS 미디어 쿼리 생성에 필요한 값을 입력하고 결과를 복사하거나 저장하세요바로 사용
- CSS 애니메이션 생성CSS 애니메이션 생성에 필요한 값을 입력하고 결과를 복사하거나 저장하세요바로 사용
- RGB 채널 확인RGB 채널 확인에 필요한 값을 입력하고 결과를 복사하거나 저장하세요바로 사용
- 색상 상대 휘도색상 상대 휘도에 필요한 값을 입력하고 결과를 복사하거나 저장하세요바로 사용
- 색상 반전색상 반전에 필요한 값을 입력하고 결과를 복사하거나 저장하세요바로 사용
- CSS 필터 만들기CSS 필터 만들기에 필요한 값을 입력하고 결과를 복사하거나 저장하세요바로 사용
- CSS 여백 단계 만들기CSS 여백 단계 만들기에 필요한 값을 입력하고 결과를 복사하거나 저장하세요바로 사용
- CSS 글자 크기 단계CSS 글자 크기 단계에 필요한 값을 입력하고 결과를 복사하거나 저장하세요바로 사용
- CSS 버튼 만들기CSS 버튼 만들기에 필요한 값을 입력하고 결과를 복사하거나 저장하세요바로 사용
- SVG 배지 만들기SVG 배지 만들기에 필요한 값을 입력하고 결과를 복사하거나 저장하세요바로 사용
- SVG 물결 만들기SVG 물결 만들기에 필요한 값을 입력하고 결과를 복사하거나 저장하세요바로 사용
- 글자를 이미지로 만들기글자를 이미지로 만들기 — 입력 안내 → 결과 파일 저장바로 사용
- 색상 팔레트 이미지색상 팔레트 이미지 — 입력 안내 → 결과 파일 저장바로 사용
- SVG · 스프라이트 · 만들기입력 항목: 한 줄에 ID와 SVG 경로를 세로선으로 구분, 크기 (px)바로 사용
- CSS · 변수 · 분석입력 항목: CSS바로 사용
- 만다라 패턴 만들기설정을 바꾸면 미리보기에 반영됩니다. 결과를 확인하고 파일로 저장하세요바로 사용
- 스피로그래프 만들기설정을 바꾸면 미리보기에 반영됩니다. 결과를 확인하고 파일로 저장하세요바로 사용
원하는 작업을 선택하세요
색상을 고르고 CSS·SVG를 만들고 직접 그려보세요.
- 색상·대비색상 코드 변환기 · CSS 그라데이션 만들기 · 랜덤 색상 팔레트
- CSS·레이아웃화면 비율 계산기 · PX·REM 변환기 · CSS 그림자 생성
- SVG·그래픽 생성SVG 패턴 생성 · SVG 배지 만들기 · SVG 물결 만들기
- 그림·픽셀 아트온라인 그림판 · 픽셀 아트 그리기
도구의 입력값과 계산은 브라우저 안에서 처리합니다.
별도 프로그램이나 도구 파일을 내려받지 않고 이 페이지에서 사용하세요.