はじめに
UI を実装するとき、「ベースの色は決めたものの、それに合わせる色がなかなか決まらない」と悩んだ経験はないでしょうか。
配色のたびに色相環を調べたり、カラーコードを微調整したりするのは地味に手間がかかります。
そこで、シード色を1つ入力するだけで調和の取れたカラーパレットを生成できるツールを個人開発しました。本記事で紹介します。
配色は地味に時間がかかる
補色・類似色・トライアドといった配色ルール（カラーハーモニー）は知っていても、いざ実装するとなると手間がかかります。
- 色相環上の角度を計算して、合う色を割り出す
- カラーコードを1つずつ微調整する
- 決まった配色を CSS や SwiftUI のコードに書き起こす
特に最後の「コードに書き起こす」工程は、Web・モバイルを並行して開発しているとフォーマットごとに書き直す必要があり、繰り返すと地味に面倒です。
作ったもの：Color Palette Generator
シード色を1つ選ぶだけで、6種類の配色パターンを自動生成します。生成結果は、そのまま開発で使えるコードとして4つのフォーマットで出力されます。
6種類の配色パターン
このツールが生成するのは、色彩理論にもとづいた以下の6種類です。
- 補色（Complementary） — 色相環で正反対に位置する色の組み合わせ。コントラストが強く、アクセントカラーに向いています。
- 類似色（Analogous） — 色相環で隣り合う色の組み合わせ。まとまりがあり、落ち着いた印象になります。
- トライアド（Triadic） — 色相環を3等分した位置の色の組み合わせ。バランスの取れた、にぎやかな配色になります。
- テトラード（Tetradic） — 補色のペアを2組使う4色の組み合わせ。色数が多く華やかですが、バランス調整はやや難しめです。
- スプリットコンプリメンタリー（Split-Complementary） — 補色の両隣の2色を使う組み合わせ。補色よりもやわらかいコントラストになります。
- モノクロマティック（Monochromatic） — 1つの色相で明度・彩度だけを変えた組み合わせ。最も安全で統一感のある配色です。
「とりあえず無難にまとめたい」ならモノクロマティックや類似色、「メリハリを付けたい」なら補色やトライアド、というように目的に応じて切り替えられます。
使い方
操作はシンプルで、3ステップで完了します。
-
シード色を入力する — カラーピッカーで選ぶか、hex コード（例：
#02816F）を直接入力します。 - 配色パターンを選ぶ — Complementary / Analogous / Triadic / Tetradic / Split-Comp / Monochromatic のタブから選びます。
- コードをコピーする — CODE OUTPUT で出力フォーマット（CSS / Tailwind / SwiftUI / Compose）を選び、コピーボタンで取得します。
主な機能
- 6種類の配色パターン — 上記のカラーハーモニーをワンクリックで切り替え
- 4つのフォーマットでコード出力 — CSS変数 / Tailwind / SwiftUI / Jetpack Compose
- ワンクリックでコピー — 生成されたコードをそのままコピーして使えます
- 100% クライアントサイド — すべての処理がブラウザ内で完結し、入力したデータが外部に送信されることはありません
- 登録不要・無料 — アカウント作成なしですぐに使えます
出力例
たとえばシード色 #02816F でトライアド配色を選ぶと、次のようなコードが得られます。
CSS変数
:root {
--base: #02816F;
--tri-1: #6F0283;
--tri-2: #836F02;
}
SwiftUI
extension Color {
static let base = Color(red: 0.01, green: 0.51, blue: 0.44)
static let tri1 = Color(red: 0.44, green: 0.01, blue: 0.51)
static let tri2 = Color(red: 0.51, green: 0.44, blue: 0.01)
}
Jetpack Compose
val Base = Color(0xFF02816F)
val Tri1 = Color(0xFF6F0283)
val Tri2 = Color(0xFF836F02)
同じパレットを Web・モバイルのどちらの開発でもそのまま使えるので、フォーマットを変換する手間がありません。
こんな方におすすめ
- 配色を考えるのに時間をかけたくない方
- デザインツールを開かずに、ブラウザでサッと配色を決めたい方
- Web とモバイルを並行して開発していて、同じパレットを複数フォーマットで使いたい方
- 入力データを外部に送信したくない方
おわりに
配色で悩む時間を減らし、実装に集中できればと思って作りました。
ブラウザですぐに試せるので、よかったら触ってみてください。フィードバックや「こんな機能が欲しい」という要望もお待ちしています。