任意のカラーコードを
一番近いパステルカラーのカラーコードに
変換する html ファイルを作成しましたので
皆さんの役に立てばと思い
公開してみます。
オンラインで動作するバージョンはこちら
オンラインで動作するバージョンはこちら(和色バージョン)
ダウンロードはこちら(BOOTH)
ダウンロードはこちら(Google Drive)
和色バージョンのダウンロードはこちら(Google Drive)
このアプリケーションの見た目
この html ファイルのコード
この html ファイルは
下記のコードで動いています。
html ファイルを新規作成して
中身をこの内容にしても動作します。
使用したコード
<html>
<head>
<title>カラーコードを一番近いパステルカラーに変換するサイト | Gifted Style</title>
<meta name="description" content="カラーコードを一番近いパステルカラーに変換するサイトです。"/>
</head>
<body>
このサイトは任意のカラーコードを</br>一番近いパステルカラーのカラーコードに変換するサイトです。</br></br>例えばブルー(#0000ff)を</br>パステルブルー(#7f7fff)に変換します。</br></br>使用したい色を明るめの見やすい色に訂正します。</br></br>イラストレーター等でパレットで色を指定した後に</br>このサイトを使ってパステルカラーに変換する事で</br>明るい見やすい色に補正することができます。</br></br>カラーコードを入力欄に入れる事で</br>一番近いカラーコードが出力欄に出現します。</br></br><a href="https://www.colordic.org/p" target="_blank">このサイト</a> に載っているいずれかのカラーコードに変換します。</br></br>
入力欄</br>
<textarea id="textbox1" rows="1" cols="10"></textarea></br></br>
出力欄(入力欄に一番近いカラーコード)</br>
<textarea id="textbox2" rows="1" cols="10" readonly></textarea></br></br>
<button onclick="Button1()">クリップボードにコピー</button> <button onclick="Button2()">出力された色を確認する</button>
<script>
function Button1() {
const textarea2 = document.getElementById("textbox2");
navigator.clipboard.writeText(textarea2.value);
}
function Button2() {
const textarea2 = document.getElementById("textbox2");
window.open('https://www.colordic.org/search?q=' + textarea2.value.substring(1,7),'_blank');
}
function OnChangeFunction() {
const textarea = document.getElementById("textbox1");
if(0 < textarea.selectionLength) {
return;
}
let read = textarea.value;
if(read.startsWith("#")) {
read = read.substring(1);
}
if(read.length != 6) {
return;
}
try
{
let r = parseInt(read.substring(0, 2), 16);
let g = parseInt(read.substring(2, 4), 16);
let b = parseInt(read.substring(4, 6), 16);
let array = ["#ff7f7f" ,"#ff7fbf" ,"#ff7fff" ,"#bf7fff" ,"#7f7fff" ,"#7fbfff" ,"#7fffff" ,"#7fffbf" ,"#7fff7f" ,"#bfff7f" ,"#ffff7f" ,"#ffbf7f" ,"#ff8484" ,"#ff84c1" ,"#ff84ff" ,"#c184ff" ,"#8484ff" ,"#84c1ff" ,"#84ffff" ,"#84ffc1" ,"#84ff84" ,"#c1ff84" ,"#ffff84" ,"#ffc184" ,"#ff8989" ,"#ff89c4" ,"#ff89ff" ,"#c489ff" ,"#8989ff" ,"#89c4ff" ,"#89ffff" ,"#89ffc4" ,"#89ff89" ,"#c4ff89" ,"#ffff89" ,"#ffc489" ,"#ff8e8e" ,"#ff8ec6" ,"#ff8eff" ,"#c68eff" ,"#8e8eff" ,"#8ec6ff" ,"#8effff" ,"#8effc6" ,"#8eff8e" ,"#c6ff8e" ,"#ffff8e" ,"#ffc68e" ,"#ff9393" ,"#ff93c9" ,"#ff93ff" ,"#c993ff" ,"#9393ff" ,"#93c9ff" ,"#93ffff" ,"#93ffc9" ,"#93ff93" ,"#c9ff93" ,"#ffff93" ,"#ffc993" ,"#ff9999" ,"#ff99cc" ,"#ff99ff" ,"#cc99ff" ,"#9999ff" ,"#99ccff" ,"#99ffff" ,"#99ffcc" ,"#99ff99" ,"#ccff99" ,"#ffff99" ,"#ffcc99" ,"#ff9e9e" ,"#ff9ece" ,"#ff9eff" ,"#ce9eff" ,"#9e9eff" ,"#9eceff" ,"#9effff" ,"#9effce" ,"#9eff9e" ,"#ceff9e" ,"#ffff9e" ,"#ffce9e" ,"#ffa3a3" ,"#ffa3d1" ,"#ffa3ff" ,"#d1a3ff" ,"#a3a3ff" ,"#a3d1ff" ,"#a3ffff" ,"#a3ffd1" ,"#a3ffa3" ,"#d1ffa3" ,"#ffffa3" ,"#ffd1a3" ,"#ffa8a8" ,"#ffa8d3" ,"#ffa8ff" ,"#d3a8ff" ,"#a8a8ff" ,"#a8d3ff" ,"#a8ffff" ,"#a8ffd3" ,"#a8ffa8" ,"#d3ffa8" ,"#ffffa8" ,"#ffd3a8" ,"#ffadad" ,"#ffadd6" ,"#ffadff" ,"#d6adff" ,"#adadff" ,"#add6ff" ,"#adffff" ,"#adffd6" ,"#adffad" ,"#d6ffad" ,"#ffffad" ,"#ffd6ad" ,"#ffb2b2" ,"#ffb2d8" ,"#ffb2ff" ,"#d8b2ff" ,"#b2b2ff" ,"#b2d8ff" ,"#b2ffff" ,"#b2ffd8" ,"#b2ffb2" ,"#d8ffb2" ,"#ffffb2" ,"#ffd8b2" ,"#ffb7b7" ,"#ffb7db" ,"#ffb7ff" ,"#dbb7ff" ,"#b7b7ff" ,"#b7dbff" ,"#b7ffff" ,"#b7ffdb" ,"#b7ffb7" ,"#dbffb7" ,"#ffffb7" ,"#ffdbb7" ,"#ffbcbc" ,"#ffbcdd" ,"#ffbcff" ,"#ddbcff" ,"#bcbcff" ,"#bcddff" ,"#bcffff" ,"#bcffdd" ,"#bcffbc" ,"#ddffbc" ,"#ffffbc" ,"#ffddbc" ,"#ffc1c1" ,"#ffc1e0" ,"#ffc1ff" ,"#e0c1ff" ,"#c1c1ff" ,"#c1e0ff" ,"#c1ffff" ,"#c1ffe0" ,"#c1ffc1" ,"#e0ffc1" ,"#ffffc1" ,"#ffe0c1" ,"#ffc6c6" ,"#ffc6e2" ,"#ffc6ff" ,"#e2c6ff" ,"#c6c6ff" ,"#c6e2ff" ,"#c6ffff" ,"#c6ffe2" ,"#c6ffc6" ,"#e2ffc6" ,"#ffffc6" ,"#ffe2c6" ,"#ffcccc" ,"#ffcce5" ,"#ffccff" ,"#e5ccff" ,"#ccccff" ,"#cce5ff" ,"#ccffff" ,"#ccffe5" ,"#ccffcc" ,"#e5ffcc" ,"#ffffcc" ,"#ffe5cc" ,"#ffd1d1" ,"#ffd1e8" ,"#ffd1ff" ,"#e8d1ff" ,"#d1d1ff" ,"#d1e8ff" ,"#d1ffff" ,"#d1ffe8" ,"#d1ffd1" ,"#e8ffd1" ,"#ffffd1" ,"#ffe8d1" ,"#ffd6d6" ,"#ffd6ea" ,"#ffd6ff" ,"#ead6ff" ,"#d6d6ff" ,"#d6eaff" ,"#d6ffff" ,"#d6ffea" ,"#d6ffd6" ,"#eaffd6" ,"#ffffd6" ,"#ffead6" ,"#ffdbdb" ,"#ffdbed" ,"#ffdbff" ,"#eddbff" ,"#dbdbff" ,"#dbedff" ,"#dbffff" ,"#dbffed" ,"#dbffdb" ,"#edffdb" ,"#ffffdb" ,"#ffeddb" ,"#ffe0e0" ,"#ffe0ef" ,"#ffe0ff" ,"#efe0ff" ,"#e0e0ff" ,"#e0efff" ,"#e0ffff" ,"#e0ffef" ,"#e0ffe0" ,"#efffe0" ,"#ffffe0" ,"#ffefe0" ,"#ffe5e5" ,"#ffe5f2" ,"#ffe5ff" ,"#f2e5ff" ,"#e5e5ff" ,"#e5f2ff" ,"#e5ffff" ,"#e5fff2" ,"#e5ffe5" ,"#f2ffe5" ,"#ffffe5" ,"#fff2e5" ,"#ffeaea" ,"#ffeaf4" ,"#ffeaff" ,"#f4eaff" ,"#eaeaff" ,"#eaf4ff" ,"#eaffff" ,"#eafff4" ,"#eaffea" ,"#f4ffea" ,"#ffffea" ,"#fff4ea" ,"#ffefef" ,"#ffeff7" ,"#ffefff" ,"#f7efff" ,"#efefff" ,"#eff7ff" ,"#efffff" ,"#effff7" ,"#efffef" ,"#f7ffef" ,"#ffffef" ,"#fff7ef" ,"#fff4f4" ,"#fff4f9" ,"#fff4ff" ,"#f9f4ff" ,"#f4f4ff" ,"#f4f9ff" ,"#f4ffff" ,"#f4fff9" ,"#f4fff4" ,"#f9fff4" ,"#fffff4" ,"#fff9f4" ,"#fff9f9" ,"#fff9fc" ,"#fff9ff" ,"#fcf9ff" ,"#f9f9ff" ,"#f9fcff" ,"#f9ffff" ,"#f9fffc" ,"#f9fff9" ,"#fcfff9" ,"#fffff9" ,"#fffcf9"];
let result = "";
let point = 1000000;
array.forEach(function(one){
let r2 = parseInt(one.substring(1, 3), 16);
let g2 = parseInt(one.substring(3, 5), 16);
let b2 = parseInt(one.substring(5, 7), 16);
if(Math.abs(r - r2) + Math.abs(g - g2) + Math.abs(b - b2) < point) {
point = Math.abs(r - r2) + Math.abs(g - g2) + Math.abs(b - b2);
result = one;
}
});
const textarea2 = document.getElementById("textbox2");
textarea2.value = result;
}
catch
{
}
}
const textarea = document.getElementById("textbox1");
textarea.addEventListener("keyup", (e) => {
OnChangeFunction();
});
textarea.addEventListener("change", (e) => {
OnChangeFunction();
});
OnChangeFunction();
</script>
</body>
</html>
以上カラーコードを変換する
html ファイルを公開しました。
Unity やイラストレーターのパレットで
色を選択した場合は
少し濃すぎるなどピンとこない場合が
あると思います。
そういった場合は
この html ファイルを
是非活用頂けると嬉しいです。
皆さんの開発の助けになれますように
閲覧ありがとうございました。
追記
コメント欄を見て
後で自分でも調べて知ったのですが
パステルカラーの種類を
私が勘違いしていたようです。
パステルカラーは
このサイト の種類しかないと
勘違いしていました。
私の html は
このサイト のいずれかに
するものだという認識でお願いします。
コメント欄に
本来のパステルカラーに変換してくれる作品を
提示頂いたため
是非そちらもチェック頂けると幸いです。