내 취향 저격 웹사이트 색상 추천과 1초 만에 끝내는 컬러 팔레트

열심히 기획하고 기능을 다 코딩해 둔 웹사이트나 사이드 프로젝트가 있다. 그런데 마지막에 화면 색상을 입히려고 컬러 피커를 켜는 순간 깊은 고민에 빠진다. 웹사이트 색상 추천 목록을 찾아보아도 메인으로 쓸 색상 외에 버튼에 마우스를 올렸을 때의 색상은 무엇으로 해야 할지, 알림 상자 배경은 왜 혼자만 튀어 보이는지 막막해지기 마련이다. 복잡한 색채학 이론서를 펼치지 않고도 클릭 한 번으로 전문가 수준의 세련된 색상 조합을 완성하는 비결이 있다.

이럴 때 써보세요

• 밤새 코딩해서 웹 애플리케이션 기능은 완성했는데 기본 파란색 버튼과 밋밋한 회색 화면 때문에 배포가 망설여질 때
• 기술 블로그나 개인 노션 페이지를 개편하면서 세련된 분위기를 연출하고 싶을 때
• 마음에 쏙 드는 대표 색상은 찾았지만 이에 어울리는 밝은 배경색과 어두운 테두리 음영을 일일이 조합하기 번거로울 때
• 디자이너 없이 혼자서 웹 화면을 기획하고 구현하는 1인 개발자나 디자인 입문자일 때

사용법

색상 조합에 대한 부담을 내려놓고 일종의 취향 찾기 놀이처럼 접근하면 된다. Tailwind 색상 팔레트 생성기를 이용하면 좋아하는 대표 색상 하나만으로 50부터 950까지 총 11단계의 자연스러운 음영을 즉시 생성한다.

1. 마음에 드는 대표 색상의 HEX 코드(예: #6366F1)를 준비한다.
2. 도구의 색상 입력창에 해당 코드를 입력하거나 컬러 피커에서 마음에 드는 색을 고른다.
3. 가장 밝은 50부터 가장 어두운 950까지 11단계로 정렬된 컬러 스케일과 함께 버튼, 배지, 알림창에 적용된 실시간 컴포넌트 프리뷰를 살펴본다.
4. 완성된 팔레트가 마음에 들면 복사 버튼을 눌러 tailwind.config.js 형식의 설정 객체나 CSS 변수(Custom Property) 코드를 가져와 프로젝트에 바로 붙여넣는다.

별도의 회원가입이나 프로그램 설치가 필요 없으며, 모든 연산이 브라우저 내부에서만 가볍게 이루어지므로 서버로 데이터가 넘어가지 않고 언제든 무료로 무제한 활용 가능하다.

더 재밌게 즐기는 팁

대표 색상 하나만 잘 골라도 웹사이트 전체 분위기가 완전히 달라진다. 어떤 느낌을 내고 싶은지에 따라 적절한 베이스 색상을 선택하고, 단계별 숫자를 활용해 화면 요소를 체계적으로 배치하면 완성도가 급상승한다.

취향 저격 무드별 추천 베이스 색상

원하는 프로젝트의 성격에 맞춰 아래 표를 참고해 적합한 베이스 색상을 선택한다.

50부터 950까지 UI 요소에 배치하는 공식

Tailwind CSS의 50~950 숫자 스케일은 시각적 계층 구조(Visual Hierarchy)를 손쉽게 세우도록 도와준다. 숫자가 작을수록 밝고, 숫자가 클수록 어두워진다. 이 규칙만 기억하면 어떤 화면 요소에 어떤 단계를 써야 할지 한눈에 정리된다.

• 50~100 (배경과 컨테이너): 화면 전체 배경이나 카드 박스의 부드러운 배경색으로 쓴다.
• 200~300 (경계선과 구분선): 카드 테두리, 리스트 구분선, 비활성화된 버튼 경계선에 사용한다.
• 500~600 (핵심 액션 요소): 가장 시선을 끌어야 하는 메인 버튼(Primary Button)이나 링크 텍스트에 적용한다.
• 700 (인터랙션 피드백): 마우스를 올렸을 때(Hover)나 클릭했을 때의 반응 색상으로 적합하다.
• 900~950 (또렷한 텍스트): 헤드라인 타이틀이나 본문 텍스트처럼 선명한 가독성이 필요한 곳에 배치한다.

실제 코드에 적용할 때는 아래 예시처럼 tailwind.config.js에 추가하여 유틸리티 클래스로 호출하면 된다.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eef2ff',
          100: '#e0e7ff',
          500: '#6366f1',
          700: '#4338ca',
          900: '#312e81',
          950: '#1e1b4b',
        },
      },
    },
  },
};

웹 접근성(WCAG) 대비 기준 지키기

웹 디자인에서 색상은 보기 좋은 것만큼이나 글자가 잘 읽히는 것이 중요하다. 웹 콘텐츠 접근성 가이드라인(WCAG)에서는 일반 본문 텍스트 기준으로 배경과 글자 간의 명도 대비를 최소 4.5대 1 이상 유지하도록 권장한다.

스케일 숫자를 활용하면 복잡한 명도 대비 계산기를 매번 두드릴 필요가 없다. 50 또는 100 단계의 밝은 배경 위에는 800, 900, 950 단계의 어두운 글자색을 얹고, 반대로 900 이상의 어두운 배경 위에는 50 단계의 밝은 글자색을 얹으면 자연스럽게 기준을 충족하는 가독성이 확보된다.