Newtil 도구 모음

컬러 도구 모음

디자이너와 프론트엔드 개발자를 위한 무료 컬러 유틸리티 모음입니다. HEX·RGB·HSL 색상 상호 변환, 스크린 컬러 피커(스포이드), 8색 조화 팔레트 생성기, 웹 접근성 표준 WCAG 2.1 명도 대비(Contrast Ratio) 검사를 무료로 제공합니다.

무료 컬러 도구 모음
한눈에 답변

어떤 도구를 제공하나요?

하나의 색상에서 개발용 HEX·RGB·HSL 값을 얻고, 조화 팔레트를 만들며, 전경과 배경의 접근성 대비를 수치로 확인합니다.

전체 기능

4개 도구

🎨 디자인 & 웹 접근성 컬러 도구

무료 컬러 도구 모음 상세 안내 & FAQ

디자인 시스템 구축과 프론트엔드 퍼블리싱, WCAG 접근성 검증을 위한 핵심 색상 도구를 한곳에서 제공합니다.

⚙️

주요 기능 및 동작 원리

🎯

스크린 컬러 피커 & 스포이드

최신 브라우저 EyeDropper API를 통해 화면의 어떤 픽셀이든 정확한 색상 코드를 직접 추출하고 클립보드에 복사할 수 있습니다.

🔄

HEX · RGB · HSL 무손실 변환

단일 색상 입력만으로 웹 표준 CSS 포맷인 HEX, RGB, HSL, HSV, CMYK 값을 실시간으로 동시 계산하여 제공합니다.

🌈

8색 조화 팔레트 자동 생성

보색(Complementary), 유사색(Analogous), 삼색(Triadic) 등 색채학 이론에 기반한 8색 조화 팔레트와 명도 그라데이션 톤을 자동 생성합니다.

👁️

WCAG 2.1 접근성 명도 대비 검사

전경색과 배경색 간의 명도 대비율(Contrast Ratio)을 측정하여 WCAG AA(4.5:1) 및 AAA(7.0:1) 적합 여부를 즉시 판정합니다.

🚀

3단계 간편 사용 가이드

1

컬러 도구 선택

컬러 피커, 색상 변환기, 조화 팔레트 생성기, WCAG 명도 대비 검사기 중 필요한 도구를 선택합니다.

2

색상 입력 또는 스포이드 추출

HEX 코드나 RGB 값을 직접 입력하거나, 스포이드 툴로 화면 속 원하는 색상을 직접 클릭합니다.

3

변환값 복사 및 팔레트 저장

원클릭으로 CSS 코드를 복사하거나 생성된 컬러 팔레트를 이미지 및 코드로 저장하여 프로젝트에 활용합니다.

자주 묻는 질문 (FAQ)

Q 화면의 색상을 직접 스포이드로 찍을 수 있나요?
네, EyeDropper API를 지원하는 최신 데스크톱 브라우저(Chrome, Edge, Opera 등)에서는 화면 상의 모든 요소를 스포이드로 즉시 추출할 수 있습니다.
Q WCAG 명도 대비 검사 기준은 무엇인가요?
국제 웹 접근성 지침(WCAG 2.1)에 따라 일반 본문 텍스트는 최소 4.5:1(AA) 이상, 18pt 이상의 큰 텍스트는 3:1(AA) 이상이어야 저시력자나 고령자도 편안하게 글을 읽을 수 있습니다.
Q CSS 변수(Variable) 형태로도 제공되나요?
네, 변환된 컬러 값은 표준 HEX6, HEX8(알파 투명도 포함), rgb(), hsl() 및 CSS custom property 형식으로 즉시 복사할 수 있습니다.
Q 모바일 기기에서도 모든 기능을 지원하나요?
모바일 브라우저에서도 색상 코드 입력, 슬라이더 조정, 명도 대비 검사, 팔레트 생성을 완벽하게 지원합니다.
🔗

함께 쓰면 유용한 연관 도구