디자인무료

🎨

색상 피커 & 팔레트 생성기

HEX·RGB·HSL·CMYK 색상 변환, 보색·유사색·삼각 배색 팔레트 자동 생성, Tailwind CSS 색상 추천, WCAG 명암비 검사까지 무료로 제공합니다.

#3B82F6

가장 가까운 Tailwind: text-blue-500

HSL

217

HEX

#3B82F6

RGB

rgb(60, 131, 246)

HSL

hsl(217, 91%, 60%)

CMYK

cmyk(76%, 47%, 0%, 4%)

CSS

color: #3b82f6;
background-color: #3b82f6;
border-color: #3b82f6;

CSS Variable

--color-primary: #3b82f6;

Tailwind

bg-[#3b82f6] text-[#3b82f6] border-[#3b82f6]

팔레트 생성

#3C83F6

#F6AF3C

#9EC1FA

#FAD79E

#5B8AD7

대비 비율 (접근성 AA)

3.7:1

AA ✗

5.7:1

AA ✓

3.7:1

AA ✗

5.7:1

AA ✓

색상 피커 & 팔레트 생성기 결과를 보는 기준

색상 피커 & 팔레트 생성기는 단독 정답이 아니라 빠른 판단 보조 도구로 쓰는 것이 가장 좋습니다. 입력값을 먼저 확인하고, 관련 도구나 허브로 한 번 더 비교한 뒤 실제 조건에 맞게 해석해야 합니다.

입력값 먼저 확인

색상 피커 & 팔레트 생성기 결과는 단위, 기간, 금액, 날짜, 문장 입력이 조금만 달라도 달라질 수 있습니다. 복사하거나 공유하기 전에 입력값을 다시 확인하세요.

가정과 함께 보관

나중에 다시 볼 결과라면 날짜와 입력 가정을 같이 적어두세요. 숫자만 저장하면 며칠 뒤 왜 그런 결과가 나왔는지 헷갈리기 쉽습니다.

경계값은 가이드 확인

결과가 기준선 근처라면 관련 글이나 허브를 함께 확인하세요. 도구는 빠르게 계산하지만 수수료, 정책, 개인 조건은 최종 판단을 바꿀 수 있습니다.

전체 도구 주제 허브 관련 글 도구 카테고리

결과를 바로 쓰기 전 체크할 것

색상 피커 & 팔레트 생성기 결과를 바로 행동으로 옮기기 전에 아래 기준을 한 번 더 확인하세요. 단순 계산은 빠르게 끝나지만, 실제 결정은 돈, 시간, 일정, 검색 노출, 건강, 업무 조건처럼 여러 요소가 같이 움직입니다.

입력값 하나에 결과가 크게 바뀌는지

금액, 기간, 날짜, 단위, 키워드, URL처럼 핵심 입력값 하나가 결과를 크게 흔든다면 보수적인 값과 공격적인 값을 각각 넣어 두 번 확인하세요. 한 번의 결과보다 두 결과의 차이가 더 중요한 판단 근거가 될 수 있습니다.

날짜와 조건을 같이 저장했는지

환율, 수수료, 세금, 플랫폼 정책, 검색 수요, 개인 상황은 시간이 지나면 바뀝니다. 나중에 다시 볼 결과라면 계산한 날짜와 사용한 조건을 같이 남겨야 결과를 잘못 해석하지 않습니다.

정책이나 예외 조건이 있는지

브라우저 도구는 모든 지역 규칙, 은행 조건, 플랫폼 제한, 개인 예외를 알 수 없습니다. 결과가 기준선 근처라면 바로 움직이지 말고 관련 글과 가이드를 같이 확인하는 편이 안전합니다.

다음으로 할 일

색상 피커 & 팔레트 생성기를 사용한 뒤에는 입력값, 결과값, 내가 하려는 행동을 짧게 적어두세요. 다시 봐도 같은 방향이 맞다면 관련 허브나 가이드로 넘어가 더 넓은 맥락을 확인한 뒤 실행하는 것이 좋습니다.

자주 묻는 질문

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 클래스 및 접근성 확인

하단에서 가장 가까운 Tailwind CSS 클래스명을 확인하고, WCAG 명암비 통과 여부를 확인합니다.

색상 피커 & 팔레트 생성기에 대해 알아야 할 전문 지식

색상 이론에서 팔레트 선택은 사용자 경험과 브랜드 인지도에 직결됩니다. 보색 배열은 높은 시각적 긴장감을 만들어 CTA 버튼이나 경고 메시지에 적합하고, 유사색 배열은 부드럽고 통일감 있는 디자인에 쓰입니다. WCAG 2.1 AA 기준 최소 명암비 4.5:1은 전 세계 약 3억 명의 색각 이상자와 저시력자에게 콘텐츠 접근성을 보장하기 위한 국제 표준입니다. Tailwind CSS는 450+개의 사전 정의 색상을 제공하며, 일관된 디자인 시스템 유지에 필수적입니다.