Renk Paleti

Bir ana renk seç, uyum kurallarına göre palet üret ve istediğin biçimde kopyala.

primary

secondary

accent

surface

ink

Palet üretimi

Renk çarkında yan yana duran tonlar. Sakin ve uyumlu; doğal görünümlü arayüzler için ideal.

veya Boşluk tuşuna bas

Renk kodu biçimi

#6366F1
#818CF8
#A5B4FC
#312E81
#0F172A

CSS değişkenleri

:root {
  --primary: #6366F1;
  --secondary: #818CF8;
  --accent: #A5B4FC;
  --surface: #312E81;
  --ink: #0F172A;
}

Tailwind yapılandırması

// tailwind.config.ts
colors: {
  'primary': '#6366F1',
  'secondary': '#818CF8',
  'accent': '#A5B4FC',
  'surface': '#312E81',
  'ink': '#0F172A',
}

Arayüzde nasıl durur?

Ürün AdıMenü · Hakkında · İletişim

Bu palet gerçek bir arayüzde böyle görünür

Renkleri soyut şeritler halinde değil, gerçek bir düzende görmek seçim yapmayı kolaylaştırır. Metnin okunabilirliğini kontrol et.

Birincil butonİkincil butonÇerçeveli

Hazır paletler

Bir rengin kilidini açık bırakırsan yeni palet üretildiğinde o renk korunur — beğendiğin tonu sabitleyip gerisini deneyebilirsin. Renklerinin metin olarak okunabilir olup olmadığını Renk Kontrast Denetleyici ile kontrol edebilirsiniz.

Bu araç işine yaradı mı?

Favorilerine ekle ya da ihtiyacı olan birine gönder.