HEX カラーパレットジェネレーター

1つのHEXカラーから、トーンスケール、ハーモニーカラー、セマンティックトークン、コピー可能なCSS変数を含む完全なパレットを生成します。

ベースカラー (HEX)

#RGB または #RRGGBB に対応（例：#0EA5E9）

ベースカラー (HEX)

プリセット

パレット概要

ベースカラーの関係性を確認し、一貫したシステムを構築します。

ベースカラー (HEX)

#2563EB

色相: 221彩度: 83%明度: 53%

ハーモニーカラー

類似色 A

#45C7E4

類似色 B

#6345E4

補色

#E6AB2A

トライアド A

#E2386D

トライアド B

#6DE238

トーンスケール（50 - 900）

背景、ボーダー、状態、テキストコントラストに使用できる明暗のシェード。

#F4F6FB

100

#D1DBF1

200

#ABBFEB

300

#82A2E7

400

#5583E8

500

#2563EB

600

#124BC7

700

#0D3794

800

#082462

900

#04112F

セマンティックトークン

UIで直接使用して、製品のビジュアルとブランドスタイルの一貫性を保ちます。

Primary

メインブランド＆CTAカラー

#2563EB

Secondary

サポートブランドカラー

#6C59D5

Accent

高コントラストハイライト

#E3AA2D

Background

ページ背景トーン

#F7F7F8

Surface

カード＆コンテナ背景

#E8E9EE

Text

デフォルト本文テキストカラー

#1B212C

CSS変数

コピーしてスタイルシートに貼り付けるだけ。

:root {
  --color-primary: #2563EB;
  --color-secondary: #6C59D5;
  --color-accent: #E3AA2D;
  --color-background: #F7F7F8;
  --color-surface: #E8E9EE;
  --color-text: #1B212C;
  --color-primary-50: #F4F6FB;
  --color-primary-100: #D1DBF1;
  --color-primary-200: #ABBFEB;
  --color-primary-300: #82A2E7;
  --color-primary-400: #5583E8;
  --color-primary-500: #2563EB;
  --color-primary-600: #124BC7;
  --color-primary-700: #0D3794;
  --color-primary-800: #082462;
  --color-primary-900: #04112F;
}