기타

색상 팔레트 생성기

색상 팔레트 생성기는 베이스 컬러를 한 가지만 고르면 보색·유사색·트라이어드 등의 배색 패턴을 자동으로 만들어 주는 무료 배색 생성기입니다. 팔레트를 만드는 데 필요한 색채 이론을 도구가 직접 계산해, 웹 디자인·자료 제작·일러스트·브랜딩 등에 활용할 수 있는 아름다운 색 조합을 바로 찾을 수 있습니다.

베이스 컬러

배색 유형

현재 배색을 URL 로 공유하거나 저장할 수 있습니다.

생성된 팔레트

L 0.27
#1E90FF
L 0.40
#FF8D1E

내보내기

:root {
  --color-1: #1E90FF;
  --color-2: #FF8D1E;
}

배색 생성은 모두 사용 중인 브라우저 안에서 이루어지며, 입력한 색이 외부 서버로 전송되는 일은 없습니다.

QR 코드 생성

URL·Wi-Fi·메일·SMS·전화·주소록·지도·이벤트·텍스트를 QR 코드 이미지로 만드는 무료 QR 코드 생성기입니다. 크기·형식·색상·로고를 지정할 수 있고 만료 없이 몇 번이든 만들 수 있습니다. 웹 브라우저만으로 완결됩니다.

추첨 / 제비뽑기

이름 목록이나 숫자 범위에서 무작위로 1~N개를 뽑는 무료 제비뽑기·추첨 도구입니다. 중복 없는 추첨, 릴 연출, 추첨 이력 저장을 지원해 순서 정하기나 당첨자 추첨을 공정하게 할 수 있습니다. 웹 브라우저만으로 완결됩니다.

뽀모도로 타이머

25분 집중과 5분 휴식을 반복하는 무료 온라인 뽀모도로(포모도로) 타이머입니다. 공부·업무 집중 타이머로 원형 진행 표시, 알람음, 전체 화면, 팝업(별도 창)을 지원합니다. 웹 브라우저만으로 완결됩니다.

컬러 피커

이미지에서 색을 추출해 HEX·RGB·HSL 컬러 코드를 얻는 무료 컬러 피커입니다. 돋보기로 확대해 픽셀 단위로 정확히 색을 고르고 팔레트를 내보낼 수 있습니다. 가입 없이 바로 사용할 수 있습니다.

컬러 코드 변환

HEX·RGB·HSL·HSV·OKLCH 컬러 코드를 서로 변환하는 무료 도구입니다. 투명도(RGBA·8자리 HEX·HSLA)와 CMYK 참고값도 지원하며, 입력한 색을 모든 형식으로 한 번에 변환해 원클릭 복사할 수 있습니다. 웹 브라우저만으로 완결됩니다.

명도 대비 검사

전경색과 배경색의 명도 대비(콘트라스트 비율)를 실시간으로 계산하는 무료 명도 대비 검사 도구입니다. WCAG 2.1·2.2 AA·AAA 판정과 통과색 자동 제안, 색각 시뮬레이션, APCA를 지원합니다. 웹 브라우저만으로 완결됩니다.

색상 팔레트 생성기 도구란?

베이스 컬러는 #1E90FF 같은 HEX 외에 rgb(30, 144, 255) 나 hsl(210, 100%, 56%) 로도 입력할 수 있고, 네이티브 컬러 피커에서 고르거나 "랜덤" 버튼으로 컬러 조합 아이디어를 찾아볼 수도 있습니다. 배색 유형은 보색(컴플리멘터리)·유사색(아날로거스)·트라이어드(삼각 배색)·테트라드(사각 배색)·분할 보색(스플릿 컴플리멘터리)·단색(모노크로매틱)·셰이드 & 틴트의 7가지를 지원합니다. 단색이나 유사색 등에서는 생성할 색의 개수(3~10색)도 조정할 수 있습니다.

생성된 팔레트는 각 색의 HEX 를 클릭 한 번으로 복사할 수 있고, CSS 변수(:root { --color-1 })·Tailwind 의 theme.extend.colors·SCSS 변수·JSON 형식으로 한꺼번에 내보낼 수도 있습니다. 코드에 그대로 붙여넣을 수 있어 배색 결정부터 구현까지 매끄럽게 이어집니다. 각 스와치에는 검정 글자와 흰 글자 중 어느 쪽이 읽기 편한지(명암 대비 기준)도 표시되어, UI 설계에서 글자 색을 판단하는 데 도움이 됩니다.

배색 계산은 모두 사용 중인 브라우저 안에서 이루어지며, 입력한 색이 외부 서버로 전송되는 일은 없습니다. 회원가입이나 광고 클릭 없이 바로 사용할 수 있습니다.

사용 방법

