MUTools

색상 & 디자인 도구

색상 & 디자인 도구 소개

컬러 피커, 색상 코드 변환, 명도 대비 검사, 색상 팔레트 생성 등 배색과 디자인 작업을 돕는 무료 도구 모음입니다. 모두 브라우저 안에서 동작하며 가입이나 설치가 필요 없습니다.

UI 배색 결정, 접근성(WCAG)을 고려한 대비 확인, 브랜드 컬러 선정 등에 유용합니다. 디자이너·웹 제작자·프런트엔드 엔지니어 등 색을 다루는 모든 분께 추천합니다.

색상 & 디자인 도구 목록

컬러 피커

이미지에서 색을 추출해 HEX·RGB·HSL 컬러 코드를 얻는 무료 컬러 피커입니다. 돋보기로 확대해 픽셀 단위로 정확히 색을 고르고 팔레트를 내보낼 수 있습니다. 가입 없이 바로 사용할 수 있습니다.

  • 디자인 & 색상
  • 생산성

색상 팔레트 추출

이미지를 업로드하면 주요 색상(대표 색상)을 자동으로 추출해 팔레트를 만드는 무료 도구. HEX/RGB/HSL 확인, 색상별 비율 표시, 4~12색 조절, CSS 변수·SCSS·Tailwind·JSON 내보내기 지원. 이미지는 서버로 전송되지 않고 브라우저만으로 완결됩니다.

  • 추출
  • 디자인 & 색상

색상 팔레트 생성기

베이스 컬러를 한 가지만 고르면 보색·유사색·트라이어드 등 색채 이론에 기반한 색상 팔레트를 자동으로 만들어 주는 무료 배색 생성기입니다. CSS 변수·Tailwind·SCSS·JSON 형식으로 내보낼 수 있고 명암 대비의 기준도 확인할 수 있습니다. 웹 브라우저만으로 완결됩니다.

  • 생성기
  • 디자인 & 색상

컬러 코드 변환

HEX·RGB·HSL·HSV·OKLCH 컬러 코드를 서로 변환하는 무료 도구입니다. 투명도(RGBA·8자리 HEX·HSLA)와 CMYK 참고값도 지원하며, 입력한 색을 모든 형식으로 한 번에 변환해 원클릭 복사할 수 있습니다. 웹 브라우저만으로 완결됩니다.

  • 변환
  • 디자인 & 색상

명도 대비 검사

전경색과 배경색의 명도 대비(콘트라스트 비율)를 실시간으로 계산하는 무료 명도 대비 검사 도구입니다. WCAG 2.1·2.2 AA·AAA 판정과 통과색 자동 제안, 색각 시뮬레이션, APCA를 지원합니다. 웹 브라우저만으로 완결됩니다.

  • 검사기
  • 디자인 & 색상
  • 접근성

CSS 그래디언트 생성기

색·방향·컬러 스톱을 GUI 로 조작해 CSS 그래디언트를 자동 생성하는 무료 도구입니다. 선형·방사형·원뿔형(conic) 그라데이션과 투명도 조정을 지원하고 CSS 변수·Tailwind·SCSS 형식 내보내기와 공유 URL 도 제공합니다. 복사해서 바로 쓸 수 있고 웹 브라우저만으로 완결됩니다.

  • 생성기
  • 개발
  • 디자인 & 색상

CSS 그림자 생성기

box-shadow 생성기로 CSS 그림자(box-shadow·drop-shadow)를 슬라이더 조작만으로 실시간 생성합니다. 다중 레이어와 inset(안쪽), 뉴모피즘·롱 섀도우·글로우 프리셋을 지원하고 CSS·CSS 변수·Tailwind·SCSS 코드로 출력하며 공유 URL도 제공합니다. 웹 브라우저만으로 완결됩니다.

  • 생성기
  • 디자인 & 색상

색상 이름·근접색 찾기

HEX·RGB·HSL 색상 코드를 입력하면 가장 가까운 CSS 색상 이름을 찾고, 색상 이름으로 HEX·RGB를 역으로 조회할 수 있는 무료 도구입니다. hex 색상 이름, rgb 색상 이름, 비슷한 색 확인까지 한 번에. 웹 브라우저만으로 완결됩니다.

  • 검사기
  • 디자인 & 색상

Tailwind 색상 스케일 생성

베이스 컬러 한 가지만 지정하면 Tailwind 방식의 50-950(11 단계) 색상 스케일을 자동으로 만들어 주는 무료 tailwind 팔레트 생성기입니다. Tailwind v4 의 @theme(OKLCH)·v3 의 config·CSS 변수·JSON 으로 출력할 수 있고, HEX/OKLCH/HSL/RGB 표시 전환과 명암비 기준도 확인할 수 있습니다. 웹 브라우저만으로 완결됩니다.

  • 생성기
  • 개발
  • 디자인 & 색상

다른 카테고리