홈 › 개발·웹 도구

색상 팔레트 만들기

웹·발표 자료는 주색 1개, 보조색 1~2개, 강조색 1개 정도면 깔끔해요.

파일은 서버로 전송되지 않고 내 기기에서만 처리돼요

색상 팔레트, 색상환 각도로 짝을 정하는 원리

언제 쓰나요

가게 로고 색은 정해져 있는데 메뉴판 배경과 강조 문구에는 무슨 색을 써야 할지 막막할 때, 발표 자료 그래프에 서로 구분되면서도 어울리는 색 다섯 개가 필요할 때, 마음에 드는 풍경 사진의 분위기를 블로그 디자인에 옮기고 싶을 때 이 도구를 써요. 감으로 고르기 전에 규칙에 맞는 후보를 먼저 받아 보고, 그중에서 덜어 내는 편이 훨씬 빨라요.

사용 방법

대표 색 상자에 1번, 배색 방법 선택에 2번 표시가 붙은 화면

1단계대표 색과 배색 방법

  1. ① 기본 대표 색은 짙은 초록 #2F6B3F예요. 눌러서 내 브랜드 색으로 바꿔요.
  2. ② 처음 열면 ‘단계 색’이 골라져 있어요. 다른 방법으로 바꾸면 아래 색 칸이 바로 다시 만들어져요.
팔레트 색 칸에 3번, CSS 변수 칸에 4번, 복사·PNG 버튼에 5번 표시가 붙은 화면

2단계색 고르고 내보내기

  1. ③ 색 칸을 누르면 HEX 코드가 복사돼요. 칸 글자색은 배경 밝기에 따라 검정·흰색으로 자동으로 바뀌어요.
  2. ④ 색 순서대로 --color-primary, secondary, accent, light, dark 이름이 붙고, 6번째부터는 extra-1, 2, 3이 붙어요. 단계 색일 때만 대표 색이 --color-primary, 일곱 단계가 primary-50부터 primary-900까지로 붙어요.
  3. ⑤ PNG는 색 하나당 가로 200px 띠에 코드 글자를 아래에 적은 그림이에요.

색을 고르는 계산

대표 색을 HSL로 바꾼 뒤, 채도와 밝기는 그대로 두고 색상각만 돌려 짝을 찾아요. 기본 색은 색상각 136°, 채도 39%, 밝기 30%예요.

색상환 배색 각도 그림대표 색의 색상각 136도를 기준으로 보색은 180도, 삼각 배색은 120도와 240도, 분할 보색은 150도와 210도 떨어진 자리의 색을 골라요.색상각만 돌려서 짝을 찾아요136°대표 색대표 색136°보색+180°삼각 배색+120°, +240°분할 보색+150°, +210°채도·밝기는 그대로
대표 색 136°에서 보색은 180°, 삼각 배색은 120°씩, 분할 보색은 150°와 210° 떨어진 자리를 골라요.
방법돌리는 각도기본 색으로 만든 결과(대표 색 제외)
보색180° + 밝게 한 두 색 + 연회색#60B978 #6B2F5B #B960A2 #F1F3F2
유사색−30°, −15°, +15°, +30°#3D6B2F #2F6B30 #2F6B4E #2F6B5D
삼각 배색120°, 240° + 밝은 색·어두운 색#3F2F6B #6B3F2F #84C996 #183620
분할 보색150°, 210° + 밝은 색·짙은 색#5D2F6B #6B2F3D #84C996 #293D2E
사각 배색90°, 180°, 270° + 연회색#2F3D6B #6B2F5B #6B5D2F #F1F3F2

사진에서 뽑을 때는 사진을 긴 변 120px로 줄이고 반투명한 픽셀은 빼요. 그다음 비슷한 색끼리 모으는 계산을 12번 되풀이하는데, 색 거리를 잴 때 빨강 2 : 초록 4 : 파랑 3의 가중치를 줘서 초록 차이를 가장 크게 봐요. 묶음에 들어간 픽셀 수가 많은 색부터 보여 줘요.

도움말팔레트에서 색을 정한 뒤 글자로 쓸 색과 배경색 짝은 색상 코드 변환에 넣어 대비 판정을 받아 두면 화면에서 읽기 어려운 조합을 미리 걸러 낼 수 있어요.

주의할 점

더 궁금한 점

유사색 결과가 거의 같은 색처럼 보여요.

15° 간격이라 채도가 낮거나 아주 어두운 대표 색에서는 차이가 작게 보여요. 대표 색을 조금 밝게 바꾸면 차이가 뚜렷해져요.

사진에서 뽑은 색으로도 보색을 만들 수 있나요?

뽑힌 색을 눌러 복사한 뒤 ‘대표 색으로’ 탭의 색 상자에 넣으면 그 색을 기준으로 배색을 다시 만들 수 있어요.

팔레트 PNG에는 무엇이 담기나요?

색 하나마다 가로 200px, 높이 200px 색 띠를 나란히 놓고, 그 아래 흰 바탕에 HEX 코드를 적은 그림이에요. RGB 값은 들어가지 않아요.

어울리는 색 조합을 쉽게

발표 자료, 블로그, 가게 메뉴판, 쇼핑몰 배너를 만들 때 색을 아무렇게나 고르면 어수선해 보이기 쉬워요. 이 도구는 대표 색 하나에서 색상환의 규칙에 따라 어울리는 색 조합을 만들어 주고, 좋아하는 사진에서 주요 색을 뽑아 팔레트로 만들어 줘요. 색을 누르면 HEX 코드가 복사되고, 웹 작업에 바로 쓰는 CSS 변수나 팔레트 이미지로 받을 수 있어요.

배색 방법

사진에서 색 뽑기

여행 사진, 제품 사진, 좋아하는 그림을 올리면 사진을 작게 줄인 뒤 비슷한 색끼리 묶는 방식(k-평균 군집)으로 많이 쓰인 색을 찾아 많이 나온 순서대로 보여 줘요. 5~8개 중에서 고를 수 있어요. 사진의 분위기를 그대로 디자인에 옮기고 싶을 때 좋아요. 사진은 이 기기에서만 분석해요.

팔레트를 쓸 때는 주색 하나를 넓게, 보조색을 좁게, 강조색은 버튼·제목처럼 꼭 필요한 곳에만 쓰면 깔끔해요. 글자색과 배경색의 대비가 충분한지는 ‘색상 코드 변환’의 대비 검사로 확인하세요.

팔레트 아래의 CSS 변수는 primary, secondary, accent 같은 이름으로 정리돼 있어서 웹사이트 스타일 파일에 바로 붙여넣을 수 있어요. 팔레트 PNG는 디자이너나 인쇄소에 색을 전달할 때 편해요.

자주 묻는 질문

다른 도구와 색이 조금 달라요.

색상환 계산 방식(HSL)과 밝기 보정이 도구마다 달라 조금씩 차이가 날 수 있어요.

사진에서 뽑은 색 순서는요?

사진에서 차지하는 면적이 넓은 색부터 보여 줘요.

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

CSS를 복사하거나 PNG로 받아 두세요.

함께 쓰면 좋은 도구