コメントを受けて追記

こんな感じでしょうか？
https://jsfiddle.net/Lhankor_Mhy/yjdtch9n/

html
1<section class="container">
2 <input type="text" name="test" id="test1" value="#000">
3 <input type="text" name="test" id="test2" value="#8BC34AD9">
4 <input type="text" name="test" id="test2" value="red">
5 <input type="text" name="test" id="test2" value="brown">
6 <input type="text" name="test" id="test3" value="white">
7</section>

js
1const container = document.querySelectorAll('.container>input').forEach( el => {
2
3  const pickr = new Pickr({
4    el,
5    useAsButton: true,
6    default: '#42445A',
7    theme: 'classic',
8
9    swatches: [
10      'rgba(244, 67, 54, 1)',
11      'rgba(233, 30, 99, 0.95)',
12      'rgba(156, 39, 176, 0.9)',
13      'rgba(103, 58, 183, 0.85)',
14      'rgba(63, 81, 181, 0.8)',
15      'rgba(33, 150, 243, 0.75)',
16      'rgba(3, 169, 244, 0.7)',
17      'rgba(0, 188, 212, 0.7)',
18      'rgba(0, 150, 136, 0.75)',
19      'rgba(76, 175, 80, 0.8)',
20      'rgba(139, 195, 74, 0.85)',
21      'rgba(205, 220, 57, 0.9)',
22      'rgba(255, 235, 59, 0.95)',
23      'rgba(255, 193, 7, 1)'
24    ],
25
26    components: {
27      preview: true,
28      opacity: true,
29      hue: true,
30
31      interaction: {
32        hex: true,
33        rgba: true,
34        hsva: true,
35        input: true,
36        clear: true,
37        save: true
38      }
39    }
40  }).on('init', pickr => {
41    pickr.setColor(el.value);
42    el.style.backgroundColor = el.value;
43    el.style.color = blackOrWhite( pickr.getColor().toRGBA() );
44    
45  }).on('save', color => {
46    el.value = color.toHEXA().toString(0);
47    el.style.backgroundColor = el.value;
48    el.style.color = blackOrWhite( color.toRGBA() );
49    pickr.hide();
50  });
51
52});
53function blackOrWhite ( [r, g, b] ) {
54// via. https://lab.syncer.jp/Web/JavaScript/Snippet/55/
55	return ( ( ( (r * 299) + (g * 587) + (b * 114) ) / 1000 ) < 128 ) ? "white" : "black" ;
56}

投稿2019/10/10 10:11

編集2019/10/11 08:28

Lhankor_Mhy

総合スコア36074

退会済みユーザー

2019/10/11 01:27

解決しましたありがとうございました！

退会済みユーザー

2019/10/11 04:02

https://jsfiddle.net/Simonwep/wL1zyqcd/ フォームで使用することはできましたが、ひとつのページに複数同じようにフォームを配置させたいのですが https://jsfiddle.net/Simonwep/9ghk71c3/ こちらの方法でフォーム入力での追加は可能なのでしょうか？

Lhankor_Mhy

2019/10/11 04:54

ちょっと試してみました。 https://jsfiddle.net/Lhankor_Mhy/cfaben3s/

退会済みユーザー

2019/10/11 06:40

ありがとうございます！想定通りになりました https://jsfiddle.net/k9rqpmfe/ リンク先のようにひとつずつ配置し、value="<?php echo $txt_datas["backcolor"];?>">のように各Input のvalueとカラーを設置できるようにしたいのですが可能なのでしょうか？

Lhankor_Mhy

2019/10/11 08:17 編集

回答に追記しました。なんとなく、興が乗ったので余計な機能をつけてみました。

退会済みユーザー

2019/10/11 08:37

ご丁寧にありがとうございます！素晴らしいです望んでいたものができましたので大変感謝致します。最後までありがとうございました！

行動規範の内容に同意します