はじめまして。
主にweb制作を行っているoimと申します。
web上で色を指定する際、RGBや16進数のカラーコードで指定することが多いと思いますが、
HSLという指定方法をご存じでしょうか。
HSL値とは
アルファベットは以下のような頭文字になっています。
H・・・hue（色相）
S・・・saturation（彩度）
L・・・lightness（明度）
つまり、色のH～Lの値を変えることで、色の色相（色合い）や彩度・明度のみを変更することができるのです。
CSSで指定するときはこのような表記になります。
.example {
background: hsl(色相, 彩度%, 明度%);
}
その際、Hは色相環の360°に沿って0～360の値で指定して・・みたいなイメージになるのですが
色相環ってあまり気にしたことないし、すぐにイメージできないことも 
そこで便利なのがデベロッパツールを活用する方法です。
デベロッパツールでHSL値を変えてみる
例として、このボタンの赤色のHSLAを調整してみます。
対象の要素の上で右クリック > [検証] でデベロッパツールを開きます。
スタイルを参照し、色がプレビューされている小さな正方形をクリックしてみてください。
カラー選択ツールなるものが出現しました 
カラーコードが入っていた部分がHSLA※表示に変わるまで右にある矢印をクリックしてみてください。
※A・・・alpha（透明度）。今回は使いません。
これで対象の要素のHSL値をいじれるようになりました。
値に応じてだんだん色が変わってくれるので
色相環を頭に思い浮かべたり数字でイメージする必要がないのに加えて、
デベロッパツールなのでプレビューできるのがうれしいポイントです 
早速変えてみよう
色の印象が変わっていくのを楽しみます 
まず、H（hue/色相）の値を変えてみます。
色相は虹色のバーで調整することもできるので、青色のところに合わせてみると…
赤色のときに0だったHの値が「233」に変更されました。
Hの値だけが変化しているので、S（saturation/彩度）やL（lightness/明度）は変わっていないことが確認できます。
つまり、同じ彩度と明度の赤色→青色に変化させることができました。
hsl(0, 50%, 48%) → hsl(233, 50%, 48%)
これを使えば、サイトのテーマカラーの色相のみを変更し、
サイト全体の印象は変えずに強調色を作ることなどができそうです。
次にS（saturation/彩度）の数値を変えてみます。
彩度が50%から36%に下がったことで、より落ち着いた印象になりました。
hsl(0, 50%, 48%) → hsl(0, 36%, 48%)
反対に彩度の値を上げると鮮やかさが増します。
最後にL（lightness/明度）の数値を変えてみます。
明度が48%から63%に上がったことで、軽い・柔らかい印象の赤色に変化しました。
hsl(0, 50%, 48%) → hsl(0, 50%, 63%)
だんだんと明度だけを上げた（下げた）色を要素ごとに使っていけば
簡単にグラデーションっぽいあしらいを作ることができそう。
明度を下げれば影とかにも使えそう。
カラーコードに変換もできる
色は見つけられたけど、css上ではHSL値で色指定してないんだよな～という場合は
最初にクリックした矢印をまたポチポチとして色形式を変えれば…
簡単にRGBやカラーコードで色を拾うことができます。
スポイトアイコン横のまるクリックで簡単コピペも可能です 
さいごに
同じ彩度や明度でサイトのデザインを作ると全体に統一感が出たり
逆に主張できる色を作れたり主張したくない色を作れたり
一気に変えるとサイトの印象がガラッと変わったり…おもしろいです。
デベロッパツールを使うことで、
変化をプレビューしながら新たな発見や楽しさを味わえますのでぜひ 