무료 HEX 색상 팔레트 생성기
HEX 코드 하나로 웹사이트의 배색을 구상해 보세요. 다양한 색상 조합과 밝기별 색상, 용도별 색상을 살펴보고 CSS 변수를 복사해 프로젝트에 활용할 수 있습니다.
빠른 프리셋
기준 색상(HEX)
#2563EB
조화로운 색상
주요 색상
주요 동작에 사용하는 색상
#2563EB보조 색상
보조 요소에 사용하는 색상
#6C59D5강조 색상
시각적 강조에 사용하는 색상
#E3AA2D페이지 배경
페이지 배경에 사용하는 색상
#F7F7F8카드 배경
카드 배경에 사용하는 색상
#E8E9EE텍스트
본문 텍스트에 사용하는 색상
#1B212C:root {
--color-primary: #2563EB;
--color-secondary: #6C59D5;
--color-accent: #E3AA2D;
--color-background: #F7F7F8;
--color-surface: #E8E9EE;
--color-text: #1B212C;
--color-primary-50: #F4F6FB;
--color-primary-100: #D1DBF1;
--color-primary-200: #ABBFEB;
--color-primary-300: #82A2E7;
--color-primary-400: #5583E8;
--color-primary-500: #2563EB;
--color-primary-600: #124BC7;
--color-primary-700: #0D3794;
--color-primary-800: #082462;
--color-primary-900: #04112F;
}HEX 색상 팔레트 생성기란 무엇인가요?
하나의 HEX 코드를 바탕으로 관련 색상을 만드는 무료 도구입니다. 유사색, 보색, 삼각 배색과 밝기별 색상, 용도별 여섯 가지 색상을 생성하고 CSS 변수를 복사할 수 있습니다.
HEX 코드로 색상 팔레트를 만드는 방법
기준 색상을 고르고 생성된 팔레트를 살펴본 뒤 필요한 값을 복사하세요. HEX 코드 입력, 색상 선택기, 무작위 색상 중 편한 방법으로 시작할 수 있습니다.
- 단계 1
기준 색상 고르기
HEX 코드를 입력하거나 색상 선택기 또는 무작위 색상을 사용하세요. 코드를 직접 입력했다면 팔레트 생성을 클릭해 결과를 확인하세요.
- 단계 2
색상 조합 비교하기
기준 색상과 함께 생성된 유사색, 보색, 삼각 배색을 살펴보세요. 각 조합을 비교하며 웹사이트나 브랜드에 어울리는 배색을 구상해 보세요.
- 단계 3
밝기와 용도 확인하기
50부터 900까지의 밝기별 색상과 용도별 여섯 가지 색상을 확인하세요. UI의 각 부분에 맞는 밝기와 색상 역할을 선택할 수 있습니다.
- 단계 4
색상과 CSS 변수 복사하기
개별 색상 값이나 생성된 CSS 변수를 복사하세요. 스타일시트에 붙여 넣으면 웹사이트나 디자인 시스템에서 같은 색상 값을 사용할 수 있습니다.
색상 팔레트, 이렇게 활용하세요
웹사이트의 배경부터 버튼과 텍스트까지, 색상이 필요한 곳에 팔레트를 활용해 보세요. 생성된 색상으로 일관된 스타일을 구성하는 여섯 가지 방법입니다.
배경과 테두리
밝기별 색상을 비교해 페이지와 카드의 배경, 테두리에 쓸 색을 골라보세요. 웹사이트의 각 요소에 맞는 배색을 검토할 수 있습니다.
호버 색상
버튼이나 링크에 마우스를 올렸을 때 보여줄 색상을 골라보세요. 적용하기 전에 실제 UI에서 각 색상 조합을 확인하는 것이 좋습니다.
제품 UI
주요 색상, 보조 색상, 강조 색상과 배경, 텍스트 색상을 용도에 맞게 사용하세요. 제품 UI 전체에서 색상의 역할을 통일할 수 있습니다.
브랜드 배색
브랜드의 대표 색상에서 시작해 유사색, 보색, 삼각 배색을 비교해 보세요. 웹사이트에 사용할 색상을 정할 때 참고할 수 있습니다.
디자인 시스템
용도별 색상과 밝기별 색상을 복사해 디자인 시스템에 활용하세요. 재사용하는 컴포넌트에서 공통된 색상 값을 사용하기 편해집니다.
CSS 스타일시트
생성된 CSS 변수를 스타일시트에 붙여 넣고 스타일에서 참조하세요. 웹사이트의 여러 요소에 같은 색상 정의를 사용할 수 있습니다.
색상 조합부터 CSS 복사까지 한곳에서
무료 색상 팔레트 생성기로 배색 후보와 밝기별 색상, 용도별 색상을 함께 살펴보세요. 필요한 색상 값이나 CSS 변수를 복사해 웹사이트 제작에 활용할 수 있습니다.
하나의 색, 여러 조합
기준 HEX 코드로 유사색, 보색, 삼각 배색을 생성할 수 있습니다. 여러 조합을 비교하며 웹사이트에 사용할 배색을 구상해 보세요.
밝기별 색상 비교
50부터 900까지 번호가 붙은 색상을 밝은 색부터 어두운 색까지 살펴보세요. 배경과 테두리 등 UI 요소에 맞는 색을 고를 수 있습니다.
용도별 여섯 가지 색상
주요·보조·강조 색상과 페이지 배경, 카드 배경, 텍스트 색상을 제공합니다. 용도에 맞게 나누어 웹사이트의 배색을 일관되게 구성해 보세요.
복사해서 쓰는 CSS
용도별 색상과 밝기별 색상을 CSS 변수로 복사할 수 있습니다. 스타일시트에 붙여 넣고 웹사이트의 여러 요소에서 활용해 보세요.
웹사이트 제작에 필요한
무료 도구
자주 묻는 질문
하나의 HEX 코드를 바탕으로 관련 색상을 만드는 무료 도구입니다. 유사색, 보색, 삼각 배색과 밝기별 색상, 용도별 여섯 가지 색상을 생성하고 CSS 변수를 복사할 수 있습니다.
유효한 3자리 또는 6자리 HEX 코드를 입력하고 팔레트 생성을 클릭하세요. 색상 선택기, 프리셋, 무작위 색상도 사용할 수 있습니다.
50부터 900까지 번호가 붙은 밝고 어두운 색상을 배경, 테두리, 호버 색상을 정할 때 참고할 수 있습니다. 텍스트 대비는 실제 디자인에서 직접 확인해 주세요.
CSS 변수 패널에서 복사를 클릭한 뒤 스타일시트에 붙여 넣으세요. CSS 규칙에서 변수를 참조하면 용도별 색상과 밝기별 색상을 적용할 수 있습니다.