カラーパレット生成

ベースカラーから濃淡・補色・類似色などのパレットを生成。CSS変数・Tailwind形式でエクスポート

#3B82F6

HSL(217, 91, 60)

#F0F6FE

#E2ECFE

100

#C0D7FC

200

#8FB8FA

300

#5593F7

400

#0B64F4

500

#0950C3

600

#07409C

700

#063075

800

#042253

900

#021431

950

CSS変数

:root {
  --color-50: #f0f6fe;
  --color-100: #e2ecfe;
  --color-200: #c0d7fc;
  --color-300: #8fb8fa;
  --color-400: #5593f7;
  --color-500: #0b64f4;
  --color-600: #0950c3;
  --color-700: #07409c;
  --color-800: #063075;
  --color-900: #042253;
  --color-950: #021431;
}

Tailwind設定

colors: {
  primary: {
    '50': '#f0f6fe',
    '100': '#e2ecfe',
    '200': '#c0d7fc',
    '300': '#8fb8fa',
    '400': '#5593f7',
    '500': '#0b64f4',
    '600': '#0950c3',
    '700': '#07409c',
    '800': '#063075',
    '900': '#042253',
    '950': '#021431',
  }
}

HSL色空間で計算。Tailwind CSS風の濃淡スケール（50〜950）対応。CSS変数・Tailwindの両形式でエクスポート可能。データは外部に送信されません。