Tailwind CSS 컬러 생성기

기본 색상을 입력하여 완전한 Tailwind CSS 색상 팔레트(50-950)를 생성합니다. tailwind.config.js 설정 스니펫을 복사하세요.

색상 팔레트 미리보기

tailwind.config.js

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': {
        50: '#f3f6fc',
        100: '#e3ebf7',
        200: '#c0d5f7',
        300: '#92b6f1',
        400: '#538ce9',
        500: '#0b64f4',
        600: '#0954cd',
        700: '#0846ab',
        800: '#11356e',
        900: '#0c244b',
        950: '#07152c',
        },
      },
    },
  },
}

Tailwind 컬러 생성기 사용법

  1. 1.색상 견본을 클릭하거나 입력 필드에 HEX 색상 코드를 입력합니다.
  2. 2.디자인 시스템에 맞는 색상 이름을 설정합니다 (예: "brand", "primary").
  3. 3.기본 색상에서 생성된 11단계 음영(50~950)을 미리봅니다.
  4. 4.음영을 클릭하여 HEX 값을 복사하거나, tailwind.config.js의 전체 설정 스니펫을 복사합니다.

자주 묻는 질문

팔레트 생성 원리는?

도구는 기본 색상을 HSL로 변환한 후, 밝기 값을 매우 밝은(97%)에서 매우 어두운(10%)까지 변화시켜 11개의 음영을 생성하고, 채도를 미세하게 조정하여 더 자연스러운 결과를 얻습니다.

Tailwind CSS v4에서 사용할 수 있나요?

네. 생성된 설정 스니펫은 Tailwind CSS v3과 v4 모두에서 작동합니다. v4의 CSS 기반 설정에서는 HEX 값을 CSS 사용자 정의 속성에 직접 사용할 수 있습니다.

기본 Tailwind 팔레트와 일부 음영이 다른 이유는?

기본 Tailwind 색상은 디자이너가 수동으로 조정한 것입니다. 이 생성기는 HSL 밝기 기반 알고리즘 방식을 사용하여 좋은 결과를 제공하지만 수작업 팔레트와 약간 다를 수 있습니다.

여러 색상 팔레트를 생성할 수 있나요?

색상 이름과 기본 색상을 변경하여 다른 팔레트를 생성할 수 있습니다. 각 설정 스니펫을 복사하여 tailwind.config.js의 colors 키 아래에서 결합하세요.