カラーパレット作成

基準色から補色・類似色・トライアド・単色の配色を作り、HEX、CSS 変数、JSON で保存できます。

色

モード

補色類似色トライアド同系色の明暗

色をクリックすると HEX をコピーします。文字は黒と白のうち WCAG コントラスト比が高い方を使います。生成色は不透明です。

出力形式

CSS JSON

このブラウザー内で処理します。アップロードや保存は行いません。

このツールについて

基準色から補色・類似色・トライアド・単色の配色を作り、HEX、CSS 変数、JSON で保存できます。

デザイン

HEX・RGB・HSL の入力かカラーピッカーで基準色を決め、配色方式を選びます。色見本をクリックすると HEX をコピーでき、全色を CSS 変数や JSON 配列で出力できます。

HSL の色相や明度を変えて作成し、出力は不透明です。見本の文字は WCAG コントラスト比が高い方の黒か白を使います。すべての色同士の読みやすさを保証するものではないため、実際の文字色・背景色はコントラストツールで確認してください。

HEX・RGB・HSL と透明度を変換し、色をプレビューしながら CSS の値をコピーできます。

デザイン

文字色と背景色の WCAG 2.2 コントラスト比を測定し、通常文字と大きな文字の適合状況を表示します。

デザイン

線形・放射状グラデーションを見ながら作成。色、位置、角度を調整して CSS をコピーできます。

デザイン

ずれ、ぼかし、広がり、色、不透明度を調整し、外側・内側の影を確認して CSS を取得できます。

デザイン

してディスカッションに参加してください。

コメントはまだありません。