Yayınlanma tarihi: 11 Aralık 2025
Yani, oluşturmak veya yeniden tasarlamak istediğiniz bir siteniz var. Aklınızda birkaç ana renk olabilir ve bu renklere dayalı bir temayı nasıl hızlı bir şekilde uygulayacağınızı düşünüyor olabilirsiniz.
Ana renginizin yanı sıra işlemler, fareyle üzerine gelme durumları ve hatalar için renkler ve diğer kullanıcı arayüzü ihtiyaçları için renkler de gerekir. Peki açık ve koyu mod seçenekleri? Birden çok fazla renge ihtiyacınız olduğunu fark edebilirsiniz ve bu durum bunaltıcı olabilir.
İyi haber şu ki, sitenizi tanımlayan renk jetonlarına göre bir palet oluşturma ve renk modları arasında geçiş yapma konusunda Baseline özellikleri, işin büyük bir kısmını sizin için yapabilir. Bu tekniklerden bazılarını, kurgusal Baseline Radio sitesindeki renk temalı oynatma listesi olan öne çıkan demoda inceleyebilirsiniz.
İlgili renklerle taban oluşturma
Temanız için birincil renk fikriniz varsa temel renk teorisi ve CSS relative color syntax ile temanızda kullanacağınız renk paletini hızlıca oluşturmaya başlayabilirsiniz.
Ana renginizin, tercih ettiğiniz renk biçiminde tanımlayabileceğiniz bir turkuaz tonu olduğunu varsayalım. Ardından, temel renginize göre yeni renkler oluşturmak için herhangi bir renk işlevini kullanabilirsiniz:
html {
--base-color: oklch(43.7% 0.075 224);
}
--base-color özel özelliği, oklch() renk işlevi kullanılarak oluşturulur. OkLCh, Oklab renk alanının silindirik şeklidir ve üç kanal için değerler tanımlar: L (açıklık), C (renk doygunluğu), H (ton) ve şeffaflığı kontrol etmek için isteğe bağlı bir alfa kanalı.
OkLCh, algısal tekdüzeliği sağlayacak şekilde tasarlandığı için bu tür renk manipülasyonları için iyi bir biçimdir. Örneğin, yalnızca bir rengin tonunu ayarlarsanız ortaya çıkan renk, orijinal renkle benzer bir algılanan parlaklığa ve kromaya sahip olmalıdır. Bu özellik, özellikle beklenmedik kontrast sorunlarını önlemek için kullanışlıdır.
--base-color ile aynı açıklık ve kroma değerlerini koruyarak üçlü bir palet için renk tonunu her iki yönde 120 derece ayarlayabilirsiniz.
html {
/* ... */
--triadic-color-primary: oklch(from var(--base-color) l c calc(h + 120));
--triadic-color-secondary: oklch(from var(--base-color) l c calc(h - 120));
}
Burada gösterildiği gibi, göreceli renk söz dizimi, from anahtar kelimesiyle bir kaynak renge (bu örnekte --base-color) referans veren bir renk işlevi kullanır ve renk alanının ilgili kanallarını, seçilen çıkış rengine göre ayarlar. Bu durumda çıkış rengi de OkLCh olacaktır.
Elde edilen çıktı, --accent-color için koyu pembe, --highlight-color için ise altın rengi bir ton verir. Her ikisi de orijinal --base-color ile aynı parlaklık ve kromaya sahiptir.
html {
/* ... */
--accent-color: var(--triadic-color-primary);
--highlight-color: var(--triadic-color-secondary);
}
html {
/* Input color in the rgb color space*/
--base-color: teal;
/* Output color in oklch. Computes to oklch(0.543123 0.0927099 314.769) */
--triadic-color-primary: oklch(from var(--base-color) l c calc(h + 120));
}
Tamamlayıcı renk, renk tonu açısına 180 derece ekler.
html {
/* ... */
--complement-color: oklch(from var(--base-color) l c calc(h + 180));
--border-highlight: var(--complement-color);
}
Kullanıcı arayüzünüzdeki imleçle üzerine gelme durumu için belirli bir rengin daha açık bir sürümünü kullanmak isteyebilirsiniz. Bu, parlaklık kanalının değerini artırmak anlamına gelir. Etkin bir durum için alfa kanalını ayarlayarak şeffaflık ekleyebilir veya parlaklık kanalının değerini azaltarak koyulaştırabilirsiniz.
html {
/* Darken the --base-color by 15% */
--base-color-darkened: oklch(from var(--base-color) calc(l * 0.85) c h);
/* Assign this color a meaningful variable name */
--action-color: var(--base-color-darkened);
/* Lighten the --action-color by 15% */
--action-color-light: oklch(from var(--action-color) calc(l * 1.15) c h);
/* Darken the --action-color by 10% */
--action-color-dark: oklch(from var(--action-color) calc(l * 0.9) c h);
}
Burada, --action-color değerini --base-color değerinden türetiyor ve düğmeler ile bağlantılar için kullanıyoruz. --action-color, --base-color'den farklı bir renge göreli olarak değiştirilse bile geçerli olacak iki varyanta (daha açık ve daha koyu) sahiptir.--action-color
Kanalları calc() gibi bir matematik işlevini kullanarak ayarlayabilir veya kanalı tamamen yeni bir değerle değiştirebilirsiniz. Değişmeyen kanallar kendi harfleriyle gösterilir (örneğin, değişmeyen parlaklık değeri için l).
color-mix() ile renkleri karıştırma
Diğer renk varyantları için benzer bir yaklaşım izleyebilir ve --base-color özel özelliğinin diğer kanallarını ayarlayabilirsiniz. Dilerseniz color-mix() simgesini kullanarak tasarımınızın diğer kısımlarına ana rengin tonlarını ekleyebilirsiniz.
--border-color, oklab renk alanında enterpolasyonu yapılan temel renk ile adlandırılmış renk grey'nin karışımıdır. Renk enterpolasyon yöntemi olarak kullanıldığında algısal olarak tekdüze sonuçlar verir.
html {
--base-mix-grey-50: color-mix(in oklab, var(--base-color), grey);
--border-color: var(--base-mix-grey-50);
}
Varsayılan olarak bu, her rengin% 50'si olur ancak yüzdelik ağırlığını ayarlayarak renklerden birini daha fazla veya daha az belirgin hale getirebilirsiniz.
html {
--background-mix-base-80: color-mix(in oklab,
var(--background-color) 80%,
var(--base-color));
--surface-light: var(--background-mix-base-80);
}
Bir öğeye daha fazla renk eklemenin alternatifi, göreceli renk söz dizimini kullanarak kroma kanalını ayarlamaktır. Kişi formundaki metin girişlerinin kenarlığı, odaklandığında biraz daha renkli görünüyor.
[data-input*="text"] {
--focus-ring: transparent;
/* ... */
&:focus {
--focus-ring: oklch(from var(--border-color) l calc(c + 0.1) h);
}
}
Açık ve koyu modları etkinleştirme
Çalışacağınız bir renk grubu belirledikten sonra, açık ve koyu modlar için farklı renkler uygulamanın verimli bir yolunu bulmanız gerekir.
color-scheme özelliğiyle açık ve koyu tema desteğini belirtin.
color-scheme özelliğiyle tarayıcıya sitenizin "açık", "koyu" veya her iki modda da görüntülenebileceğini anında bildirebilirsiniz. Bu özellik, tarayıcıya bir öğenin hangi renk şemalarında rahatça oluşturulabileceğini bildirir.
html {
color-scheme: light dark;
}
color-scheme: light dark özelliğini :root sözde öğesinde veya html öğesinde ayarlama:
- Tarayıcıya, sayfanızın açık veya koyu modda görüntülenebileceğini bildirir.
- Tarayıcı kullanıcı arayüzünün varsayılan renklerini, ilgili işletim sistemi ayarıyla eşleşecek şekilde değiştirir.
Kullanıcı aracılarının, sayfanızın açık ve koyu modları desteklediğini daha önce fark etmesini sağlamak için dokümanın <head> bölümüne bir <meta> öğesi ekleyerek renk şeması geçişi desteğini de belirtebilirsiniz.
<head>
<!-- ... -->
<meta name="color-scheme" content="light dark">
</head>
light-dark() işlevini kullanarak "açık" ve "koyu" varyantlarını ayarlayın.
Yazar olarak, bir sayfanın renklerini prefers-color-scheme @media sorgusuyla ayarlamaya alışmış olabilirsiniz.
@media (prefers-color-scheme: light) {
html {
--background-color: oklch(95.5% 0 162);
--text-color: black;
}
}
@media (prefers-color-scheme: dark) {
html {
--background-color: oklch(22.635% 0.01351 291.83);
--text-color: white;
}
}
Bu yöntem, yazar tarafından kontrol edilen renkler ve stiller için çok uygundur ancak önceki bölümde belirtildiği gibi, tarayıcı kullanıcı arayüzünün renklerini güncellemek için yine de color-scheme kullanmanız gerekir.
Sayfanın renklerini prefers-color-scheme sorgusuyla değiştirmek, her mod için renkleri ayrı ayrı tanımlamanız gerektiğinden bazı kodların yinelenmesine de neden olur.
Ancak genel sayfada (veya belirli öğelerde) color-scheme ayarını yaptığınızda light-dark() işlevini kullanarak her mod için renkleri tek bir kod satırında ayarlayabilirsiniz.
İşlev iki renk kabul eder. Birincisi renk düzeni "açık" olarak ayarlandığında, ikincisi ise renk düzeni "koyu" olarak ayarlandığında kullanılır.
html {
color-scheme: light dark;
/* Color custom property values for both light and dark modes */
--base-color: light-dark(oklch(43.7% 0.075 224), oklch(89.2% 0.069 224));
--background-color: light-dark(oklch(95.5% 0 162), oklch(22.635% 0.01351 291.83));
--accent-color: oklch(from var(--base-color) l c calc(h + 120));
--active-color: light-dark(var(--action-color-light), var(--action-color-dark));
/* ... */
}
Diğer tüm özel özelliklerde olduğu gibi, light-dark() renklerinizin ayarları genel olarak veya belirli bileşenlerde ayarlanabilir ve gerektiğinde başka yerlerde kullanılabilir.
/* custom property usage */
body {
background-color: var(--background-color);
/* ... */
}
:any-link {
/* ... */
text-decoration-color: var(--accent-color);
}
Yerleşik tema değiştiriciyle kullanıcılara kontrol olanağı sunma
Kullanıcının varsayılan sistem veya tarayıcı renk tercihlerine uyum sağlayan bir tema kullanmak harika bir özellik olsa da bunu bir adım öteye taşıyarak sitenizin ziyaretçilerine bu varsayılan renk tercihlerini geçersiz kılma olanağı sunabilirsiniz.
<html> öğesindeki data-scheme özelliğini güncelleyen bir tema geçişi oluşturursanız CSS ile color-scheme öğesini değiştirmek için aynı özelliği kullanabilirsiniz.
html {
color-scheme: light dark;
&[data-scheme="light"] {
color-scheme: light;
}
&[data-scheme="dark"] {
color-scheme: dark;
}
&[data-scheme="green"] {
--base-color-light: oklch(48.052% 0.11875 151.945);
--base-color-dark: oklch(92.124% 0.13356 151.558);
color-scheme: light dark;
}
}
data-scheme="light" ve data-scheme="dark", sayfayı yalnızca kendi renk modlarında gösterir. data-scheme="green" her iki modda da görüntülenebilir ve --base-color rengini yeşilin bir tonuna dönüştürür. Diğer renklerin çoğu data-scheme="green" rengine dayandığı için bu, size tamamen yeni bir palet sunar.--base-color
@property ile özel özellikleri kaydetme
Demodaki renkler şu ana kadar standart özel özellikler olarak ayarlandı. Tür kontrolüyle gelen avantajlardan yararlanmak için özellikleri @property kuralıyla da kaydedebilirsiniz.
--base-color, arayüzdeki diğer birçok rengin temeli olarak kullanıldığından her zaman bir renk olduğundan ve yedek değer içerdiğinden emin olmak iyi olabilir.
@property --base-color-light {
syntax: '<color>';
inherits: false;
initial-value: oklch(43.7% 0.075 224);
}
@property --base-color-dark {
syntax: '<color>';
inherits: false;
initial-value: oklch(89.2% 0.069 224);
}
html {
--base-color: light-dark(var(--base-color-light), var(--base-color-dark));
}
Bu sayede, --base-color yanlışlıkla geçersiz bir değerle değiştirilirse her zaman @property kuralıyla ayarlanan initial-value değerine geri döner.
Belirli özellikleri bu şekilde kaydetmek, linear-gradient() içinde renklerin sorunsuz bir şekilde animasyonunu yapmanıza da olanak tanır.
.main-heading {
background: linear-gradient(in oklch 90deg, var(--text-color) 50%, oklch(from var(--base-color) l c var(--header-hue)));
background-clip: text;
color: transparent;
animation: header-hue-switch 5s ease-in-out infinite alternate;
}
.main-heading, background-clip özelliğiyle şeffaf metin üzerinden gösterilen bir linear-gradient() arka planına sahiptir.
Metnin bir bölümünde, göreli renk söz dizimi kullanılarak hue öğesinin 26.67 kanal değerinden 277 kanal değerine animasyon uygulandığı gösteriliyor:
@keyframes header-hue-switch {
from {
--header-hue: 26.67;
}
to {
--header-hue: 277;
}
}
Kayıtlı bir --header-hue özel özelliğiyle, tarayıcı bu özel özelliğin bir sayı olduğunu bildiğinden bu animasyon sorunsuz bir şekilde gerçekleşebilir.
@property --header-hue {
syntax: '<number>';
inherits: false;
initial-value: 100;
}
Kayıtlı olmayan bir özel mülkte tarayıcı, --header-hue öğesinin veri türünü bilmez. Bu nedenle, sayıya geçiş ayrık bir animasyon olur ve durumlar arasında kademeli enterpolasyon olmadan geçiş yapılır.
Özet
Yeni Baseline araçları, ayarlanabilir bir renk paletini hızlıca oluşturmanıza ve renk değişkenleri oluşturma sürecini daha verimli hale getirmenize yardımcı olabilir. Ancak, sonsuz renk seçenekleri ve kombinasyonları arasında seçim yapma konusunda yine kendiniz karar vermeniz gerekecek.
Paletinizi bu şekilde dinamik olarak oluşturmak size esneklik sağlar. Markalama için temel rengi değiştirmeniz gerekirse yalnızca --base-color değerini güncellemeniz yeterlidir. Temanın geri kalanı bu renge göre ayarlanır. Alternatif olarak, müzik çalma özellikleri eklediyseniz temel rengi, o anda çalınan şarkıyla eşleşecek şekilde dinamik olarak değiştirmek isteyebilirsiniz.
Kredi
Tema değiştirici mantığı, Adam Argyle'ın Tema değiştirme bileşeninden alınmıştır.