Lavish ile Bootstrap renk paleti oluşturma

Renk paleti web tasarım için en önemli öğelerden biridir. Genel renk uyumunu sağlamak göze hoş gelen, etkili bir tasarım için olmazsa olmazlardandır.
Üniversite yıllarımdaki sinema derslerinden hatırladığım bir anekdotla yıllar sonra Bootstrap’a entegre bir şekilde karşılaşmak gerçekten çok ilginç oldu.

Anekdot şöyle:
Diyelim ki 2. Dünya Savaşı’nı anlatan bir film çekiyorsunuz ve sahnelerden birini tasarlamanız gerekiyor.
2. Dünya Savaşı yıllarında çekilmiş bir fotoğrafı Photoshop’ınıza alıyorsunuz. Eyedropper Tool ile fotoğrafın çeşitli yerlerinden renkleri alıyorsunuz.
Ve sahnenizdeki oyuncu kıyafetleri, arkaplandaki binalar gibi objeleri bu renklerle oluşturuyorsunuz.
Böylelikle sahneniz o yılların görünümüne, renk uyumu anlamında kavuşmuş oluyor.

Lavish de işte tam bu durumun Bootstrap’a uyarlanmış hali diyebiliriz.

  • Önce bu adresten siteye giriyoruz.
  • Seçtiğiniz bir imajın url’ini ilk adımdaki bölüme yapıştırıp “Go Lavish” butonuna tıklıyoruz. (Ben örnek olarak bir bahar imajı seçtim)
    lavish-bootstrap-renk-paleti
  • İkinci adımda imajdan çıkan renk değerlerini dilersek değiştirebiliyoruz.
    lavish-bootstrap-renk-paleti-2
  • Son adımdan da dilersek CSS dilersek de LESS kodunu indirebiliyoruz.
    lavish-bootstrap-renk-paleti-3

Gerçekten denemenizi tavsiye ediyorum çünkü gerçekten oldukça başarılı sonuçlar çıkıyor ortaya…