색상 팔레트 생성기

색상팔레트생성 사용 방법

1. 기본 색상에서 색을 고릅니다. 왼쪽 색 상자를 눌러 고르거나, 오른쪽 칸에 #3498db 형태로 직접 적어도 됩니다. 정할 색이 마땅치 않으면 랜덤 색상 버튼을 눌러 보세요.
2. 팔레트 타입에서 조합 방식을 고릅니다. 무난하게 쓰려면 단색조나 유사색을, 강조 색이 필요하면 보색을 고르는 식입니다.
3. 색상 개수 슬라이더로 몇 가지 색을 뽑을지 정합니다. 3개에서 10개까지 가능하고 처음 값은 5개입니다.
4. 아래 세부 조정에서 채도, 색조 이동, 대비를 움직여 전체 색감을 다듬습니다. 위쪽의 밝기 조정 슬라이더는 팔레트 전체를 밝거나 어둡게 만듭니다.
5. 완성된 색 조각을 클릭하면 그 색의 코드가 복사됩니다. 모든 색상 복사로 전체를 한 번에 가져가거나, 팔레트 내보내기로 설정과 색 목록이 담긴 파일을 내려받습니다.

지원 형식과 입력 조건

팔레트 타입

단색조(기본값), 유사색, 보색, 삼색조, 사색조, 분할 보색, 정사각형

색상 개수

3개 ~ 10개 (기본값 5개)

기본 색상

#3498db. 직접 입력은 샾을 포함한 여섯 자리 형식만 인식합니다

밝기 조정

-50 ~ +50 (기본값 0)

세부 조정

채도 -30 ~ +30, 색조 이동 -30 ~ +30, 대비 -20 ~ +20

인기 팔레트

미리 준비된 6종 (각 5색)

내보내기

JSON 파일. 기준 색, 팔레트 타입, 색 목록, 만든 시각이 담깁니다

처리 위치

브라우저 내부. 서버로 전송되는 값이 없습니다

팔레트 타입별로 어떤 색이 나오는지

• 단색조 — 기준 색의 색조는 그대로 두고 밝기만 단계적으로 바꿉니다. 한 가지 색으로 통일감 있게 꾸밀 때 가장 안전한 선택입니다.
• 유사색 — 색상환에서 30도씩 떨어진 이웃 색들을 뽑습니다. 서로 자연스럽게 이어져 부드러운 인상을 줍니다.
• 보색 — 기준 색과 색상환 정반대(180도) 색을 짝지어, 각각의 밝기 변형을 섞어 채웁니다. 대비가 강해 버튼이나 강조 문구에 쓸 색을 함께 뽑을 때 좋습니다.
• 삼색조 — 색상환을 삼등분한 120도, 240도 위치의 색입니다. 색이 서로 확실히 구분되어 그래프나 분류 표시에 알맞습니다.
• 분할 보색 — 정반대 색 대신 그 양옆(150도, 210도)을 씁니다. 보색만큼 뚜렷하면서 덜 부담스럽습니다.
• 사색조와 정사각형 — 둘 다 색상환을 90도씩 네 등분한 색을 뽑습니다. 계산 방식이 같아 결과도 같습니다.

슬라이더 네 개가 하는 일

• 밝기 조정은 뽑힌 색 전체를 한꺼번에 밝히거나 어둡게 합니다. 어두운 화면용 배색을 만들 때 음수 쪽으로 내려 보세요.
• 채도는 색의 선명함을 함께 올리거나 내립니다. 값을 내리면 회색에 가까운 차분한 조합이 되고, 올리면 원색에 가까워집니다.
• 색조 이동은 팔레트 전체를 색상환에서 통째로 돌립니다. 조합의 관계는 그대로 두고 계열만 바꾸고 싶을 때 씁니다.
• 대비는 밝은 색은 더 밝게, 어두운 색은 더 어둡게 벌려 놓습니다. 색끼리 잘 구분되지 않을 때 값을 올리면 도움이 됩니다.
• 네 슬라이더는 뽑힌 색에 순서대로 적용되며, 값이 극단으로 가면 서로 다른 색이 비슷하게 보일 수 있습니다. 그럴 때는 값을 0 근처로 되돌리고 팔레트 타입부터 다시 고르는 편이 빠릅니다.

색 복사와 내보내기

• 색 조각을 클릭하면 그 색의 HEX 코드 하나가 복사되고, 모든 색상 복사를 누르면 전체가 쉼표로 이어진 형태로 복사됩니다.
• 팔레트 내보내기는 기준 색, 고른 타입, 색 목록, 만든 시각이 담긴 JSON 파일을 내려받습니다. 파일 이름은 color-palette 뒤에 숫자가 붙은 형태입니다. 이 파일을 다시 불러들이는 기능은 없으므로 기록용으로 쓰시면 됩니다.
• 색 조각 아래에 나오는 이름은 검정, 빨강처럼 널리 알려진 16가지 색과 정확히 일치할 때만 표시되고 그 밖에는 Custom으로 나옵니다. 팔레트에서 뽑힌 색은 대부분 여기에 해당합니다.
• 아래쪽 인기 팔레트를 클릭하면 미리 만들어 둔 5색 조합이 그대로 적용되고, 그 첫 번째 색이 기본 색상으로 설정됩니다. 거기서 팔레트 타입을 바꿔 새로 뽑아 나가는 방법도 있습니다.

자주 묻는 질문

색상·디자인 분류의 다른 도구

• 색상코드변환 HEX·RGB·HSL 색상값을 서로 바꿔 줍니다