セマンティックUIパレット

1つのブランドカラーを入力すると、プライマリ/セカンダリ/サクセス/ウォーニング/デンジャーが生成され、Tailwind設定とCSS変数としてエクスポートされます。

ブランドプライマリ

2F6FED · L 57%

プライマリ

自動生成、ブランドの明度と彩度を保持

#010101ベース

#010101ライト

#000101ダーク

セカンダリ

自動生成、ブランドの明度と彩度を保持

#010101ベース

#010101ライト

#010101ダーク

成功

自動生成、ブランドの明度と彩度を保持

#000101ベース

#010101ライト

#000100ダーク

警告

自動生成、ブランドの明度と彩度を保持

#010100ベース

#010101ライト

#010100ダーク

危険

自動生成、ブランドの明度と彩度を保持

#010101ベース

#010101ライト

#010000ダーク

コードをエクスポート

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
      primary: {
        DEFAULT: "#010101",
        light: "#010101",
        dark: "#000101",
        foreground: "#ffffff",
      },
      secondary: {
        DEFAULT: "#010101",
        light: "#010101",
        dark: "#010101",
        foreground: "#ffffff",
      },
      success: {
        DEFAULT: "#000101",
        light: "#010101",
        dark: "#000100",
        foreground: "#ffffff",
      },
      warning: {
        DEFAULT: "#010100",
        light: "#010101",
        dark: "#010100",
        foreground: "#ffffff",
      },
      danger: {
        DEFAULT: "#010101",
        light: "#010101",
        dark: "#010000",
        foreground: "#ffffff",
      },
      },
    },
  },
};

意味的システムの構築方法 - 1 つのプライマリ、5 つのロール

ブランドカラーを入力すると、インターフェースに必要な 5 つの意味的セットがコードとして出力されます。

01
プライマリを入力
ブランドの HEX を貼り付けてください。意味的色はその明度と彩度の特性を継承します。
02
ロールを確認
成功は緑の色相範囲、警告は琥珀、危険は赤に割り当てられます。色相は意味的であり、特性はブランドに準拠します。
03
エクスポート
Tailwind 設定 / CSS 変数 / JSON としてコピーし、デザインシステムに直接貼り付けます。

セマンティックパレット FAQ

デザインシステムに組み込む際のよくある3つの質問です。

セマンティック色相は固定ですか？: 色相はセマンティック範囲（成功＝緑、警告＝アンバー、危険＝赤）に基づき、明度と彩度はブランドのプライマリから継承されます。各ブランド独自の特性が生成されます。
セマンティックカラーごとに3つのステップがあるのはなぜですか？: ベースはデフォルト状態、ライトはホバー/ティント、ダークはアクティブ/ボーダー用です。テキストカラーはコントラストにより自動的に黒または白が選択されます。
エクスポートしたコードは本番環境で使用できますか？: Tailwind ブロックは tailwind.config に直接貼り付け可能です。CSS 変数ブロックは任意のフレームワークやプレーン CSS で動作します。

セマンティックパレットの次に

ボードエディタを開き、実際のインターフェースとして操作します。

OKLCHエディター

知覚的に均一なOKLCH空間でL/C/Hを調整し、ライブプレビューとoklch()/HEX/RGB出力を備えています。

階調ジェネレーター

任意の色をOKLCHで知覚的に均一な11段階のデザインシステムスケールに変換し、各段階でWCAGコントラストを確保してTailwind/CSS/SCSS/JSONとしてエクスポートできます。

コントラストチェッカー

任意の前景色と背景色の間のWCAG 2.1準拠コントラストを検証します。

AIパレットスタジオ

1行でシーンや気分を記述すると、理由付きの5色パレットが得られます。

// tailwind.config.js module.exports = { theme: { extend: { colors: { primary: { DEFAULT: "#010101", light: "#010101", dark: "#000101", foreground: "#ffffff", }, secondary: { DEFAULT: "#010101", light: "#010101", dark: "#010101", foreground: "#ffffff", }, success: { DEFAULT: "#000101", light: "#010101", dark: "#000100", foreground: "#ffffff", }, warning: { DEFAULT: "#010100", light: "#010101", dark: "#010100", foreground: "#ffffff", }, danger: { DEFAULT: "#010101", light: "#010101", dark: "#010000", foreground: "#ffffff", }, }, }, }, };

意味的システムの構築方法 - 1 つのプライマリ、5 つのロール

ブランドカラーを入力すると、インターフェースに必要な 5 つの意味的セットがコードとして出力されます。

プライマリを入力

ブランドの HEX を貼り付けてください。意味的色はその明度と彩度の特性を継承します。

ロールを確認

成功は緑の色相範囲、警告は琥珀、危険は赤に割り当てられます。色相は意味的であり、特性はブランドに準拠します。

エクスポート

Tailwind 設定 / CSS 変数 / JSON としてコピーし、デザインシステムに直接貼り付けます。

セマンティックパレット FAQ

デザインシステムに組み込む際のよくある3つの質問です。

セマンティック色相は固定ですか？

色相はセマンティック範囲（成功＝緑、警告＝アンバー、危険＝赤）に基づき、明度と彩度はブランドのプライマリから継承されます。各ブランド独自の特性が生成されます。

セマンティックカラーごとに3つのステップがあるのはなぜですか？

ベースはデフォルト状態、ライトはホバー/ティント、ダークはアクティブ/ボーダー用です。テキストカラーはコントラストにより自動的に黒または白が選択されます。

エクスポートしたコードは本番環境で使用できますか？

Tailwind ブロックは tailwind.config に直接貼り付け可能です。CSS 変数ブロックは任意のフレームワークやプレーン CSS で動作します。