こんな感じのやつです。
(20/03/17)縦横切替えができるようになりました！
できあがったもの
操作方法
各レンジと色を変更してお好みの形に調節してください。
変更に応じて.elm{}内のスタイルが連動して書き換わるので、コピーして使ってください。
input type="color"を使用しているので、ChromeかFirefoxで見ていただけると嬉しいです！
感想
破線のスタイルって手書きするの面倒くさいですよね。デザイン無視してborder-style:dottedでシンプルに作ってしまうこともしばしばあります（スミマセン）。
自分で使う用にと最初はSassのmixinで作ろうかとも思ったのですが、せっかくなので勉強中のVue.jsでジェネレータ化してみました。
v-modelを使ってこんな感じの簡単なインターフェースをさくっと作れてしまうのはやはり便利ですね。
カラーコードをRGB形式に変換するのに下記記事を参考にさせていただきました。
どうもありがとうございました。
Vue.jsでカラーコードからRGB値にサクッと変換する方法