shadcn/ui Teması

shadcn/ui için tema yapılandırmaları oluşturun. shadcn/ui Teması aracını kayıt olmadan ücretsiz kullanın; hızlı sonuçlar ve tarayıcıda güvenli işlem.

Base

Background

Foreground

Primary

Primary Foreground

Secondary

Secondary Foreground

Muted & Accent

Muted

Muted Foreground

Accent

Accent Foreground

Destructive

Destructive Foreground

Borders & Input

Border

Input

Ring

Önizleme

Bileşen önizlemesi

Card content

Muted text example

CSS (index.css)

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 4%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 4%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 4%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 45%;
    --accent: 0 0% 96%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 0 0% 9%;
    --radius: 0.5rem;
  }
}

shadcn/ui Teması, renklerle doğrudan tarayıcıda çalışmanıza yardımcı olur.

Araç hızlı ve güvenilir sonuç isteyen tasarımcılar, geliştiriciler ve içerik üreticileri için tasarlanmıştır.

Supported formats

CSS

Tailwind

HSL

shadcn/ui

How it works

Step 1

shadcn/ui Teması aracını açın

Step 2

Renkleri girin veya içe aktarın

Step 3

Sonucu kopyalayın, dışa aktarın veya yeniden kullanın

Kaçınılması gereken yaygın hatalar

Kontrastı kontrol etmemek okunabilirliği azaltabilir.
Çok fazla renk kullanmak paleti uygulamayı zorlaştırabilir.

Profesyonel ipuçları

Ana renkleri CSS değişkenleri olarak saklayın.
Yayınlamadan önce paleti açık ve koyu modda test edin.

Privacy guaranteed: everything is processed locally in your browser.

Mümkün olduğunda işlem tarayıcınızda yerel olarak yapılır. Hesap gerekmez.

Renk projeleriniz için shadcn/ui Teması

shadcn/ui için tema yapılandırmaları oluşturun.

Hassasiyet kaybı olmadan shadcn/ui Teması

Dönüşümler tam değerler (HEX, RGB, HSL, OKLCH) üzerinde çalışır. Görsel yaklaşıklık yok — tasarım amacınıza sadık renk elde edersiniz.