UUUP Tools

デザインツール

配色ハーモナイザー - 定番配色ルール

基準色を 1 つ選び、complementary、analogous、triadic、tetradic、split-complementary、monochromatic などのルールで配色を生成できます。UI 上で見え方を確認し、brand や component 向けの CSS variable として書き出せます。

クイック切替→パレットジェネレーター
PaletteColorHarmony
クイック切替:パレットジェネレーターカラーフォーマット変換パステルカラージェネレーター

このツールをお気に入りに

お気に入りの保存方法がまだ選ばれていません。

クイック操作

デザインツールに戻る すべてのツールを見る

このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。

利用シーン

  • harmony rule から初期 palette をすばやく作る
  • primary / secondary button の色を派生させる
  • theme 用の CSS variable を書き出す

使い方

  1. 基準色を選ぶか入力する
  2. harmony rule を選択する
  3. swatch をクリックして色をコピーするか CSS variables をまとめてコピーする

入出力サンプル

基準色

#3b82f6（補色）

補色

#f6993b

FAQ

どのルールが含まれますか？

Complementary、analogous、triadic、tetradic、split-complementary、monochromatic の 6 ルールに対応しています。

palette generator と何が違いますか？

こちらは 1 つの基準色を色彩理論の固定ルールで展開します。palette generator はランダム探索や lock-and-iterate により向いています。

ツール

関連ツール

近い用途の翻訳済みツールへ続けて進めます。

パレットジェネレーター

パレットジェネレーター - ルールベースの配色セット

利用可能

モノクローム、類似色、補色、トライアド、完全ランダムなどのルールで配色を生成できます。個別 swatch をロックし、残りだけ再生成して UI 検討やブランド派生色づくりに使えます。

パレット 色 調和
ツールを開く

カラーフォーマット変換

カラーフォーマット変換 - HEX、RGB、HSL オンライン

利用可能

HEX、RGB、HSL、HWB、CMYK、CSS 変数のあいだで色をブラウザ内変換できます。カラーピッカーとランダムカラー補助も備え、デザインの引き継ぎ、スタイルシート作業、ブランドカラー整合に役立ちます。

カラー HEX RGB
ツールを開く

パステルカラージェネレーター

パステルカラージェネレーター - 柔らかい低彩度パレット

利用可能

柔らかいパステル調やモランディ風の配色をブラウザ内で生成できます。色数やスタイルを選び、残したい swatch をロックして、チャート、背景、やさしい UI テーマ向けに HEX 一覧や CSS 変数として書き出せます。

パステル パレット 色
ツールを開く