ブランド配色ツール

商品写真から色を抽出し、5色を調整してシンプルな広告で確認。

写真はブラウザ内で処理。アップロードや生成クレジットは不要です。

1. 商品写真を選ぶ

SEREIN は架空のブランドです。写真の画素から配色を抽出します。

2. 5色を調整

用途を変えると、対応する2色が入れ替わります。

#B87520

用途

#F3EBDD

用途

#D9AD69

用途

#30251E

用途

#8B7159

用途

配色プレビュー

コレクション

毎日に小さな美しさを。

商品写真を選んでください。

次の作品に向けた配色プレビュー。

文字 / 背景のコントラスト 12.59:1

AA：通常の文字に適合。

AA基準：通常文字4.5:1、大きな文字3:1。選択した文字色と背景色のみを確認します。

CSSを表示 / 手動コピー

:root {
  --brand-primary: #B87520;
  --brand-background: #F3EBDD;
  --brand-accent: #D9AD69;
  --brand-text: #30251E;
  --brand-secondary: #8B7159;
}

次の作品に配色を活用：キャンバスを開く