メインコンテンツへスキップ
Color Codes

色を選ぶ

カラーピッカー

色を視覚的に選ぶか、HEX・RGB・HSL の値を入力して、対応する OKLCH、濃淡、ティント、トーン、配色の候補を確認できます。CSS、UI コンポーネント、ブランドパレットづくりに。

色を選ぶ

値

RGB
HSL

濃淡

濃淡をクリックするとベースカラーとして使えます。

補色
類似色
トライアド
スプリット補色

次のステップ

このツールでできること

01

HEX・RGB・HSL・OKLCH

ひとつのピッカーで主要な CSS カラー形式を比較し、コードやデザインツールに必要な値をコピーできます。

02

濃淡・ティント・トーン

ひとつのベースカラーから明るい色と暗い色を作成し、ホバー状態、ボーダー、背景、デザイントークンに使えます。

03

カラーシステムの出発点に

ベースカラーを決めたら、コントラストの確認、形式の変換、カラーホイールでのパレット作成へ進めます。