Developer Design Utility

Color Palette 생성기

기준 색상 하나로 Tailwind 스타일의 50~900 단계 팔레트를 만들고, CSS 변수·SCSS 변수·JSON 코드로 변환해 디자인 시스템에 바로 활용할 수 있습니다.

팔레트 자동 생성 브랜드 포인트 색상을 기준으로 밝기 단계별 색상 팔레트를 생성합니다.

HEX / RGB 미리보기 각 단계별 색상값을 카드 형태로 확인하고 클릭해서 복사할 수 있습니다.

CSS·SCSS·JSON 출력 프로젝트 스타일 파일이나 설정 파일에 바로 붙여넣을 수 있는 코드를 제공합니다.

팔레트 이름 primary

기준 색상 #2563eb

생성 단계 10단계

출력 형식 CSS

Palette 설정

브랜드 색상, 팔레트 이름, 생성 방식과 출력 형식을 선택하세요.

팔레트 이름

CSS 변수명, SCSS 변수명, JSON 키 이름에 사용됩니다.

기준 색상

브랜드 메인 색상이나 버튼에 사용할 포인트 색상을 기준으로 입력하세요.

생성 방식

디자인 시스템용은 Tailwind Style, 간단한 UI용은 Compact를 추천합니다.

출력 형식

프로젝트에서 사용하는 스타일 관리 방식에 맞춰 선택하세요.

색상 팔레트 미리보기

색상 카드를 클릭하면 해당 HEX 코드가 클립보드에 복사됩니다.

대기 중

기준 색상을 입력한 뒤 팔레트 생성하기 버튼을 눌러주세요.

생성 결과

아래 코드를 CSS 파일, SCSS 파일 또는 테마 설정 파일에 사용할 수 있습니다.

팔레트를 생성하면 이곳에 코드가 표시됩니다.

도움말

Color Palette 생성기는 언제 사용하나요?

웹사이트나 유틸리티 페이지의 버튼, 배경, 테두리, hover 상태, 다크모드 색상처럼 UI 전반의 색상 체계를 통일하고 싶을 때 사용합니다.

50~900 단계는 어떤 의미인가요?

숫자가 낮을수록 밝은 색상이고, 숫자가 높을수록 어두운 색상입니다. 일반적으로 500 또는 600 단계를 브랜드의 기본 포인트 색상으로 사용합니다.

50~100: 밝은 배경색
200~300: 연한 테두리 또는 hover 배경
400~600: 버튼, 링크, 포인트 색상
700~900: 강조 텍스트, 어두운 배경

CSS 변수로 관리하면 좋은 이유

색상을 CSS 변수로 관리하면 여러 페이지에서 같은 색상 체계를 재사용하기 쉽고, 나중에 브랜드 색상을 변경할 때도 변수 값만 수정하면 전체 UI에 반영할 수 있습니다.

기준 색상은 어떤 색으로 잡는 것이 좋나요?

사이트에서 가장 자주 사용하는 버튼 색상이나 브랜드 포인트 색상을 기준으로 잡는 것이 좋습니다. 너무 밝거나 너무 어두운 색상보다는 중간 밝기의 색상이 팔레트 생성에 유리합니다.

CSS Variables와 SCSS Variables 중 무엇을 선택해야 하나요?

일반 CSS만 사용하는 프로젝트라면 CSS Variables를 추천합니다. SCSS 기반으로 빌드하는 프로젝트라면 SCSS Variables를 사용하면 관리하기 좋습니다.

JSON 출력은 어디에 사용하나요?

디자인 토큰, 테마 설정 파일, 프론트엔드 설정 객체처럼 JavaScript나 빌드 시스템에서 색상 데이터를 관리할 때 사용할 수 있습니다.

EDITORIAL GUIDE

색상 팔레트를 조화 방식·보간 한계와 접근성까지 고려해 만드는 법

기준색에서 여러 색을 계산하면 빠르게 후보를 만들 수 있지만, 수학적으로 일정한 간격이 사람이 느끼는 밝기와 대비까지 같다는 뜻은 아닙니다. 생성 뒤에는 실제 배경과 글자 조합에서 대비를 별도로 확인해야 합니다.

작성 · 검토: win-j
최종 검토: 2026년 8월 9일

이런 분께 유용합니다

브랜드 기준색에서 UI 후보 색을 만드는 디자이너
CSS 변수나 JSON 팔레트를 빠르게 준비하는 개발자
색상 조화와 텍스트 대비를 함께 검토하는 운영자

대표 활용 상황

한 기준색의 밝고 어두운 단계가 필요할 때
보색·유사색 등 여러 조화 방식을 비교할 때
CSS·SCSS·JSON 형식으로 색상 값을 전달할 때

처음부터 결과 확인까지

1
프로젝트에서 이미 사용하는 기준 HEX 색상을 입력합니다.
2
단색 단계, 유사색, 보색 등 콘텐츠 목적에 맞는 조화 방식을 선택합니다.
3
미리보기에서 색 사이의 밝기와 채도 변화가 지나치게 급하지 않은지 봅니다.
4
출력 형식을 정하고 색 이름과 값이 실제 용도에 맞는지 확인합니다.
5
배경·본문·버튼 상태에 적용해 텍스트 대비와 색만으로 의미를 구분하는지 검사합니다.
6
디자인 토큰에 반영한 뒤 실제 기기와 밝은·어두운 환경에서 다시 검토합니다.

실제 예시 1

브랜드 파란색 단계

입력: 기준색 #2563EB, 단색 단계
결과: 같은 색상 계열의 밝고 어두운 후보

카드 배경과 강조색 후보를 빠르게 만들 수 있지만 각 단계의 대비는 따로 측정합니다.

실제 예시 2

보색 CTA 후보

입력: 기준색 #0F766E, 보색 방식
결과: 기준색과 색상환 반대편 후보

시각적 구분은 크지만 브랜드 분위기와 색각 다양성을 실제 UI에서 확인해야 합니다.

계산·처리 기준

입력 HEX를 RGB와 HSL로 변환한 뒤 선택한 조화 방식에 따라 색상·채도·명도를 조정하고 다시 HEX로 변환합니다. 출력 문자열은 선택한 CSS, SCSS 또는 JSON 형식으로 브라우저에서 생성합니다.

알아둘 한계

HSL의 같은 수치 간격은 지각적으로 같은 밝기 간격을 보장하지 않습니다.
디스플레이 색역, 프로필과 주변 밝기에 따라 보이는 색이 달라질 수 있습니다.
생성 팔레트의 WCAG 대비를 자동 판정하지 않습니다.
브랜드·인쇄용 별색과 CMYK 변환은 지원하지 않습니다.

개인정보 처리

색상과 팔레트 이름은 브라우저에서만 처리하며 서버로 전송하지 않습니다.

참고 자료

함께 쓰면 좋은 도구

색상 대비 검사기
전경색과 배경색의 WCAG 대비율을 계산합니다.
CSS 그라데이션 생성기
선택한 색을 배경 그라데이션으로 조합합니다.

자주 묻는 질문

생성된 색은 모두 접근성을 통과하나요?

아닙니다. 사용 위치의 배경과 글자색 조합마다 대비 검사기로 확인해야 합니다.

HSL 단계가 고르게 보이지 않는 이유는 무엇인가요?

HSL 수치의 동일 간격이 사람의 밝기 지각과 동일하지 않기 때문입니다.

입력한 브랜드 색상이 저장되나요?

아닙니다. 계산과 파일 생성은 현재 브라우저 안에서 수행됩니다.