---
title: "Tailwindカラーパレットジェネレーター - 基準色から11色の濃淡パレットを生成"
description: "1つの基準色から、Tailwindで使えるカラーパレットを作るツールです。ブランドカラーを入力すると、色味を保ったまま明るい色から濃い色までのスケールに展開し、そのままCSSやTailwindの設定にコピーできます。"
canonical_url: "https://web-toolbox.dev/tools/tailwind-color-palette"
meta:
  author: K
  "og:description": "1つの基準色から、Tailwindで使えるカラーパレットを作るツールです。ブランドカラーを入力すると、色味を保ったまま明るい色から濃い色までのスケールに展開し、そのままCSSやTailwindの設定にコピーできます。"
  "og:image": "https://web-toolbox.dev/og/ja/tools/tailwind-color-palette-aeb36055.png"
  "og:image:alt": Tailwindカラーパレットジェネレーター
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "Tailwindカラーパレットジェネレーター - 基準色から11色の濃淡パレットを生成"
---

> Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt)

# **Tailwindカラーパレットジェネレーター**

基準色からTailwindの濃淡パレットを作成

## **基準色**

**カラーコード**

## **パレット**

#3b82f6→500に配置

**表記**

-
-
-
-
-
-
-
-
-
-
-

スウォッチを押すと値をコピーします

## **コード**

theme.css

**パレット名**

**形式**

```
@theme {
  --color-brand-50: oklch(0.97 0.012 254.604);
  --color-brand-100: oklch(0.932 0.028 255.585);
  --color-brand-200: oklch(0.882 0.052 254.128);
  --color-brand-300: oklch(0.809 0.092 251.813);
  --color-brand-400: oklch(0.707 0.145 254.624);
  --color-brand-500: oklch(0.623 0.188 259.815);
  --color-brand-600: oklch(0.546 0.215 262.881);
  --color-brand-700: oklch(0.488 0.213 264.376);
  --color-brand-800: oklch(0.424 0.175 265.638);
  --color-brand-900: oklch(0.379 0.128 265.522);
  --color-brand-950: oklch(0.282 0.08 267.935);
}
```

v4は選択した表記、v3はHEXで出力します

## Tailwindカラーパレットジェネレーターとは？

1つの色から、Tailwindで使える11色の濃淡パレットを作るツールです。ブランドカラーを入れると、同じ色味のまま明るい色から濃い色までを揃えられます。

作ったパレットは、Tailwindの設定やCSSにそのままコピーできます。

## 使い方

1. 基準色を入力するか、ピッカーや「Tailwindの色から選ぶ」で選びます。
2. パレットを確認し、スウォッチまたは「すべての色をコピー」で値をコピーします。
3. コード欄でパレット名・表記・Tailwind v4/v3を選び、コードをコピーします。

## 主な設定項目

### 基準色

パレットの元になる色です。入力した色は、パレットの中で近い濃さの色としてそのまま残ります。

### パレット名

`**primary**`を指定すると、`**--color-primary-50**`から`**--color-primary-950**`までのCSS変数として使えます。空白・大文字・記号は自動で整えられ、`**Brand Color**`は`**brand-color**`になります。空の場合は`**brand**`になります。

### 表記

- **OKLCH**: Tailwind v4の設定にそのまま使える書き方です
- **HEX**: 一般的なカラーコードです。CSSやデザインツールで広く使えます

Tailwind v4は選んだ表記、v3はHEXで出力します。

### プリセット

Tailwindの色系統から基準色を選べます。色帯を押すと、その系統の色が基準色に入ります。

## 活用シーン

- ブランドカラーをTailwindのクラス名で使いたいとき
- `**primary**`や `**accent**`などの色を、明るい色から濃い色までまとめて用意したいとき
- 既存の1色から、ボタンや背景に使う濃淡を揃えたいとき

## 使うときの注意点

- とても鮮やかな色は、パレットの明るい色や濃い色で同じ鮮やかさを再現できないことがあります
- OKLCHでコピーした色が、画面では少し違う色に見えることがあります。その場合、スウォッチとHEXは近似色です

**使ってみてどうでしたか？**

最終更新: 2026年10月30日

### **関連ツール**

- [<h4>**カラーコントラストチェッカー**</h4>](https://web-toolbox.dev/tools/color-contrast-checker)
- [<h4>**カラーコードコンバーター**</h4>](https://web-toolbox.dev/tools/color-converter)
- [<h4>**カラーコード抽出**</h4>](https://web-toolbox.dev/tools/color-extractor)
- [<h4>**カラースポイト**</h4>](https://web-toolbox.dev/tools/color-eyedropper)
- [<h4>**Border Radiusジェネレーター**</h4>](https://web-toolbox.dev/tools/border-radius-generator)
- [<h4>**Box Shadowジェネレーター**</h4>](https://web-toolbox.dev/tools/box-shadow-generator)
- [<h4>**CSS背景パターンジェネレーター**</h4>](https://web-toolbox.dev/tools/css-background-pattern-generator)
- [<h4>**CSSフィルタージェネレーター**</h4>](https://web-toolbox.dev/tools/css-filter-generator)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"ja-JP","name":"Web ToolBox","url":"https://web-toolbox.dev/","workTranslation":{"@id":"https://web-toolbox.dev/en#website"}},{"@id":"https://web-toolbox.dev/tools/tailwind-color-palette#webpage","@type":"WebPage","description":"1つの基準色から、Tailwindで使えるカラーパレットを作るツールです。ブランドカラーを入力すると、色味を保ったまま明るい色から濃い色までのスケールに展開し、そのままCSSやTailwindの設定にコピーできます。","name":"Tailwindカラーパレットジェネレーター - 基準色から11色の濃淡パレットを生成","url":"https://web-toolbox.dev/tools/tailwind-color-palette","isPartOf":{"@id":"https://web-toolbox.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/tools/tailwind-color-palette"]}]},{"@id":"https://web-toolbox.dev/tools/tailwind-color-palette#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"1つの基準色から、Tailwindで使えるカラーパレットを作るツールです。ブランドカラーを入力すると、色味を保ったまま明るい色から濃い色までのスケールに展開し、そのままCSSやTailwindの設定にコピーできます。","name":"Tailwindカラーパレットジェネレーター - 基準色から11色の濃淡パレットを生成","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]}
```

## Sitemap

See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.