ITエンジニア/デザイナ向けにオープンソースを毎日紹介

デザインで色を選択する際、関連し合う色を選ぶことで全体のバランスを崩さずに済みます。しかし一つ一つの色を選んでいると時間がかかってしまうでしょう。ある程度自動的に選択してくれると便利です。

今回はそんな関連した色を選択するのに便利なSorted CSS Colorsを紹介します。

Sorted CSS Colorsの使い方

上にあるスライダーを動かすと、色が特定されます。そして、それに関連した色が自動的に提案されます。

スライダー次第で階層が増減します。

細かい時にはこれくらい増えます。

グレースケールもあります。

そして色を選ぶとRGBなどの情報が確認できます。

Sorted CSS Colorsはカラーリングの輝度と彩度に分かれて表示されます。色は名前があるものだけに限られるようです。一つの色が決まったら、関連する色合いが手早く選べて便利です。

Sorted CSS ColorsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Sorted CSS Colors

scriptype/sorted-colors: A tool to sort the named CSS colors in a way that it shows related colors together

 

MOONGIFTの関連記事

  • DevRel
  • Com2