Selamlar arkadaşlar, bugün sizlerle web projelerinizde kullanabileceğiniz oldukça sade ve şık bir Rastgele Renk Üretici uygulamasını paylaşmak istiyorum.

Bu çalışma, tek bir buton tıklamasıyla sayfanın arka plan rengini rastgele değiştirmenize ve üretilen rengin HEX kodunu ekranda görmenize olanak tanıyor. Tasarım aşamasında hızlıca renk fikirleri edinmek isteyenler için oldukça pratik bir araç.

HTML Yapısı:

Kod:

<div class="color">

Kod:

     <span id="hex">#333333</span>
     <button onclick="getNewColor()">Yeni Renk Getir</button>
 </div>

 <!-- Sosyal Medya Linkleri -->
 <div class="youtube">
     <a class="watch" href="" target="blank_">
         <span>Seyret</span>
     </a>
     <a class="me" href="https://www.youtube.com/channel/UC-66vmW776afaHILFSHnVMA?sub_confirmation=1" target="blank_">
         <span>ABONE OL</span>
     </a>
 </div>

CSS Tasarımı:

Kod:

@import url('https://fonts.googleapis.com/css?family=Montserrat');

Kod:

 * {
     padding: 0;
     margin: 0;
 }

 body {
     background: #333;
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .color {
     font-family: 'Montserrat', sans-serif;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-flow: column nowrap;
     padding: 20px;
 }

 #hex {
     color: white;
     font-size: 40px;
     text-transform: uppercase;
     margin-bottom: 10px;
 }

 .color button {
     background: none;
     outline: none;
     color: white;
     border: 2px solid white;
     cursor: pointer;
     font-size: 20px;
     padding: 10px;
     transition: all .2s linear;
 }

 .color button:hover {
     background: white;
     color: #333;
 }

JavaScript Fonksiyonu:

Kod:

function getNewColor() {

Kod:

     var symbols = '0123456789ABCDEF';
     var color   = '#';

     for (let i=0 ; i<6 ; i++) {
         color = color + symbols[Math.floor(Math.random() * 16)];
     }

     document.body.style.background = color;
     document.getElementById('hex').innerHTML = color;

 }

Kodlar oldukça basit ve geliştirilmeye müsaittir. Kendi projelerinize göre renk geçiş efektleri veya kopyalama özellikleri ekleyerek daha da işlevsel hale getirebilirsiniz.