カラーツール

カラーハーモニー生成

HEXカラーコードから補色、類似色、トライアド、スプリット補色、テトラードなどの調和色パレットを自動生成します。

ツールを実行

基準となる16進数(HEX)カラーコードと調和方式を指定して、デザインやWeb制作に適したカラーハーモニー(配色パレット)を生成するツールです。指定可能なハーモニーの種類には、色相環で反対側に位置する「補色」、隣接する色を選ぶ「類似色」、正三角形を成す「トライアド」、補色の両隣を採用する「スプリット補色」、4色を組み合わせる「テトラード」の5種類があります。入力されたHEXコードは小文字の6桁表記に正規化され、計算されたRGB値から各調和色のHEXカラーコードが一覧で出力されます。基準色を省略した場合は既定の色(#3498db)が使用され、配色の種類を省略した場合は補色が自動的に算出されます。

使い方

  1. 基準にしたい色を16進数カラーコード(例: #3498db または 3498db)で入力します。
  2. 生成したい配色の種類(補色、類似色、トライアド、スプリット補色、テトラード)を選択します。
  3. 生成を実行すると、結果欄に正規化された基準色と計算された各調和色のカラーコードが表示されます。

使用例

  • 基準色に「#ff5733」、配色の種類に「補色」を指定して実行すると、色相が180度反転した補色コードが表示されます。
  • 基準色に「#2ecc71」、配色の種類に「類似色」を指定して実行すると、色相がマイナス30度およびプラス30度シフトした2つの類似色コードが表示されます。

よくある質問

3桁の短縮HEXカラーコード(例: #fff)は入力できますか?

はい、3桁の16進数コードを入力した場合は自動的に6桁の形式に展開されて処理されます。また、先頭の#記号は省略しても自動補完されます。

対応している配色の種類にはどのようなものがありますか?

補色(180度シフト)、類似色(±30度シフト)、トライアド(120度・240度シフト)、スプリット補色(150度・210度シフト)、テトラード(60度・180度・240度シフト)の5種類に対応しています。

基準色や配色の種類を指定しなかった場合はどうなりますか?

基準色を指定しない場合は既定値の#3498dbが適用され、配色の種類を指定しない場合は補色パレットが自動的に算出されます。

このツールを埋め込む

以下のコードを使って、SmartPlusLab のツールをウェブサイトに追加できます。