PHP - JS | Renk Paletini Gösterme Ve Renk Değeri

Merhaba arkadaşlar.
Aşağıdaki resimde görülen işlemi php ve javascript ile nasıl yapabilirim.
Veritabanından çekilen değer input içinde listeleniyor ve sağ tarafta ne renk olduğu gözüküyor. Ama ben renk gösteren alanın üstüne tıklayınca renk paletini açmasını ve oradan seçmiş olduğum rengin değerini input içine yazmasını istiyorum.
 


Tablo Yapısı

index.php

<?php include("sistem/ayar.php"); ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery-2.2.3.min.js"></script>
    <meta charset="UTF-8">
    <title>RenkVer</title>
</head>
<body>
    
<div class="main">
<div class="title">Header</div>
<div class="content">

<div class="item">
  <label class="item-label">Header Text Color</label>  
  <div class="item-content">
   <input type="text" class="item-input" name="" value="<?php echo $ayar["color"]; ?>">
  <span class="item-span">
   <i style="background-color:<?php echo $ayar["color"]; ?>;"></i>
  </span>
  </div>
</div>

<div class="item">
  <label class="item-label">Header Background Color</label>  
  <div class="item-content">
   <input type="text" class="item-input" name="" value="<?php echo $ayar["background_color"]; ?>">
  <span class="item-span">
   <i style="background-color:<?php echo $ayar["background_color"]; ?>;"></i>
  </span>
  </div>
</div>

<div class="item">
  <label class="item-label">Header Icon Text Color</label>  
  <div class="item-content">
   <input type="text" class="item-input" name="" value="<?php echo $ayar["icon_color"]; ?>">
  <span class="item-span">
   <i style="background-color:<?php echo $ayar["icon_color"]; ?>;"></i>
  </span>
  </div>
</div>

<div class="item">
  <label class="item-label" style="background-color: #fff"></label>  
  <div class="item-content">
   <button type="submit">Kaydet</button>
  </div>
</div>

 </div>
</div>

</body>
</html>

style.css

.main {
	border: 1px solid #ddd;
	padding: 10px;
	width: 520px;
	margin: 0 auto;
}

.title {
	border: none;
	padding: 7px 10px;
	margin: 0 auto;
	border-radius: 4px 4px 0 0;
	background-color: #a84849;
	color: #fff;
	font-family: verdana;
	font-size: 13px;
}

.content {
	margin-top: 10px;
	background-color: #fff;
	font-family: verdana;
	font-size: 13px;
}

.item {
	border: 1px dashed #eee;
	padding: 5px 0;
}

.item-label {
	margin-top: 5px;
	padding: 5px;
	background-color: #eee;
	width: 176px;
	height: 18px;
	line-height: 18px;
	float: left;
}

.item-content {
	padding: 5px;
	display: inline-block;
	margin-left: 10px;
}

.item-input{
	width: 250px;
	padding: 5px;
	outline: none;
	border-radius: 3px 0 0 3px;
	border: 1px solid #bbb;
	float: left;
	height: 16px;
}

.item-span{
	width: 32px;
	height: 16px;
	background-color: #eee;
	border: 1px solid #bbb;
	border-left: none;
	float:left;
	border-radius: 0 3px 3px 0;
	padding: 5px 0;
	
}

.item-span i{
	width: 16px;
	height: 16px;
	display: block;
	margin-left: 8px;
	border-radius: 3px;
	border: none;
	cursor: pointer;
	
}

Vermiş olduğum kodların çıktısı bu şekilde.

Google'da "jQuery Color İnput" olarak arattığında birden fazla eklenti bulabilirsin. Aşağıdaki eklenti gayet basit görünüyor.

http://jscolor.com/

Ben buradaki paleti kullanmak istiyorum Aşağıdaki şekilde yaptım.

http://www.daviddurman.com/flexi-color-picker/#

<?php include("sistem/ayar.php"); ?>
<!DOCTYPE html>
<html lang="en">
  <head>
   <script type="text/javascript" src="jquery-2.2.3.min.js"></script>
   <script type="text/javascript" src="colorpicker.js"></script>
   <link rel="stylesheet" type="text/css" href="themes.css" />
  </head>
<body>
  <div id="color-picker" class="cp-small"></div>
   <input type="text" id="item-input" name="" value="<?php echo $ayar["color"]; ?>">
   <script type="text/javascript">
	ColorPicker(
	 document.getElementById('color-picker'),
	 function(hex, hsv, rgb) {
	 console.log(hsv.h, hsv.s, hsv.v); // [0-359], [0-1], [0-1]
	 console.log(rgb.r, rgb.g, rgb.b); // [0-255], [0-255], [0-255]
	 document.body.style.backgroundColor = hex; // #HEX
	 document.getElementById('item-input').value = hex; // #HEX
	});
   </script>
  </body>
</html>

- Ben hex değeri yerine rgb değerini almak istersem hangi kısımı değiştirmeliyim?
- Veritabanından çekilen değerin rengini renk paleti üzerindeki konumunu nasıl belirleyebilirim. Yani çekilen değer #3a7baf bu olsun. Renk paletinde seçim noktasının yeri oynatılmamış haldeyken seçim noktasının bu değer üzerinde olmasını nasıl sağlayabiliriz?

İlk sorunun cevabını bilmiyorum. İkinci soru içinde benim gönderdiğim eklenti sayesinde inputun value kısmına renk kodunu yazarak kullanabilirsin. 

jscolor.com

Teşekkür ederim.

Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git