明るい色と暗い色
指定した色の明るい色・暗い色を作成するツール
指定した色の明るい色と暗い色の一覧を作成するツール。
ブログやホームページを統一感のある色彩にしたい場合に便利です。

ツールの使い方

まず最初に基準となる色を入力します。
色の指定には、CSSで利用可能な16進数カラーコード・RGB・HSLの3形式が利用できます。
グラデーションツールの入力部分
入力欄上部にあるタブで色の入力形式を指定できます。

出力内容の説明

入力欄に色を入力すると、入力した色の明るい色・暗い色が自動的に出力されます。
グラデーションツールの簡易出力
ここには指定した色を明るくしたものと暗くしたものが大雑把に出力されます。
グラデーションツールのデザイン確認
これは出力された色を使ってブログ・ホームページなどをデザインした場合にどんな感じになるかを表示しています。
色選びの参考にしてください。
グラデーションツールの色一覧
最後は指定色の明るい色と暗い色の一覧です。
上が最も明るい色で、下に行くほど暗い色になっています。

関連コンテンツ

WEBカラーチャート
HTML・CSSで使える色の見本一覧。各色のRGBと16進数カラーコードを簡単に取得できます。
RGBと16進数カラーコードの相互変換ツール
色の表現法である「RGB」と6桁の16進数で表される「カラーコード」を相互変換するツール。
RGBとHSLの相互変換ツール
色の表現法である「RGB」と「HSL」を相互変換するツールと変換計算式の解説。