색상 팔레트 생성기
이 페이지는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
색상 설정
기준 색상 (HEX)
배색 방식
CSS 변수
:root {
--color-1: #64ADF2;
--color-2: #6366F1;
--color-3: #A864F2;
}기준 색상에서 다양한 배색 조합 팔레트를 자동으로 생성합니다.
활용하기
브랜드 색에서 조화로운 배색 만들기
좋은 배색은 감이 아니라 색상환의 규칙에서 나옵니다. 본 도구는 기준 색 하나에서 보색(반대편 색)·유사색(이웃한 색)·트라이아드(삼각 배치) 같은 조합을 자동으로 만들어, 한국 브랜드·쇼핑몰·발표 자료의 색 구성을 체계적으로 잡도록 돕습니다. 메인 색을 정하고 거기서 강조색·보조색을 파생시키면 통일감 있는 화면을 만들 수 있습니다.
실무에서는 보통 주조색·보조색·강조색의 비율을 60:30:10 정도로 두는 것이 안정적입니다. 강조색을 너무 많이 쓰면 시선이 분산되어 정작 중요한 버튼이 묻힙니다. 또한 화면에서 보기 좋은 색이 인쇄물에서는 다르게 나올 수 있고, 색 대비가 낮으면 접근성에 문제가 되므로 텍스트·배경 조합은 명도 대비를 별도로 확인하는 것이 좋습니다.
자주 묻는 질문
보색(Complementary)이란?
유사색(Analogous) 배색은 언제 쓰나요?
트라이아드(Triadic)와 테트라드(Tetradic)의 차이는?
명도 단계(Shades)는 어떻게 활용하나요?
브랜드 메인 컬러 하나로 팔레트를 만드는 방법은?
색맹(Color Blindness) 사용자를 고려한 팔레트 선택 방법은?
Figma에서 색상 팔레트를 디자인 시스템으로 구축하는 방법은?
JSON 포매터 사용법: API 응답 데이터를 깔끔하게 정리하는 방법
JSON 포매터(JSON Formatter)로 압축된 JSON을 보기 좋게 정리하고, JSON 유효성 검사 및 데이터 구조를 분석하는 방법을 소개합니다.
29분 읽기관련
관련 도구
읽을거리
관련 글
JWT 완벽 가이드: 구조·클레임·서명 알고리즘 총정리
JWT(JSON Web Token)의 Header·Payload·Signature 구조부터 HS256 vs RS256 비교, 보안 취약점까지 실무 중심으로 정리합니다.
21분 읽기CSS box-shadow 완벽 가이드: 문법부터 실전 예시까지
CSS box-shadow 문법, offset·blur·spread·inset 옵션, 레이어드 쉐도우까지 실무 예시와 함께 정리했습니다. 박스 쉐도우 생성기로 코드를 즉시 추출하세요.
17분 읽기CSV ↔ JSON 변환 가이드: 엑셀을 API로 바꾸는 법
CSV·JSON 형식 차이, 상호 변환 방법, 한글 인코딩(EUC-KR vs UTF-8) 문제, 쉼표·줄바꿈 이스케이프, 대용량 처리, JSON Lines까지 실무 노하우를 정리합니다.
29분 읽기