색상 피커 & 팔레트 생성기
HEX·RGB·HSL·CMYK 색상 변환, 보색·유사색·삼각 배색 팔레트 자동 생성, Tailwind CSS 색상 추천, WCAG 명암비 검사까지 무료로 제공합니다.
광고
text-blue-500HSL
CSS
color: #3b82f6; background-color: #3b82f6; border-color: #3b82f6;
--color-primary: #3b82f6;
bg-[#3b82f6] text-[#3b82f6] border-[#3b82f6]
팔레트 생성
대비 비율 (접근성 AA)
광고
자주 묻는 질문
Q. HEX, RGB, HSL, CMYK의 차이는 무엇인가요?
HEX는 웹에서 #RRGGBB 형식으로 사용하는 16진수 표기입니다. RGB는 빛의 삼원색(빨강·초록·파랑) 혼합 방식입니다. HSL은 색조(Hue)·채도(Saturation)·명도(Lightness)로 표현해 직관적으로 색을 조절할 수 있습니다. CMYK는 인쇄에서 시안·마젠타·노랑·검정 잉크 비율을 나타냅니다.
Q. 보색이란 무엇인가요?
보색(Complementary Color)은 색상환에서 정반대편에 위치한 색으로, 함께 쓰면 강렬한 대비를 만듭니다. 예) 빨강 ↔ 청록, 파랑 ↔ 주황. 광고·버튼 강조 등 주의를 끌 때 자주 활용됩니다.
Q. WCAG 명암비 기준이란?
WCAG(Web Content Accessibility Guidelines)는 텍스트와 배경 간 명암비를 최소 4.5:1(AA 기준), 큰 텍스트는 3:1 이상 권장합니다. 이 기준을 충족해야 시각 장애인도 콘텐츠를 읽을 수 있습니다.
Q. Tailwind CSS 색상 추천은 어떻게 작동하나요?
입력한 색에서 가장 가까운 Tailwind CSS 기본 팔레트 색상(예: blue-500, rose-300)을 자동으로 찾아줍니다. 클래스명을 바로 복사해 프로젝트에 사용할 수 있습니다.
Q. 최근 사용 색상은 어디에 저장되나요?
브라우저의 localStorage에 최대 8개까지 저장됩니다. 시크릿 모드에서는 저장되지 않으며 브라우저 데이터 삭제 시 함께 지워집니다.
Q. 팔레트를 이미지로 저장할 수 있나요?
현재 버전에서는 각 색상 칩을 클릭하면 HEX 값이 클립보드에 복사됩니다. 이미지 저장 기능은 추후 업데이트 예정입니다.
이 도구 사용하는 방법
색상 슬라이더(HSL)를 드래그하거나 HEX 입력란에 직접 코드를 입력합니다.
HEX, RGB, HSL, CMYK 각 형식의 복사 버튼을 눌러 원하는 코드를 클립보드에 복사합니다.
보색·유사색·삼각 배색 중 원하는 방식을 선택하면 자동으로 5가지 색상 팔레트가 생성됩니다.
하단에서 가장 가까운 Tailwind CSS 클래스명을 확인하고, WCAG 명암비 통과 여부를 확인합니다.
색상 피커 & 팔레트 생성기에 대해 알아야 할 전문 지식
색상 이론에서 팔레트 선택은 사용자 경험과 브랜드 인지도에 직결됩니다. 보색 배열은 높은 시각적 긴장감을 만들어 CTA 버튼이나 경고 메시지에 적합하고, 유사색 배열은 부드럽고 통일감 있는 디자인에 쓰입니다. WCAG 2.1 AA 기준 최소 명암비 4.5:1은 전 세계 약 3억 명의 색각 이상자와 저시력자에게 콘텐츠 접근성을 보장하기 위한 국제 표준입니다. Tailwind CSS는 450+개의 사전 정의 색상을 제공하며, 일관된 디자인 시스템 유지에 필수적입니다.
함께 사용하면 좋은 도구
JPG·PNG 이미지를 브라우저에서 1초 만에 WebP로 변환·압축합니다. 서버 전송 없이 클라이언트 처리로 개인정보 안전. PNG 대비 26% 용량 절감으로 Core Web Vitals LCP 개선.
한글 포스트 제목을 SEO에 최적화된 영문 URL slug로 즉시 변환합니다. 워드프레스, 네이버 블로그, 티스토리 등 모든 플랫폼에서 활용 가능. 특수문자 자동 제거, 소문자 변환, 하이픈 연결.
본문에서 핵심 키워드 등장 횟수와 밀도(%)를 0.1% 단위로 즉시 분석합니다. 1~3% 적정 범위를 벗어나는 과최적화를 사전에 감지해 구글 패널티를 방지하세요.
광고