🎨 Renk Tekerleği

Seçili Renk

RGB

HSL

CMYK

✨ Yeni

🎭 Material Palet

Ana Renk

👁️ WCAG Kontrast

Metin

Arka Plan

Büyük Başlık

Normal metin örneği

Kontrast Oranı

WCAG AA

Normal (4.5:1)

WCAG AAA

Gelişmiş (7:1)

🌊 Tailwind Renk Skalası

Ana Renk

Renk Adı

🌈 Gelişmiş Gradyan

Açı: 135°

🎨 Renk Çevirici

Renk Girin

HEX

RGB

HSL

🖼️ Yeni

🖼️ Görsel Renk Seçici

Görsel Yükle

💡 İpucu: Görseli yükledikten sonra fareyle üzerine gelin ve renk seçmek için tıklayın!

📏 Yazı Ölçeği

Temel Boyut (px)

Ölçek Oranı

✨ Metin Efektleri

Renk 1

Renk 2

ZİRVE

💎 Neumorphism

Arka Plan

Mesafe: 10px

Bulanıklık: 20px

İçeri Basık

💎

🪟 Glassmorphism

Bulanıklık: 10px

Opaklık: 0.15

Renk

Glass Effect

🎨 CSS Filtreler

Blur: 0px

Brightness: 100%

Contrast: 100%

Saturate: 100%

✂️ SVG Oluşturucu (100+ Şekil)

Şekil Seçin

Boyut: 200px

Dolgu

Kontur

Kontur: 2px

📝 Lorem Ipsum

Miktar: 3

🔄 PX ↔ REM

Temel Boyut (px)

Piksel (px)

REM

🔥 Pro

🎯 Tasarım Token Yöneticisi

Token Adı

Token Değeri

♿ Erişilebilirlik Puanı

/ 100

Renk Kontrastı⚪

Font Boyutu⚪

Tıklanabilir Alan⚪

📚 Palet Geçmişi

Mevcut Palet

📱 Canlı Cihaz Önizleme

Boyut: 375 x 667

⚡ Yeni

🎬 Keyframe Editörü

Animasyon Adı

Süre: 1s

Easing

Animasyon Tipi

🎨 Özel İkon Oluşturucu

İkon Tipi

Boyut: 48px

Renk

Kalınlık: 2px

🎨 Pro

🎨 Marka Kimliği Oluşturucu

Marka Adı

Marka Renkleri

Ana Font

Şirket Adı

Marka Kimliği Önizleme

🤖 AI

🤖 AI Font Eşleştirme

Ana Font

🔥 Yeni

📱 Sosyal Medya Widget Oluşturucu

Konum Seçin

Sosyal Medya Linkleri

📱 WhatsApp

📷 Instagram

📘 Facebook

🐦 X (Twitter)

📞 Telefon

✉️ E-posta

💼 LinkedIn

🎥 YouTube

Widget Stili

İkon Boyutu: 50px

İkonlar Arası Boşluk: 10px

👁️ Önizleme & Kod

Canlı Önizleme

📱

Widget önizlemesi burada görünecek

HTML + CSS Kodu

💡 Kullanım Talimatı:

1. Kodu Kopyalayın: Yukarıdaki "📋 Kodu Kopyala" butonuna tıklayın.

2. HTML Dosyanızı Açın: Web sitenizin HTML dosyasını bir metin editöründe açın.

3. Kodu Yapıştırın: Kopyaladığınız kodu </body> etiketinden hemen önce yapıştırın.

4. Kaydedin: Dosyayı kaydedin ve tarayıcınızda açın. Widget seçtiğiniz konumda görünecektir!

📝 Örnek:

  </body> </html>

🔥 Yeni

👨‍💻 Kod Editörü

Kod Tipi

Kodunuzu Buraya Yazın

💡 İpucu: HTML veya SVG kodunuzu sol tarafa yazın, sağ tarafta canlı önizleme görün!

👁️ Canlı Önizleme

Önizleme Modu:

👨‍💻

Kod Önizleme

Sol tarafa kod yazın ve "👁️ Önizle" butonuna tıklayın

Karakter

Satır

👁️ Şablon Önizleme

🎨

Bir şablon seçin

Seçtiğiniz şablon burada önizlenecek

Seçili Şablon: Henüz seçilmedi

Modern Minimalist

Temiz ve modern tasarım

Kurumsal

Profesyonel iş dünyası

Yaratıcı

Canlı ve dinamik

Zarif

Sofistike ve şık

Teknoloji

Futuristik ve yenilikçi

Doğa

Organik ve doğal

Gün Batımı

Sıcak tonlar, romantik

Okyanus

Derin mavi, sakin

Orman

Yeşil tonlar, huzurlu

Lavanta

Mor tonlar, sanatsal

Sonbahar

Toprak tonları, nostaljik

Gece Yarısı

Koyu tonlar, gizemli

Şeker

Pastel pembe, eğlenceli

Nane

Mint yeşili, ferah

Ateş

Turuncu-kırmızı, enerjik

Kraliyet

Derin mor, lüks

Tropik

Turkuaz, egzotik

Çöl

Kum tonları, sıcak

Kiraz

Kiraz kırmızısı, cesur

Gökyüzü

Açık mavi, huzurlu

Üzüm

Mor tonlar, zarif

Limon

Limon yeşili, taze

Gül

Pembe tonlar, romantik

Çelik

Gri-mavi, endüstriyel

Mercan

Mercan rengi, canlı

Zümrüt

Zümrüt yeşili, şık

Kehribar

Altın sarısı, değerli

Erik

Erik moru, sofistike

Deniz Mavisi

Deniz mavisi, dengeli

Bordo

Bordo, lüks ve klasik

Şeftali

Şeftali rengi, yumuşak