Renk → CSS Değişkenleri

Herhangi bir renkten CSS değişkenleri, tonlar ve token üret.

Temel renk

Ton skalası (50 → 900)

eff0fe

100

e0e0fc

200

c1c2f9

300

a1a3f7

400

8285f4

500

6366f1

600

4f52c1

700

3b3d91

800

282960

900

141430

HEX

#6366F1

RGB

rgb(99, 102, 241)

HSL

hsl(239, 84%, 67%)

Oluşturulan CSS

:root {
  --color-50: #eff0fe;
  --color-100: #e0e0fc;
  --color-200: #c1c2f9;
  --color-300: #a1a3f7;
  --color-400: #8285f4;
  --color-500: #6366f1;
  --color-600: #4f52c1;
  --color-700: #3b3d91;
  --color-800: #282960;
  --color-900: #141430;
  --color: #6366f1;
}

Reklam

Nasıl çalışır

Bir temel renk seçin.
Araç bundan CSS özel özellikleri, açık/koyu tonlar ve token'lar üretir.
Tonların ölçeğini önizleyin.
CSS değişkenlerini stil sayfanıza kopyalayın.

Ne için kullanılır

Bir tasarım sistemi için renk ölçeği oluşturmak.
Bir marka renginden açık ve koyu tonlar üretmek.
Yapıştırmaya hazır CSS özel özellikleri üretmek.

Reklam

Bilmekte fayda var

Tonlar algoritmik olarak üretilir; bir tasarımcı algısal eşitlik için tek tek adımları yine de ince ayarlayabilir.
Renk token'ları üretir; düzen ve boşluk token'ları kapsam dışıdır.

Sıkça sorulan sorular

Tek renkten ne üretir?

Bir stil sayfasına tasarım token'ları olarak eklemeye hazır bir dizi CSS özel özelliği artı açık ve koyu tonlar (bir renk ölçeği).

Tonlar algısal olarak eşit mi?

Tutarlı bir açıklık algoritmasını izlerler ki bu güçlü bir başlangıç noktasıdır; markanız kesin değerler gerektiriyorsa tek tek adımları ince ayarlayın.

Herhangi bir şey yükleniyor mu?

Hayır. Her şey tarayıcınızda yerel olarak üretilir.

Reklam

İlgili araçlar

G-code Görüntüleyici

JSON Biçimlendirici

Markdown Önizleyici

HTML Varlık Kodlayıcı

UUID Oluşturucu