플레이그라운드로 돌아가기

color tool

컬러 팔레트 스튜디오

핵심 색상 하나를 입력하면 UI에 바로 쓸 수 있는 단계 팔레트, 보색, CSS 변수, Tailwind 힌트를 생성합니다.

기준 색상

팔레트

CSS 변수

:root {
  --brand-50: #eef7fc;
  --brand-100: #d1edfa;
  --brand-300: #78cff7;
  --brand-500: #0ea5e9;
  --brand-700: #0a7aae;
  --brand-900: #023e5a;
  --brand-accent: #242ff9;
  --brand-complement: #e7520d;
}

Tailwind 힌트

bg-[#0ea5e9] text-[#eef7fc] border-[#78cff7] hover:bg-[#0a7aae]