왜 만들었나요
배색을 정할 때마다 감으로 고르다 보니 어딘가 촌스러워지고, 같은 배색을 다시 만들려면 매번 처음부터 감을 되짚어야 했습니다. 기준 색 하나에서 규칙에 따라 여러 조합이 한 번에 나오면 고르기만 하면 되겠다 싶어 만들었습니다.
컬러 팔레트
색 하나만 정하면 어울리는 조합을 여러 유형으로 만들어 줍니다. 마음에 드는 색을 클릭해 바로 복사할 수 있습니다.
로딩 중...
Note
고른 색 값은 서버로 전송되지 않습니다. 계산이 전부 브라우저 안에서 이뤄집니다.
사용 방법
-
왼쪽 기준 색상 동그라미를 클릭해 색을 고르거나, HEX 코드 칸에
#33CEB2처럼 직접 넣습니다.
-
오른쪽에 기준 색을 바탕으로 만든 여러 팔레트가 나옵니다. 유형마다 규칙이 달라서 조합의 분위기도 서로 다릅니다.
-
마음에 드는 색을 클릭하면 HEX 코드가 복사됩니다.
이렇게 나옵니다
민트색 하나를 넣으면 이렇게 나옵니다.
| 넣은 것 | 나온 것 |
|---|---|
#33CEB2 | 유형별 팔레트 7벌 (유형에 따라 3~6색) |
같은 기준 색이라도 유형마다 전혀 다른 분위기의 조합이 나옵니다. 색 개수는 유형마다 정해져 있어 그레이 프렌즈·스몰 스위치는 3색, 기본 그라데이션은 6색으로 나옵니다.
알아두면 좋은 것
어떻게 만들어지나
기준 색을 색상·채도·명도 세 값으로 바꾼 뒤, 유형마다 다른 규칙으로 이 값을 움직여 만듭니다.
- 그라데이션 계열 — 색상환의 각도를 단계마다 옮김
- 쉐이드 — 색상은 그대로 두고 명도를 나눔 (채도도 약간 함께 움직입니다)
- 그레이 프렌즈 — 기준 색과 같은 계열의 낮은 채도 회색을 짝지음
첫 색이 안 떠오를 때
정확한 색을 찾으려 애쓰기보다 분위기부터 정하세요.
- 차분하고 신뢰감 있는 서비스 → 파랑 계열
- 따뜻하고 편안한 느낌 → 주황·갈색 계열
- 활기차고 젊은 느낌 → 선명한 원색
대충 방향만 잡아 색을 하나 넣고, 나온 조합 중 마음에 드는 색을 다시 기준 색으로 넣어 반복하면 원하는 지점에 빠르게 가까워집니다.
이런 경우에는
배경·글자·강조를 나누는 UI에는 뭐가 좋나요
같은 계열 안에서 명도를 나누는 쉐이드가 배경·글자·강조를 층층이 쌓기 좋습니다. 내추럴은 채도와 명도를 함께 조정합니다. 기준 색이 어두우면 색상까지 옮기기 때문에 분위기가 조금 달라집니다. 화려한 색을 절제하고 싶다면 기준 색에 톤을 맞춘 회색을 붙여 주는 그레이 프렌즈가 어울립니다.
조합이 촌스러워 보여요
대개 강한 색을 너무 많이 쓴 경우입니다.
- 한 화면에 강한 색은 두세 개를 넘기지 마세요
- 메인 한 색 · 보조 한 색 · 나머지는 회색으로 받치면 완성도가 올라갑니다
- 넓은 면적일수록 채도를 낮추면 안정적입니다
글자가 배경에 묻혀요
색이 예뻐도 밝기 차이가 부족하면 읽기 어렵습니다. 배경과 글자는 명도 차이를 충분히 두세요. 누구나 편히 읽어야 하는 서비스라면 배경과 글자의 밝기 차이(명암비)를 따로 확인하는 게 좋습니다.
이 도구로는 안 되는 것
용어 설명
- 색상·채도·명도
색을 나누는 세 가지 기준입니다. 색상은 빨강·파랑 같은 색의 종류, 채도는 선명한 정도, 명도는 밝은 정도입니다. 팔레트는 이 세 값을 규칙에 따라 움직여 만듭니다.
- 색상환
색을 둥근 고리 모양으로 늘어놓은 것입니다. 마주 보는 색은 대비가 강하고, 이웃한 색은 자연스럽게 어울립니다. 배색 규칙 대부분이 이 위치 관계를 씁니다.
자주 묻는 질문
생성된 색상의 RGB나 CMYK 코드는 어떻게 알 수 있나요?
현재 컬러 팔레트 생성기는 웹 디자인에서 가장 널리 쓰이는 표준 포맷인 HEX 코드 복사만 지원합니다. HEX는 앞에서부터 두 자리씩 각각 R·G·B 값을 16진수로 적은 것이라, 복사한 코드를 포토샵이나 일러스트레이터의 색상 피커에 붙여넣으면 같은 창에서 RGB와 CMYK 값이 함께 표시되고 피그마에서는 RGB 값이 표시됩니다. 이미지에서 뽑은 색이라면 유틸집의 이미지 색상 추출 도구를 쓰면 되는데, 색을 집는 즉시 HEX·RGBA·HSLA·CMYK 네 가지 코드를 함께 보여 줍니다.
도구에서 추천해 주는 7가지 컬러 테마는 어떤 원리로 만들어지나요?
입력하신 기준 색상을 HSL(색상, 채도, 명도) 값으로 바꾼 뒤, 유형마다 다른 규칙으로 이 세 수치를 굴려 생성합니다. 예를 들어 '스킵 그라데이션'은 색상환의 각도를 목표 색 쪽으로 단계마다 옮기고, '쉐이드'는 색상은 그대로 둔 채 명도를 일정 비율로 나누며, '그레이 프렌즈'는 기준 색과 같은 색상의 낮은 채도 회색을 짝지어 줍니다.
마음에 드는 메인 컬러가 없는데 어디서부터 시작하면 되나요?
정확한 색을 찾으려 애쓰기보다 만들려는 것의 분위기부터 정하세요. 차분하고 신뢰감 있는 서비스라면 파랑 계열, 따뜻하고 편안한 느낌이면 주황이나 갈색 계열로 대충 방향만 잡아 색을 하나 넣으면 됩니다. 생성된 조합을 훑다가 옆 칸 색이 더 마음에 들면 그 HEX 코드를 다시 기준 색으로 넣어 반복하면 원하는 조합에 빠르게 가까워집니다.
여러 유형 중 배경·텍스트·강조를 나누는 UI에는 어떤 팔레트가 좋나요?
같은 계열 안에서 명도만 나누는 '내추럴'이나 '쉐이드' 유형이 배경, 텍스트, 강조 요소를 층층이 쌓기 좋습니다. 화려한 색을 절제하고 싶다면 기준 색에 톤을 맞춘 회색을 붙여 주는 '그레이 프렌즈'가 어울립니다. 한 화면에 강한 색은 두세 개를 넘기지 말고, 메인 한 색·보조 한 색·나머지는 회색으로 받치면 완성도가 높아 보입니다.
마지막 업데이트: