配色パレット付きカラー選択ツール | petuja.tools

色を選択

色相

HEX カラー

配色

色のバリエーション

明るい色

暗い色

落ち着いた色調

このツールの機能

このカラー選択ツールでは、ブラウザ標準のカラーパネルまたは HEX 値で色を選び、対応する RGB と HSL の値を確認できます。

選択した色を基に、関連する配色と、より明るい色・暗い色・中間的な色調を計算します。

使い方

カラーパネルで色を選ぶか、完全な HEX 値を入力します。
同じ HSL 計算に基づく関連色を確認するには、配色タイプを選択します。
パレット内のカラー値をクリックすると、クリップボードにコピーできます。

実用例

デザインの基準色を、対応する HEX・RGB・HSL 値とともに記録する。
補色またはトライアド配色から、インターフェースのアクセント色や補助色を選ぶ。
背景、境界線、強調要素などに使う明るい色と暗い色を用意する。

注意事項と制限

プレビューは一般的なブラウザのカラー値を使用し、個別のモニター、印刷、ICC プロファイルは考慮しません。
計算したパレットはコントラストやアクセシビリティを検証しません。重要な文字色と背景色の組み合わせは別途確認してください。

よくある質問

提案されたカラーパレットは自動的にアクセシブルになりますか？

いいえ。配色とバリエーションはカラー値から計算されます。使用予定の文字色と背景色の組み合わせごとに、実際のコントラストを確認してください。