Ink·tab
←전체 유틸

한 색에서 조화로운 팔레트

베이스 색을 주면 음영·대비·보색 기반 팔레트를 생성합니다.

스와치 표시
스와치를 눌러 값 복사
대비 검사
:root {
  --color-brand-50: #f9fafe;
  --color-brand-100: #f0f3fc;
  --color-brand-200: #dfe6f9;
  --color-brand-300: #c8d3f4;
  --color-brand-400: #a4b5eb;
  --color-brand-500: #788fde;
  --color-brand-600: #5269cf;
  --color-brand-700: #3647ab;
  --color-brand-800: #24317b;
  --color-brand-900: #151d50;
  --color-brand-950: #0a1034;
}

언제 쓰나

좋아하는 색 하나가 있는데, 그보다 밝은 버전·어두운 버전이 필요할 때 씁니다. 브랜드 색을 정하고 웹사이트·앱의 배경·테두리·호버 상태에 같은 색 계열로 단계를 만들 때 유용합니다. 11 단계(아주 밝음 → 아주 어두움)가 자동으로 나옵니다.

왜 자연스럽게 보이나

일반 색 도구로 밝기를 10% 씩 올리면 실제로 눈에 보이는 변화 폭이 색마다 다릅니다 (노란색은 확 밝아지고 파란색은 덜 밝아짐). 이 도구는 사람 눈에 실제로 느껴지는 밝기 차이가 같도록 조정합니다.

색 영역 자동 보정

너무 선명한 색을 요청하면 일부 모니터에서 제대로 표시되지 않을 수 있습니다. 표시 가능한 범위로 자동 조정해 결과를 안정시킵니다.

네 가지 형식으로 내보내기

  • CSS 변수 (hex) — #3a4bd0 같은 가장 널리 쓰이는 색 표기. 어떤 프로젝트에도 그대로 붙여넣을 수 있습니다.
  • CSS 변수 (oklch) — 최신 브라우저용 새로운 색 표기. 오래된 브라우저는 hex 쪽을 쓰세요.
  • Tailwind 설정 — Tailwind 로 만든 사이트의 설정 파일에 바로 붙여넣는 형식.
  • JSON — 피그마나 다른 디자인 도구로 색을 넘길 때.

입력은 어디로 가나요?

색 변환과 팔레트 생성 계산은 모두 이 페이지 안에서 일어납니다. 기준 색·이름 등은 어디에도 전송되거나 저장되지 않고, 탭을 닫으면 사라집니다.