Tailwind CSS 색상 생성기

기본 색상에서 50부터 950까지의 셰이드가 포함된 Tailwind CSS 색상 팔레트를 생성합니다

모든 처리는 브라우저에서 이루어집니다. 데이터가 업로드되지 않습니다.

Offline Ready

Tailwind CSS 색상 생성기

기본 색상에서 50부터 950까지의 셰이드가 포함된 Tailwind CSS 색상 팔레트를 생성합니다

🔒모든 처리는 브라우저에서 이루어집니다. 데이터가 업로드되지 않습니다.

기본 색상

색상 이름

색상 팔레트 (50-950)

50#F2F6FD

100#E3EDFC

200#BDD4FA

300#80AEF9

400#4388F9

500#0B64F4

600#0653D0

700#0343AA

800#033382

900#032359

950#021431

CSS 변수

:root {
  --color-primary-50: #F2F6FD;
  --color-primary-100: #E3EDFC;
  --color-primary-200: #BDD4FA;
  --color-primary-300: #80AEF9;
  --color-primary-400: #4388F9;
  --color-primary-500: #0B64F4;
  --color-primary-600: #0653D0;
  --color-primary-700: #0343AA;
  --color-primary-800: #033382;
  --color-primary-900: #032359;
  --color-primary-950: #021431;
}

Tailwind 설정

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': {
      50: '#F2F6FD',
      100: '#E3EDFC',
      200: '#BDD4FA',
      300: '#80AEF9',
      400: '#4388F9',
      500: '#0B64F4',
      600: '#0653D0',
      700: '#0343AA',
      800: '#033382',
      900: '#032359',
      950: '#021431',
        },
      },
    },
  },
};