🎨

색상 팔레트 생성

HEX, RGB, HSL 색상 변환 및 조화로운 색상 팔레트를 생성합니다

🎨색상 선택

색상 정보

HEX:

#3B82F6

RGB:

rgb(59, 130, 246)

HSL:

hsl(217, 91%, 60%)

보색

서로 반대되는 색상으로 강한 대비 효과

#3B82F6

#F6AF3C

삼색

색상환에서 균등하게 배치된 3가지 색상

#3B82F6

#F63C83

#83F63C

유사색

인접한 색상들로 조화로운 느낌

#3B82F6

#523CF6

#3CE0F6

#AF3CF6

단색

하나의 색상에서 파생된 다양한 명도

#3B82F6

#0A5ADB

#3C83F6

#85B2F9

#CEE0FD

최근 사용한 색상

실무 활용 시나리오

웹사이트 디자인 시스템

브랜드 색상을 기반으로 조화로운 색상 팔레트를 생성하여 일관된 UI/UX를 구축합니다.

그래픽 디자인 작업

포스터, 배너, SNS 콘텐츠 제작 시 자동으로 어울리는 색상 조합을 찾아 디자인 시간을 단축합니다.

CSS 코드 변환

디자이너가 제공한 색상을 HEX, RGB, HSL 등 개발에 필요한 다양한 형식으로 즉시 변환합니다.

접근성 색상 검증

배경색과 텍스트 색상의 대비를 확인하여 WCAG 접근성 기준을 충족하는지 검증합니다.

🎨 색상 디자인 이론

🎯

색상 조화의 원리

보색: 색상환의 반대편에 위치한 색상으로 강한 대비와 시각적 긴장감을 만듭니다

유사색: 색상환에서 인접한 색상들로 부드럽고 조화로운 느낌을 줍니다

삼색: 색상환을 120도 간격으로 나눈 3가지 색상으로 균형잡힌 디자인을 만듭니다

💡

색상 심리학

빨강: 열정, 에너지, 긴급함을 나타내며 행동을 유도합니다

파랑: 신뢰, 평온, 전문성을 전달하며 금융/의료 분야에 적합합니다

녹색: 자연, 성장, 건강을 상징하며 친환경 브랜드에 효과적입니다

♿

접근성 고려사항

명도 대비: 텍스트와 배경의 명도 차이를 4.5:1 이상 유지 (WCAG AA 기준)

색맹 대응: 색상만으로 정보를 전달하지 않고 아이콘이나 패턴을 함께 사용

테스트: 다양한 조명 환경과 디바이스에서 색상이 잘 보이는지 확인

💡 프로 팁

색상 조합 선택

유사색 조합은 부드럽고 안정적인 느낌을, 보색 조합은 대비가 강한 역동적인 느낌을 줍니다.

조화 방식 활용

삼색 조합은 균형잡힌 디자인에 적합하며, 사각 조합은 풍부하고 다양한 표현에 유용합니다.

색상 포맷 이해

HEX는 웹에서 가장 많이 사용되며, RGB는 디지털 디스플레이, HSL은 색상 조정에 직관적입니다.

색상 심리학 고려

브랜드 색상을 선택할 때는 색상 심리학을 고려하세요. 파란색은 신뢰감, 빨간색은 열정을 나타냅니다.

🚀 고급 활용법

CSS 변수로 관리

색상 팔레트를 CSS 변수로 정의하여 일관성 있고 유지보수가 쉬운 디자인 시스템을 구축하세요.

:root { --primary: #3b82f6; --secondary: #8b5cf6; }

다크 모드 대응

밝은 테마와 어두운 테마를 위한 색상 팔레트를 각각 생성하여 사용자 경험을 향상시키세요.

@media (prefers-color-scheme: dark) { --bg: #1a1a1a; }

브랜드 일관성

생성된 팔레트를 디자인 시스템 문서에 통합하여 팀 전체가 동일한 색상을 사용하도록 합니다.

primary: { 50: '#eff6ff', 500: '#3b82f6', 900: '#1e3a8a' }

접근성 검증

생성된 색상 조합을 대비 검사 도구로 검증하여 WCAG 기준을 충족하는지 확인하세요.

contrast-ratio(#3b82f6, #ffffff) >= 4.5:1

❓ 자주 묻는 질문

HEX, RGB, HSL의 차이는 무엇인가요?

HEX는 16진수 색상 코드(#RRGGBB), RGB는 빨강/녹색/파랑 값(0-255), HSL은 색상/채도/명도로 표현합니다. 용도에 따라 선택하세요.

어떤 색상 조합을 선택해야 하나요?

유사색은 조화로운 디자인, 보색은 강한 대비, 삼색은 균형잡힌 구성, 사각은 풍부한 표현에 적합합니다.

생성된 팔레트를 저장할 수 있나요?

각 색상을 클릭하여 클립보드에 복사할 수 있습니다. 브라우저의 북마크 기능으로 URL을 저장하여 재사용하세요.

색상 접근성은 어떻게 확인하나요?

생성된 색상을 텍스트와 배경에 적용하고, 별도의 대비 검사 도구로 WCAG 기준(4.5:1 이상)을 확인하세요.

색상 코드 형식 변환은 어떻게 하나요?

원하는 색상을 입력하면 HEX, RGB, HSL 세 가지 형식으로 자동 변환되어 표시됩니다. 필요한 형식을 복사해서 사용하세요.

🛠️ 다른 유용한 도구들

📊

글자 수 세기

텍스트의 글자 수, 단어 수, 문단 수를 실시간으로 측정합니다

📝

줄바꿈 제거

텍스트에서 줄바꿈을 제거하거나 중복 공백을 정리합니다

🔧

공백 제거

텍스트의 앞뒤, 전체, 중복 공백을 제거합니다

전체 도구 보기 →

🎯 재미있는 테스트

🐱

나는 어떤 동물일까?

5개 질문으로 알아보는 나의 동물 유형!

🐱🐕🦉🐻🦊🐰

테스트 시작하기

더 많은 테스트 보기 →

뚝딱툴

색상 팔레트 생성

🎨색상 선택

색상 정보

보색

삼색

유사색

단색

최근 사용한 색상

실무 활용 시나리오

🎨 색상 디자인 이론

💡 프로 팁

🚀 고급 활용법

❓ 자주 묻는 질문

관련 도구 및 가이드

🛠️ 다른 유용한 도구들

글자 수 세기

줄바꿈 제거

공백 제거

🎯 재미있는 테스트

나는 어떤 동물일까?