コンテンツへスキップ

四色配色ジェネレーター

この四色配色ジェネレーターを使って、1色のベースカラーから4色の四色配色を作成できます。3桁または6桁の16進コードを入力すると、HSL色相環上で90度ずつ均等に配置された4色が16進コードで返されます。これらは、ベースカラーと彩度および明度が同じ、2組の補色です。ダッシュボード、ゲーム、イラスト、ブランディング向けに豊かで変化に富んだパレットを必要とするデザイナーや開発者に最適です。

リセット

よくある質問

四色配色ジェネレーターは何を出力しますか?

6桁の小文字の16進コードで4色を返します。Color 1がベースカラーで、Colors 2、3、4は色相を90度、180度、270度回転させた色です。

正方形または長方形の四色配色ですか?

正方形の四色配色です。4色の色相は90度ずつ均等に配置されます。Colors 1と3、Colors 2と4がそれぞれ補色の組になります。

配色はどのように計算されますか?

ツールは入力された16進コードをHSLに変換し、色相に90度、180度、270度を加えて、360度を超えると最初に戻ります。彩度と明度は変わらず、各色相は16進コードに変換されます。

純粋な赤の四色配色は何色ですか?

#ff0000の場合、ツールは#ff0000、#80ff00、#00ffff、#8000ffを返します。赤、黄緑、シアン、紫です。結果は、画面表示に基づくHSL色相環に従い、画家が使う赤、黄、青の色相環には従いません。

どの色形式を入力できますか?

#の有無を問わず、3桁または6桁の16進コードを1つ入力します。#ff5733やf00のような形式です。RGB形式、HSL形式、色名は受け付けないため、先に16進コードに変換してください。

Color 1が入力値と少し異なるのはなぜですか?

計算では色相、彩度、明度を整数に丸めるため、変換して戻す過程で1つの色チャンネルが1段階ずれることがあります。たとえば#ff5733は、#ff5833、#74ff33、#33daff、#be33ffを返します。

4色パレットのバランスを保つにはどうすればよいですか?

1色をメインカラーに選び、2色目を補助領域に使い、残りの2色は小さなアクセントに使います。暖色と寒色をどちらも高彩度のまま同じ量だけ混ぜると雑然と見えるため、大きな面には一部の色を薄くするか暗くして使いましょう。

黒、白、グレーの場合はどうなりますか?

無彩色は彩度がゼロのため、4つの結果はすべて同じグレーになります。ある程度彩度のあるベースカラーなら、異なる4色が得られます。

四色配色と三色配色の違いは何ですか?

四色配色は90度ずつ配置された4色、三色配色は120度ずつ配置された3色です。四色配色はより多彩で、三色配色はバランスを取りやすい配色です。

出力はColor Palette Generatorと同じですか?

はい。このツールはColor Palette GeneratorのTetradicオプションとまったく同じ計算を行うため、同じベースカラーに対して両方とも同じ4つの16進コードを返します。

OneClick Proについて

OneClick Proは、日々の作業に役立つ150以上のウェブツールを集めた無料コレクションです。画像や単位の変換、コードの整形と検証、ドメインやSEOの確認、テキスト、日付、数値の処理などに利用できます。すべてのツールは登録やサブスクリプションなしで使えます。入力した内容は結果の計算にのみ使用され、保存されることはありません。単発の作業に使える便利なツールボックスとして、または毎日使うツールをブックマークしてご活用ください。