Renk Kartelası Kodu
Web sitelerinize ekleyebileceğiniz, html ve css ile kodlanmış renk kartelası kodu.
Web Sitenizde Renk Kartelası Oluşturmanın Yolu: Kullanıcı Dostu ve Etkileşimli Renk Seçimleri
Web sitelerinize ekleyebileceğiniz, oldukça basit ve geliştirilebilir, renk kartelası kodu ile sizlerleyiz, Bugün PG Dekorasyon firması için hazırlamış olduğumuz web sitesi için bir kod yazdım ve bu kod sayesinde siteye giriş yapan müşteriler boya yaptırmak istedikleri yer için en ideal rengi seçebilmeleri için bu renk kartelasına göz atabilirler.
Renk, bir web sitesinin tasarımında kritik bir rol oynar. Hem estetik hem de işlevsel açıdan doğru renk seçimi, kullanıcı deneyimini önemli ölçüde etkileyebilir. Bu yazımızda, kullanıcılarınıza renk seçenekleri sunarak, onların ihtiyaçlarına göre özelleştirilmiş bir deneyim oluşturmanızı sağlayacak bir renk kartelası kodu paylaşacağız.
Renk Kartelasının Web Sitesine Katacağı Değer
Renk kartelaları, özellikle e-ticaret siteleri, tasarım blogları veya herhangi bir web tasarım ajansı için oldukça önemli bir bileşendir. Kullanıcıların ürünlerini ve tasarımlarını daha kolay seçebilmesini sağlamak, potansiyel müşteri kitlenizle olan etkileşimi artırabilir. Ayrıca, renk kartelasını entegre etmek, web sitenizin modern ve profesyonel görünmesine katkı sağlar.
Bu yazıda, Blogger gibi popüler içerik yönetim sistemlerinde kullanabileceğiniz, etiket bulutu şeklinde renklerin bulunduğu etkileşimli bir renk kartelası kodunu adım adım sizlerle paylaşacağız.
Etkileşimli Renk Kartelası Kodunun Avantajları
Kullanıcı Dostu: Renklerin üzerine tıklanabilir etiketler ekleyerek, kullanıcıların anında renklerin adı ve hex kodunu öğrenmesini sağlar.
Hızlı Yükleme: Web sitenizde bu kartelayı kullanarak, çok fazla renk eklemeniz gerektiğinde, "Daha Fazla Yükle" seçeneği ile kartelanızı hızlıca güncelleyebilirsiniz.
Estetik: Kullanıcıların ilgi duyduğu renkleri keşfetmesi, web sitenize görsel açıdan değer katacak ve ziyaretçilerin sitenizle daha fazla vakit geçirmesini sağlayacaktır.
Responsive Tasarım: Mobil ve masaüstü uyumludur. Kullanıcılar her cihazda sorunsuz bir deneyim yaşayabilir.
Kodun Kullanımı ve Entegrasyonu
Paylaştığımız renk kartelası, 100’den fazla farklı renk seçeneğini içeriyor. Kullanıcılar, renkleri tıklayarak istediği rengin önizlemesini görebilir, renk adı ve hex kodunu öğrenebilir. Aşağıdaki adımlarla kodu web sitenize entegre edebilirsiniz:
- Kodu Kopyalayın: Makalemizin sonunda verdiğimiz HTML, CSS ve JavaScript kodunu kopyalayın.
- Blogger’a Yapıştırın: Blogger panelinize giriş yapın ve yeni bir yazı oluşturun. “HTML” sekmesine geçin ve kodu buraya yapıştırın.
- Yayımlayın: Kodu yapıştırdıktan sonra yazınızı yayımlayın. Artık kullanıcılar renk kartelasını sitenizde rahatça kullanabilir!
Aşağıda, sitenize ekleyebileceğiniz renk kartelası kodunu bulabilirsiniz. Bu kod, her bir rengi etiketiyle birlikte gösterir ve kullanıcıların rengin hex kodunu anında görmelerini sağlar.
<div style="padding: 20px; text-align: center; background-color: #f4f4f9;">
<h1 style="font-family: Arial, sans-serif; color: #333;">Renk Kartelası</h1>
<!-- Renk Etiket Bulutu -->
<div id="colorCloud" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-top: 20px;">
<!-- 100 adet renk etiketi -->
<span class="color-tag" style="background-color: #FF5733;" onclick="showColorDetails('#FF5733', 'Turuncu')">Turuncu</span>
<span class="color-tag" style="background-color: #33B5FF;" onclick="showColorDetails('#33B5FF', 'Mavi')">Mavi</span>
<span class="color-tag" style="background-color: #28B463;" onclick="showColorDetails('#28B463', 'Yeşil')">Yeşil</span>
<span class="color-tag" style="background-color: #8E44AD;" onclick="showColorDetails('#8E44AD', 'Mor')">Mor</span>
<!-- Diğer renkleri buraya ekleyebilirsiniz -->
</div>
<!-- Yükleme Butonu -->
<button id="loadMore" onclick="loadMoreColors()" style="margin-top: 30px; padding: 10px 20px; font-size: 16px; cursor: pointer;">Daha Fazla Renk Yükle</button>
<!-- Renk Detayları -->
<div id="colorDetails" style="display: none; margin-top: 30px; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
<h3 id="colorTitle" style="color: #333;">Seçilen Renk</h3>
<div id="colorPreview" style="width: 100%; height: 200px; margin: 20px 0;"></div>
<p id="colorHex" style="font-size: 18px; color: #333;"></p>
</div>
</div>
<!-- Stil ve JavaScript -->
<style>
.color-tag {
padding: 12px 20px;
font-size: 16px;
font-weight: bold;
text-transform: capitalize;
color: white;
border-radius: 25px;
cursor: pointer;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.color-tag:hover {
opacity: 0.9;
transform: scale(1.1);
}
</style>
<script>
// Renkleri buraya ekleyin
const colors = [
{ color: '#FF5733', name: 'Turuncu' },
{ color: '#33B5FF', name: 'Mavi' },
{ color: '#28B463', name: 'Yeşil' },
{ color: '#8E44AD', name: 'Mor' },
{ color: '#F4D03F', name: 'Sarı' },
{ color: '#E74C3C', name: 'Kırmızı' },
{ color: '#1ABC9C', name: 'Turkuaz' },
{ color: '#3498DB', name: 'Lacivert' },
{ color: '#E67E22', name: 'Taba' },
{ color: '#9B59B6', name: 'Mor' },
// Daha fazla renk ekleyebilirsiniz
];
let colorIndex = 0;
function loadMoreColors() {
const colorCloud = document.getElementById('colorCloud');
for (let i = 0; i < 20; i++) {
if (colorIndex >= colors.length) break;
const color = colors[colorIndex].color;
const name = colors[colorIndex].name;
const colorTag = document.createElement('span');
colorTag.classList.add('color-tag');
colorTag.style.backgroundColor = color;
colorTag.onclick = function() { showColorDetails(color, name); };
colorTag.innerText = name;
colorCloud.appendChild(colorTag);
colorIndex++;
}
}
function showColorDetails(color, colorName) {
document.getElementById('colorDetails').style.display = 'block';
document.getElementById('colorTitle').innerHTML = 'Seçilen Renk: ' + colorName;
document.getElementById('colorHex').innerHTML = 'Hex Kodu: ' + color;
document.getElementById('colorPreview').style.backgroundColor = color;
}
</script>
Web sitenizde bu renk kartelasını kullanarak, ziyaretçilerinizin renk seçimlerini kolaylaştırabilirsiniz. Sadece birkaç tıklama ile kullanıcılar, istedikleri renkleri keşfedebilir ve detaylarını öğrenebilir.
Bu tür etkileşimli araçlar, sitenizin kullanıcı dostu olmasına katkı sağlar, ziyaretçilerinize değer katarken, aynı zamanda etkileşimi artırarak dönüşüm oranlarını da yükseltebilir.
Makalenin sonunda renk kartelasını nasıl entegre edebileceğinize dair adımları tekrar gözden geçirerek, web sitenizde etkileyici bir renk deneyimi oluşturabilirsiniz!
