$ tools/color-wheel

カラーホイール

色とハーモニーを選択 — 補色、類似色、トライアドなど — マッチするパレットを生成。Hex、RGB、HSL、CMYK、クリックでコピー。

# 色を選択

明度50%
RGB
HSL
HSB
CMYK

$ ハーモニー

$ パレット

$ カラーホイールの使い方

ホイールの任意の場所をクリックしてベース色を設定します — 角度で色相、中心からの距離で彩度が決まります。下の明度スライダーで明るくしたり暗くしたり、またはhexコードを直接入力します。次に右側でハーモニールールを選択すると、パレットが即座に更新されます。任意のスウォッチをクリックしてhexをコピーするか、一度にセット全体を取得します。

ハーモニーが意味すること

補色はホイール上で直接反対の色を使用し、高コントラストとエネルギーを生み出します。類似色は隣接色を使用し、落ち着いた一貫性のある感覚を作り出します。三色配色は3色を均等に配置し、バランスが取れていながら活気のあるセットを作ります。スプリット補色は補色のペアを和らげます。正方配色とテトラディックは、より幅広い4色スキームを提供します。単色と濃淡 & 陰影は1つの色相にとどまり、明度のみを変化させます — クリーンでミニマルなUIに最適です。

アプリにとって重要な理由

一貫したパレットにより、App Storeのスクリーンショット、アイコン、フィーチャーグラフィックが、ランダムな色の山ではなく、1つの製品のように感じられます。ブランドの色を選び、ハーモニーを生成し、それらの正確なhexをスクリーンショットのキャプション、背景、ストアアセットで再利用してください。

$ FAQ

無料ですか?

はい — 完全無料、登録なし、制限なし。完全にブラウザ内で動作します。

HSLとHSBの違いは何ですか?

どちらも色相と彩度を表しますが、3番目の値が異なります: HSLは明度(0%黒、100%白)を使用し、HSBは輝度を使用します。デザイナーはウェブにHSLを好むことが多いです。HSBはPhotoshopのようなツールに表示されます。このホイールは両方を提供します。

自分のブランドカラーから始められますか?

はい。ボックスにhexコードを入力すると、ホイールとパレットが一致するように更新されます。次に、その周りに構築するハーモニーを選択します。

デザインでパレットをどう使いますか?

任意のスウォッチをクリックしてhexをコピーするか、「すべてのHEXをコピー」/「CSS変数としてコピー」を使用してセット全体を取得します。デザインツールやスタイルシートに直接貼り付けます。

他のカラーツール

LaunchShotsを気に入っていただけましたか?
永久無料 — 時間を節約できたなら、コーヒーをおごっていただけます。
応援する →
コピーしました ✓