オンラインカラーピッカー

更新日:
タグ: カラー

ツール紹介:

下のカラーピッカー/パレットで希望の色をクリックすると、ツールは即座に16進数カラーコードを表示し、対応するRGB、CMYK、LAB、HSL、XYZ、LUV、HWBなどのカラー変換値を表示します。パレット内の上下ボタンをクリックしてHEX、RGB、HSLを切り替えることができ、その値を変更することもできます。HUEバーをドラッグして色相を調整できます。下部では色の変化を表示し、純粋な白または黒を10%ずつ増やして選択した色の濃淡値を生成します。このツールはまた、カラーコンビネーションを表示し、補色、分割補色、トライアド、アナロガス、モノクロマティック、テトラディックなどの配色を含みます。さらに、カラーコントラストチェッカーも付属しており、「クリックして修正」をクリックするとテキストと背景色のコントラストを最適値に調整できます。

カラーピッカー

カラー値

HEX: #29A0CA
RGB: rgb(41, 160, 202)
CMYK: cmyk(80%, 21%, 20%, 0%)
HSL: hsl(195°, 66%, 48%)
LAB: lab(62.35, -16.81, -24.62)
XYZ: xyz(30.45, 34.12, 55.80)
LUV: luv(62.35, -25.22, -36.93)
HWB: hwb(195°, 16%, 21%)

色の変化

色の変化は、選択した色と白と黒の混合効果を示しています。上部セクションでは色と異なる割合の白との混合(明るくなる)を表示し、下部セクションでは異なる割合の黒との混合(暗くなる)を表示します。各カラーブロックには16進数コードが表示され、クリックするとコピーできます。

カラーコンビネーション

カラーコンビネーションは、選択した色とよく合う他の色を表示します。これらの組み合わせは色彩理論に基づいており、カラースキームの設計に使用できます。任意の色をクリックすると、その16進数コードをコピーできます。

補色

補色は色相環上で互いに反対側(180°離れた位置)にあります。この組み合わせは強いコントラストを生み出し、活気に満ちています。

分割補色

基本色を選び、その補色の両側にある色(通常30°離れた位置)を選びます。この組み合わせは高いコントラストを提供しますが、直接的な補色よりも調和がとれています。

トライアド

色相環上で等距離(120°離れた位置)にある3色を選びます。この組み合わせはバランスが取れていて活気がありますが、使用する際には比率に注意が必要です。

アナロガス

色相環上で隣接する色(通常30°離れた位置)を選びます。この組み合わせは調和がとれていて自然であり、快適なデザインを作るのに適しています。

モノクロマティック

同じ色相だが明るさと彩度が異なる色を使用します。この組み合わせはクリーンで調和がとれており、ミニマリストデザインに適しています。

テトラディック

色相環上で等距離にある4色(通常は長方形または正方形を形成)を選びます。この組み合わせは豊かでカラフルですが、過度に複雑にならないように注意して使用する必要があります。

補色
分割補色
トライアド
アナロガス
モノクロマティック
テトラディック

コントラストチェッカー

コントラストチェッカーは、テキストカラーと背景色の可読性を評価するために使用されます。良好なコントラストは、特に視覚障害のあるユーザーにとって、コンテンツのアクセシビリティを向上させるために重要です。WCAG標準では、AAレベルでは少なくとも4.5:1のコントラスト比、AAAレベルでは少なくとも7:1のコントラスト比が必要です。

Aa プレビューテキスト Sample Text

1234567890

コントラスト比: 3.14
WCAG AA: 不合格
WCAG AAA: 不合格