색상 팔레트 생성기

아름다운 5색 팔레트를 생성하세요. 마음에 드는 색을 잠그고 스페이스바로 다시 생성합니다.

#362EF0

rgb(54, 46, 240)

hsl(242, 87%, 56%)

#3D3D40

rgb(61, 61, 64)

hsl(240, 2%, 25%)

#844902

rgb(132, 73, 2)

hsl(33, 97%, 26%)

#307EC4

rgb(48, 126, 196)

hsl(208, 61%, 48%)

#B5B02D

rgb(181, 176, 45)

hsl(58, 60%, 44%)

또는 스페이스바

낳볼내기 형식：

:root {
  --color-1: #362ef0;
  --color-2: #3d3d40;
  --color-3: #844902;
  --color-4: #307ec4;
  --color-5: #b5b02d;
}

색상 팔레트 생성기란?

색상 팔레트 생성기는 웹 디자인, 그래픽 디자인, 일러스트, 브랜딩 프로젝트에서 사용할 수 있는 무작위 5색 팔레트를 만듭니다. 각 견본에는 hex, RGB, HSL 값이 표시되며, 나머지를 다시 생성하는 동안 개별 색상을 잠글 수 있습니다.

도구는 브라우저에서 완전히 실행되며 회원가입이나 계정이 필요 없습니다. 팔레트는 CSS 사용자 정의 속성, Tailwind 구성 값 또는 일반 hex 목록으로 낳볼내기하여 프로젝트에 직접 붙여넣을 준비가 되어 있습니다.

색상 팔레트를 생성하는 방법

팔레트 생성은 빠르고 직관적입니다：

'생성'을 클릭하거나 스페이스바를 눌러 새로운 무작위 5색 팔레트를 만듭니다.
아무 색상 견본이나 클릭하여 해당 hex 코드를 클립보드에 복사합니다.
견본 위에 마우스를 올리고 잠금 아이콘을 클릭하여 해당 색상을 고정합니다.
다시 스페이스바를 누르면——잠금 해제된 색상만 변경되어 좋아하는 색상을 중심으로 구축할 수 있습니다.
낳볼내기 섹션을 사용하여 원하는 형식으로 팔레트를 복사합니다.

낳볼내기 형식

이 도구는 워크플로우에 쉽게 통합할 수 있도록 세 가지 낳볼내기 형식을 지원합니다：

CSS 변수 — 어떤 스타일시트에도 넣을 수 있는 사용자 정의 속성이 포함된 :root 블록을 생성합니다.
Tailwind — tailwind.config.js 파일에서 사용할 준비가 된 colors 객체를 생성합니다.
Hex 목록 — 디자인 도구와 문서에 유용한 줄바꿈으로 구분된 간단한 hex 값 목록입니다.

멋진 팔레트를 만드는 팁

브랜드와 어울리는 1~2가지 색상을 잠그고 보색 강조색을 찾기 위해 생성합니다.
텍스트와 배경색 사이에 좋은 대비가 있는지 확인하기 위해 HSL 밝기 값을 살펴봅니다.
접근성을 고려한 디자인에서는 텍스트용으로 4.5:1 이상의 대비 비율을 확보합니다.
결정하기 전에 여러 팔레트를 생성하여 스크린샷으로 비교합니다.

일반적인 사용 사례

웹사이트, 앱, 랜딩 페이지의 색 구성 찾기.
로고와 마케팅 자료를 위한 브랜드 색상 팔레트 만들기.
일러스트와 디지털 아트의 색 조합 탐구.
프레젠테이션과 슬라이드용 테마 팔레트 생성.
바로 사용할 수 있는 CSS나 Tailwind 값으로 빠른 프로토타이핑.

자주 묻는 질문

팔레트를 생성하려면?+

기본 색상을 선택하거나 HEX/RGB를 입력하면, 도구가 자동으로 배색 체계를 생성합니다.

어떤 색상 형식을 지원합니까?+

HEX, RGB, HSL, CMYK 등을 지원합니다.

팔레트를 저장할 수 있습니까?+

네, 팔레트의 저장, 내보내기, 공유가 가능합니다.

도구는 무료입니까?+

완전히 무료입니다.

이미지에서 팔레트를 생성할 수 있습니까?+

네, 이미지를 업로드하면 자동으로 주요 색상을 추출합니다.

관련 도구

색상 대비 확인기 CSS 그라데이션 생성 색상 혼합기