컬러 팔레트 생성기란?
컬러 팔레트 생성기는 함께 쓰면 잘 어울리는 색 몇 개(보통 3~6개)를 제안해 주는 도구예요. 감으로 고르는 대신 색상환의 기하학이나 이미지 속 실제 색을 이용해 조정할 수 있는 출발점을 줘요.
좋은 팔레트는 세 가지 역할을 해요. 분위기(차분함, 발랄함, 고급스러움)를 정하고, 텍스트와 버튼이 잘 읽힐 만큼 대비를 주고, 웹사이트, SNS 게시물, 패키지, 프로필 링크 페이지 전체에서 일관성을 유지해요. 이 생성기는 세 가지 모두를 도와줘요. 팔레트를 만들고, 색마다 이름을 붙이고, 흰색·검은색 텍스트와의 대비를 등급으로 매기고, 실제 프로필 페이지처럼 미리 보여 줘요.
컬러 팔레트 생성기 사용법
기준 색상으로 생성하기
- 생성 탭에서 컬러 피커로 기준 색상을 고르거나 HEX 코드를 입력하세요(3자리 또는 6자리, # 있어도 없어도 돼요).
- 색상 조화를 고르세요: 유사색, 단색, 보색, 분열 보색, 삼각 배색, 사각 배색, 명암. 팔레트가 바로 다섯 가지 색으로 업데이트돼요.
- 랜덤 팔레트를 누르거나 스페이스 바를 누르면 같은 색상 조화로 새로운 랜덤 기준 색상을 시도해요.
- 남기고 싶은 색 아래의 고정을 누르세요. 고정한 색은 그대로 있고 나머지만 섞여요.
- 또는 프리셋에서 시작하세요: 웨딩, 브랜드, 파스텔, 어스톤, 네온, 다크 모드.
사진에서 컬러 팔레트 추출하기
- 이미지에서 탭을 열고 JPG, PNG, WebP 사진을 넣으세요(또는 샘플 사진으로 해 보기를 누르세요).
- 추출할 색상 수를 5개나 6개로 고르세요. 가장 많이 차지하는 색이 맨 앞에 와요.
복사하고 내보내기
- 색상 블록이나 HEX, RGB, HSL 값을 클릭하면 복사돼요.
- 코드가 필요하면 CSS 변수 복사, Tailwind 설정 복사, HEX 목록 복사를 쓰세요.
- PNG 다운로드(1200 x 630)를 누르면 색 이름과 HEX 코드가 들어간 팔레트 이미지를 받을 수 있어요. 무드보드에 쓰거나 클라이언트, 인쇄소에 보내기 좋아요.
- 프로필 링크 미리보기를 라이트, 다크, 선명한 색상으로 바꿔 가며 색이 배경, 버튼, 텍스트로 어떻게 어울리는지 보세요.
색상 조화 설명: 보색, 유사색, 삼각 배색 등
색상 조화는 360도 색상환 위의 정해진 위치예요. 각각 예측 가능한 느낌을 줘요.
| 색상 조화 | 만드는 방식 | 느낌 | 추천 용도 |
|---|---|---|---|
| 유사색 | 양쪽으로 약 20~40도 떨어진 이웃 색상 | 차분함, 자연스러움 | 라이프스타일 브랜드, 웰니스, 사진 |
| 단색 | 한 가지 색상의 어두운 버전과 밝은 버전 | 깔끔함, 우아함 | 미니멀 웹사이트, 럭셔리, 포트폴리오 |
| 보색 | 한 색상과 정반대 색(180도) | 강한 대비, 에너지 | 행동 유도 버튼, 스포츠, 음식 |
| 분열 보색 | 한 색상과 그 반대색의 양옆 두 색(150도와 210도) | 생동감 있지만 덜 강렬함 | 부딪히지 않으면서 대비를 원하는 브랜드 |
| 삼각 배색 | 같은 간격(120도)으로 떨어진 세 색상 | 균형, 발랄함 | 어린이, 교육, 크리에이티브 스튜디오 |
| 사각 배색 | 90도씩 떨어진 네 색상 | 풍부함, 복잡함 | 일러스트, 행사, 한 색을 주인공으로 |
| 명암 | 한 색상을 아주 밝은 것부터 아주 어두운 것까지 | 체계적 | UI 디자인 시스템, 대시보드 |
색상 조화가 색상(hue)을 정하면, 생성기는 명도와 채도도 다르게 해서 다섯 색이 모두 똑같이 튀지 않고 실제로 쓸 수 있는 배경색과 텍스트 색이 나오게 해요. 팔레트를 적용하는 흔한 방법은 60-30-10 규칙이에요. 공간의 약 60%는 뉴트럴이나 메인 색, 30%는 보조 색, 10%는 버튼과 강조용 포인트 색으로 쓰는 거예요.
사진에서 색 추출 기능은 이렇게 작동해요
사진을 업로드하면 도구가 긴 쪽 기준 약 120픽셀로 줄인 사본을 만들고, 투명한 픽셀은 건너뛰고, 남은 색을 k-평균 군집화로 묶어요. 각 그룹의 평균 색이 견본이 되고, 가장 큰 그룹부터 작은 그룹 순으로 정렬돼요. 그래서 가장 밝은 색이 아니라 사진을 실제로 채우고 있는 색이 나와요.
더 좋은 결과를 위한 팁:
- 먼저 원하는 부분만 잘라 내세요. 흰 배경이 넓은 상품 사진은 흰색이 첫 번째 색으로 나와요. 이미지 자르기가 도움이 돼요.
- 5개와 6개를 둘 다 시도해 보세요. 6개로 하면 5개일 때 묻혀 버리는 꽃이나 간판 같은 작은 포인트 색이 잡히는 경우가 많아요.
- 따뜻한 실내 조명에서 찍은 사진은 주황빛으로 치우쳐요. 색이 탁해 보이면 낮에 찍은 사진으로 해 보세요.
- 추출한 팔레트는 초안으로 쓰세요. HEX 코드를 복사한 뒤 생성 탭으로 가서 가장 마음에 드는 색을 기준 색상으로 붙여 넣고 고정한 채 더 깔끔한 세트를 만들어 보세요.
색 대비와 WCAG: 읽기 쉬운 팔레트 만들기
모든 견본에는 배지가 두 개 있어요. 그 색 위의 흰색 텍스트와 검은색 텍스트의 대비율, 그리고 WCAG 등급이에요. WCAG(웹 콘텐츠 접근성 지침)는 대비를 1:1(대비 없음)부터 21:1(흰 바탕에 검은색)까지 측정해요.
| 등급 | 대비율 | 적합한 용도 |
|---|---|---|
| AAA | 7:1 이상 | 본문, 작은 글씨, 모든 것 |
| AA | 4.5:1 이상 | 일반 본문과 버튼 라벨 |
| AA Large | 3:1 이상 | 큰 텍스트(약 24 px, 굵게는 19 px)와 아이콘만 |
| 실패 | 3:1 미만 | 장식용만, 텍스트에는 절대 쓰지 않기 |
실제로는 이렇게 하세요. 모든 팔레트에 밝은 배경 위에서 AA를 통과하는 어두운 색을 최소 하나 넣고, 버튼 색과 버튼 라벨 색을 함께 확인하세요. 밝은 노랑, 연두, 파스텔은 거의 항상 어두운 텍스트가 필요해요. 채도가 높은 중간 톤(많은 주황과 분홍)은 작은 크기에서 흰색과 검은색 모두 실패하는 경우가 많으니 큰 제목이나 배경에 쓰세요.
브랜드, 웨딩, 웹사이트 컬러 팔레트
브랜드 컬러 팔레트
대부분의 작은 브랜드는 3~5가지 색이 필요해요. 메인 색(알아볼 수 있는 대표 색), 버튼과 할인 태그용 포인트 색, 텍스트용 검정에 가까운 색, 배경용 오프화이트, 그리고 뉴트럴 그레이 하나 정도요. 이미 가진 색(로고, 간판, 패키지)에서 시작해 고정하고 나머지는 분열 보색이나 유사색으로 섞어 보세요. 전주의 홈베이커라면 따뜻한 테라코타를 고정하고 크림, 코코아, 세이지를 주변에 둘 수 있고, 핀테크 스타트업이라면 짙은 파랑을 고정하고 밝은 포인트 색 하나만 더할 수 있어요.
웨딩 컬러 팔레트
웨딩 팔레트는 보통 부드러운 톤 두세 가지에 텍스트와 꽃 장식용 짙은 기준 색 하나를 더해요. 웨딩 프리셋에서 시작하거나, 웨딩홀, 의상 원단, 참고용 부케 사진을 업로드해 색을 추출하세요. PNG를 다운로드해 데코 업체, 플로리스트, 청첩장 디자이너, 가족 단톡방에 공유하면 모두가 같은 HEX 코드로 작업할 수 있어요. 인도 결혼식처럼 행사가 여러 번이라면 행사마다(메헨디는 초록과 노랑, 상기트는 보석 톤, 피로연은 파스텔) 팔레트를 하나씩 만들고 공통 뉴트럴 하나를 두세요.
웹사이트 컬러 팔레트
웹사이트나 앱에는 인터페이스(배경, 테두리, 텍스트)에 명암이나 단색을 쓰고, 링크와 버튼에는 대비되는 포인트 색 하나를 쓰세요. CSS 변수를 스타일시트에, Tailwind 설정을 tailwind.config.js에 복사한 뒤 모든 텍스트·배경 조합을 AA 배지로 확인하세요. 다크 테마도 필요하면 다크 모드 프리셋을 써 보세요.
크리에이터와 SNS
일관된 팔레트는 피드, 썸네일, 하이라이트 커버를 하나의 브랜드처럼 보이게 해요. 하이라이트 커버 메이커, 배경 생성기, 프로필 링크 페이지에 같은 HEX 코드를 쓰세요.
HEX vs RGB vs HSL 색상 코드: 무엇을 복사할까
각 견본은 같은 색을 세 가지 형식으로 보여 줘요. 아무거나 클릭하면 복사돼요.
| 형식 | 예시 | 쓰이는 곳 |
|---|---|---|
| HEX | #3B82F6 | Canva, Figma, 웹사이트 빌더, 브랜드 가이드라인. 가장 널리 쓰이는 형식 |
| RGB | rgb(59, 130, 246) | CSS, PowerPoint, Google Slides, 영상 편집기 |
| HSL | hsl(217, 91%, 60%) | CSS. 색상을 바꾸지 않고 명도만 바꿀 수 있어서 직접 조정하기 쉬움 |
| CSS 변수 | --color-1: #3B82F6; | :root에 붙여 넣고 스타일시트 전체에서 재사용 |
| Tailwind 설정 | palette: { 1: '#3B82F6' } | Tailwind CSS 프로젝트에서 bg-palette-1이나 text-palette-1로 사용 |
각 색에는 가장 가까운 표준 웹 색상 이름(예: "Cornflower Blue")도 붙어서, 클라이언트나 인쇄소에 팔레트를 설명할 때 편해요. 인쇄할 때는 인쇄소에 HEX 코드를 CMYK나 Pantone 값으로 맞춰 달라고 하세요. 화면에는 잉크로 재현할 수 없는 밝은 색이 있어요.
컬러 팔레트 생성기 vs Coolors, Adobe Color, Canva
좋은 팔레트 도구는 여러 개 있고, 각각 강점이 있어요. Coolors는 스페이스를 눌러 섞는 방식을 대중화했고 커뮤니티 팔레트가 많아요. Adobe Color는 세밀한 색상환이 있고 Adobe 앱과 연결돼요. Canva는 사진에서 색을 뽑고 디자인 옆 브랜드 키트에 브랜드 컬러를 보관할 수 있어요.
이 생성기는 흔히 필요한 작업을 계정 없이 무료로 해결해요. 고정과 스페이스 바 섞기가 되는 색상 조화, 내 사진에서 색 추출, 모든 견본의 WCAG 등급, CSS·Tailwind 내보내기, 공유할 수 있는 1200 x 630 PNG, 실시간 프로필 링크 미리보기까지요. 계정에 팔레트를 저장하거나 커뮤니티 팔레트를 둘러보는 기능은 없으니, 탭을 닫기 전에 코드를 복사하거나 PNG를 다운로드하세요.
내 사진이 업로드되나요?
아니요. 색 계산, 이미지 추출, PNG 내보내기는 모두 브라우저에서 canvas API로 실행돼요. 넣은 사진은 기기에서만 읽히고 Biolinko로 전송되지 않아요.
프로필 링크 페이지에 팔레트 쓰기
오른쪽 미리보기는 팔레트를 라이트, 다크, 선명한 색상 스타일의 프로필 페이지로 보여 줘요. 실제로 쓰려면 무료 Biolinko 페이지를 만들고 디자인을 열어 배경, 텍스트, 버튼 색상 칸에 HEX 코드를 붙여 넣으세요. 모든 방문자가 링크를 읽을 수 있도록 버튼 색과 버튼 텍스트 조합은 AA 이상으로 유지하세요. 더 많은 스타일 아이디어는 크리에이터를 위한 프로필 링크 페이지를 보세요.
2026년 10월 8일 업데이트