베이스 컬러를 입력란에 입력하거나(HEX·RGB·HSL 지원) 컬러 피커로 색을 고릅니다. 아이디어가 필요할 때는 "랜덤" 버튼도 사용할 수 있습니다.
배색 유형(보색·유사색·트라이어드·테트라드·분할 보색·단색·셰이드 & 틴트)을 선택합니다.
단색이나 유사색처럼 색 개수를 조정할 수 있는 유형에서는 슬라이더로 생성할 색의 개수(3~10색)를 설정합니다.
생성된 팔레트를 확인하고, 각 색의 HEX 값은 카드의 복사 버튼으로 복사합니다.
"내보내기"에서 CSS 변수·Tailwind·SCSS·JSON 탭을 전환하고, "복사" 버튼으로 코드 전체를 복사해 구현에 붙여넣습니다.
"URL 복사"를 누르면 현재 배색을 재현할 수 있는 공유 URL 이 만들어집니다. 팀 공유나 북마크에 활용할 수 있습니다.

활용 사례

베이스 컬러를 기준으로 배색을 정하고 싶은 웹 디자이너·코더가 보색이나 유사색 팔레트를 빠르게 만들 때.
CSS 변수나 Tailwind 설정으로 배색을 그대로 코드에 옮기고 싶은 프런트엔드 엔지니어.
발표 자료나 슬라이드의 배색을 트라이어드·테트라드 같은 배색 패턴으로 다듬고 싶은 직장인.
브랜드 컬러를 기점으로 단색이나 셰이드 & 틴트로 톤이 다른 변형을 전개하고 싶은 디자이너.
일러스트나 작품 제작에서 통일감 있는 색 조합의 영감을 얻고 싶은 크리에이터.
정한 배색을 공유 URL 로 팀에 전달하거나 나중에 같은 팔레트를 다시 재현하고 싶은 분.

주의사항

배색 생성은 모두 브라우저 안에서 이루어지며, 입력한 색이 외부로 전송되는 일은 없습니다.
베이스 컬러는 HEX·RGB·HSL 형식으로 입력할 수 있습니다. 투명도(알파)는 지원하지 않습니다.
보색·트라이어드·테트라드·분할 보색은 색채 이론에 따라 색 개수가 정해지므로 색 개수 슬라이더가 표시되지 않습니다. 단색·유사색·셰이드 & 틴트에서는 색 개수를 조정할 수 있습니다.
배색은 HSL 색 공간에서 색상을 회전시켜 계산합니다. 채도가 극단적으로 낮은 색(회색에 가까운 색)을 베이스로 하면 색상의 차이가 잘 드러나지 않을 수 있습니다.
공유 URL 에는 베이스 컬러·배색 유형·색 개수만 포함됩니다. URL 을 열면 같은 설정으로 팔레트가 재현됩니다.

자주 묻는 질문

입력한 색이 서버로 전송되나요?

전송되지 않습니다. 배색 생성은 모두 사용 중인 브라우저 안에서 완결됩니다. 브랜드 컬러나 업무에서 다루는 색도 안심하고 사용할 수 있습니다.

보색·유사색·트라이어드의 차이는 무엇인가요?

보색은 색상환에서 정반대(180도)에 있는 색의 조합으로 강한 대비가 생깁니다. 유사색은 서로 인접한 색상(±30도 정도)으로 통일감 있는 배색이 됩니다. 트라이어드는 색상환을 3등분(120도씩)한 3색으로, 균형 잡히면서도 화사한 인상을 줍니다. 이 도구에서는 이를 베이스 컬러로부터 자동으로 계산합니다.

CSS 변수나 Tailwind 용으로 내보낼 수 있나요?

할 수 있습니다. 내보내기 탭에서 CSS 변수(:root 의 --color-1 형식)·Tailwind 의 theme.extend.colors·SCSS 변수·JSON 을 전환할 수 있으며, "복사" 버튼으로 코드 전체를 복사해 그대로 구현에 붙여넣을 수 있습니다.

생성할 색의 개수를 바꿀 수 있나요?

단색·유사색·셰이드 & 틴트에서는 슬라이더로 3~10색 범위에서 색 개수를 조정할 수 있습니다. 보색·트라이어드·테트라드·분할 보색은 색채 이론에 따라 색 개수가 정해지므로 고정됩니다.

만든 배색을 공유하거나 저장할 수 있나요?

"URL 복사"를 누르면 베이스 컬러·배색 유형·색 개수를 포함한 공유 URL 이 만들어집니다. 그 URL 을 열면 같은 팔레트가 재현되므로, 팀 공유나 북마크에 편리합니다.

각 색의 명암 대비(글자의 가독성)도 알 수 있나요?

각 스와치에는 그 색 위에서 검정 글자와 흰 글자 중 어느 쪽이 읽기 편한지에 대한 기준(상대 휘도에 기반한 판정)을 표시합니다. 배경색에 대한 글자 색을 정할 때 참고가 됩니다. 더 엄밀한 적합성 판정이 필요한 경우에는 명암 대비 검사 도구도 함께 이용해 보세요.