🧰 무료도구모음

홈 › 색상·디자인

색상·디자인 도구 모음

색상·디자인 카테고리는 웹 개발자와 디자이너가 자주 반복하는 색상 선택·CSS 코드 작업을 브라우저에서 바로 처리할 수 있도록 모아 둔 공간입니다. HEX·RGB·HSL 변환이나 RGB CMYK 변환처럼 색상 코드를 빠르게 바꾸는 도구부터, 색상 팔레트와 보색·배색 팔레트로 어울리는 배색 조합을 찾고, 그라데이션 생성기나 메시 그라데이션 생성기로 배경 CSS를 즉시 뽑아낼 수 있습니다. 명도대비 검사기(WCAG)로 텍스트 가독성을 확인하거나, 글래스모피즘 CSS 생성기·뉴모피즘 CSS 생성기로 트렌디한 UI 효과 코드를 슬라이더 조작만으로 얻을 수 있습니다. CSS 버튼 생성기, CSS 카드 생성기, CSS 말풍선 생성기처럼 반복 제작이 번거로운 컴포넌트 코드도 클릭 몇 번으로 완성됩니다. 파일 업로드 없이 모두 로컬에서 동작하므로 어떤 환경에서도 안전하게 사용할 수 있습니다.

오피스넷 사무용품 단체구매

색상·디자인 전체 도구 (38개)

그라데이션 생성기CSS 배경

그림자 생성기box-shadow

색상 팔레트배색 추천

명도대비 검사WCAG 접근성

HEX·RGB·HSL 변환색상 코드

랜덤 색상 생성무작위 색상을 생성하고 HEX·RGB를 복사

색상 혼합기두 색상을 비율로 섞은 결과 색을 보여줍니다

명도 대비 검사기(WCAG)두 색의 명도 대비비를 계산해 WCAG 접근

CSS 둥근 모서리 생성기슬라이더로 CSS border-radius

CSS 텍스트 그림자 생성기CSS 텍스트 그림자(text-shadow)

그라데이션 텍스트 생성기두 색의 그라데이션 글자 CSS를 만들고 복

색상 명암 팔레트한 색의 밝은 톤·어두운 톤 단계를 자동 생

보색·배색 팔레트기준 색의 보색·유사색·삼색 조합을 생성합니

글래스모피즘 CSS 생성기반투명 유리(글래스모피즘) 효과 CSS를 생

CSS 삼각형 생성기방향·크기·색상으로 CSS 삼각형 코드를 생

CSS 로딩 스피너 생성기크기·색상·속도를 조절한 CSS 로딩 스피너

CSS 이징 곡선 생성기CSS 애니메이션 이징(cubic-bezie

색상 이름 찾기HEX 색상과 가장 가까운 색 이름을 찾아줍

뉴모피즘 CSS 생성기부드러운 입체감의 뉴모피즘 CSS를 생성합니

CSS 버튼 생성기색상·모서리·크기를 조절한 CSS 버튼 코드

글자 파비콘 생성기글자와 색으로 파비콘(favicon) 이미지

placeholder 이미지 생성기원하는 크기·색의 더미(placeholder

CSS 테두리 생성기두께·스타일·색·모서리를 조절한 CSS 테두

CSS 그리드 생성기열·행·간격을 조절한 CSS Grid 레이아

CSS 배경 패턴 생성기점·줄무늬·격자 등 CSS 배경 패턴을 생성

SVG 물결 구분선 생성기섹션 구분용 물결 모양 SVG를 생성합니다.

RGB CMYK 변환화면 색(RGB)을 인쇄용 CMYK로 변환합

메시 그라데이션 생성기여러 색이 어우러진 메시 그라데이션 배경 C

CSS 플렉스박스 생성기flex 방향·정렬을 조절하며 CSS 코드를

CSS 카드 생성기그림자·모서리·여백을 조절한 카드 CSS를

CSS 비율 박스 생성기16:9 등 화면비를 유지하는 박스 CSS를

CSS 색상 이름표CSS 표준 색상 이름과 HEX 코드를 모아

머티리얼 색상 팔레트구글 머티리얼 디자인 색상을 모아 복사합니다

CSS 텍스트 외곽선글자에 외곽선(테두리)을 넣는 CSS를 생성

CSS 말풍선 생성기꼬리 방향·색을 조절한 말풍선 CSS를 생성

그라데이션 테두리그라데이션 색 테두리 CSS를 생성합니다.

CSS 스크롤바 생성기웹킷 스크롤바 색·두께를 꾸미는 CSS를 생

이니셜 아바타 생성기이름 이니셜로 컬러 아바타 이미지를 만듭니다

자주 묻는 질문

정말 무료로 사용할 수 있나요?

네, 이 카테고리의 모든 도구는 완전 무료입니다. 회원가입이나 결제 없이 페이지를 열면 바로 사용할 수 있습니다.

색상 값이나 CSS 코드가 서버로 전송되나요?

아니요. 모든 계산과 코드 생성은 브라우저 안에서만 이루어집니다. 입력한 값은 외부 서버로 전송되지 않습니다.

설치나 플러그인이 필요한가요?

별도 설치나 플러그인 없이 크롬·사파리·엣지 등 최신 브라우저에서 바로 동작합니다.

생성된 CSS 코드를 어떤 프로젝트에도 쓸 수 있나요?

네, 생성된 코드는 표준 CSS이므로 HTML·React·Vue 등 어떤 웹 프로젝트에도 복사해 바로 붙여 넣을 수 있습니다. 라이선스 제한도 없습니다.