🎨
무료 색상 팔레트 생성기
임의의 기본 색상에서 보완, 유사, 삼색, 단색 팔레트를 생성합니다. 한 번의 클릭으로 hex 코드를 복사합니다.
한 번 로드하면 오프라인에서도 작동
hex 코드, teal이나 tomato 같은 색상 이름, 또는 rgb(20, 184, 166) / hsl(174, 80%, 40%)을 입력한 뒤 Enter를 누르세요.
브랜드 팔레트 · 7 색상
복사 형식
내보내기:
기본색
흰색 위 2.5미달
검은색 위 8.4AAA
강조색
흰색 위 2.9미달
검은색 위 7.2AAA
밝은 틴트
흰색 위 1.1미달
검은색 위 19.4AAA
어두운 셰이드
흰색 위 9.0AAA
검은색 위 2.3미달
밝은 중립색
흰색 위 1.1미달
검은색 위 19.3AAA
중간 중립색
흰색 위 4.1AA 큰 글자
검은색 위 5.1AA
어두운 중립색
흰색 위 16.1AAA
검은색 위 1.3미달
글자색과 배경색 확인
큰 제목 샘플
이 조합의 본문 텍스트 샘플
8.44:1일반 텍스트 AAA큰 텍스트 AAA
이런 팔레트도 써 보세요
주요 용도
- 웹 디자인용 색상 팔레트 생성웹사이트, 웹 앱 및 UI 구성 요소용 조화로운 색 구성표를 만듭니다.
- 브랜드 색상 팔레트 만들기단일 브랜드 색상에서 완전한 브랜드 색상 시스템을 개발합니다. 1차, 2차, 악센트 및 중성색.
- 예술 및 삽화용 색상 팔레트 생성디지털 아트, 삽화 및 창의적인 프로젝트용 조화로운 색상 조합을 만듭니다.
- Figma용 색상 스타일 생성Figma 색상 스타일 및 설계 토큰 기초로 사용할 색상 팔레트를 만듭니다.
- 다크 모드용 색상 팔레트 만들기다크 모드 지원을 구축하기 위해 색상 팔레트의 밝은 버전과 어두운 버전을 생성합니다.
사용 방법
이 도구는 외부 라이브러리 없이 만들어졌으며, 모든 색상 계산은 브라우저에서 직접 작성한 JavaScript로 실행됩니다. 선택한 색을 16진수와 HSL 사이에서 변환한 다음, 색상환의 색조 산술로 고전 색채 이론의 조화 규칙(보색, 삼각, 유사색 등)을 적용해 각 팔레트를 만듭니다.
- 116진수 → HSL 변환색을 선택하면 도구는 16진 문자열을 RGB 성분으로 파싱하고 HSL(색조, 채도, 명도)로 변환합니다. 색조는 색상환에서의 0–360도 위치이며, 팔레트 계산은 모두 이 공간에서 이루어집니다.
- 2조화를 위한 색조 산술각 팔레트 유형은 기본 색조에 적용하는 고정 회전 공식입니다. 보색은 180°, 삼각은 120°와 240°, 사각은 90° 간격, 분할 보색은 150°와 210°를 더합니다. 단색과 음영은 색조와 채도를 고정하고 명도만 올리고 내립니다.
- 3HSL → 16진수 출력계산된 각 HSL 값은 표준 채도 공식으로 다시 16진 색상으로 변환됩니다. 결과는 간단한 휘도 기준으로 자동 대비된 라벨(밝은 견본에는 어두운 글자, 어두운 견본에는 밝은 글자)과 함께 색상 띠로 표시됩니다.
- 4원하는 형식으로 내보내기팔레트는 16진 문자열로 복사하거나 CSS 변수 파일(:root { --color-1: … }), SCSS 변수, Tailwind 설정 조각, JSON 객체, PNG 색상 띠로 내보낼 수 있습니다. PNG 내보내기는 브라우저의 Canvas API(toDataURL)로 각 견본과 16진 라벨을 그리며, 모든 것이 클릭 시 로컬에서 생성됩니다.