---
title: "Colors"
type: guide
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Frutjam color system built on semantic tokens. WCAG AA/AAA compliant, dark mode aware, CSS custom properties, Tailwind CSS v4 compatible."
url: https://frutjam.com/tr/docs/colors
---

# Color System

 Frutjam, tüm renkler için tasarım belirteçleri olarak CSS özel özelliklerini kullanır. Her renk, temaya göre tanımlanır ve Tailwind CSS yardımcı program sınıflarıyla otomatik olarak çalışır; ekstra yapılandırmaya gerek yoktur. Yalnızca CSS, JavaScript gerekmez. WCAG AA kontrastı her renk çiftinde garanti edilir; Django, HTMX, Laravel, React ve herhangi bir Tailwind CSS v4 projesiyle çalışır.

## Renk İsimleri

Frutjam aşağıdaki anlamsal renk rollerini tanımlar. Her rengin, erişilebilir ön plan metni için eşleşen bir `{color} üzerinde` belirteci vardır.

**WCAG AA Kontrast Garantilidir.** Her `on-{color}` çifti, WCAG AA kontrast gereksinimlerini karşılayacak şekilde OKLCH'de elle ayarlanmıştır. Ön plan renklerini otomatik olarak hesaplayan kitaplıkların aksine, Frutjam size açık ve doğrulanmış çiftler sunar; böylece bileşenlerinize tesadüfen değil, tasarım gereği erişilebilir olur.

| Renk      | Jeton               | Amaç                                  |
| --------- | ------------------- | ------------------------------------- |
| base      | `--color-base`      | Sayfa arka planı                      |
| neutral   | `--color-neutral`   | Yüzeyler, kenar çubukları, kaplamalar |
| primary   | `--color-primary`   | Birincil marka rengi                  |
| secondary | `--color-secondary` | İkincil marka rengi                   |
| accent    | `--color-accent`    | Vurgu / vurgu rengi                   |
| info      | `--color-info`      | Bilgilendirici mesajlar               |
| success   | `--color-success`   | Başarı durumları                      |
| warning   | `--color-warning`   | Uyarı durumları                       |
| error     | `--color-error`     | Hata ve yıkıcı durumlar               |

## Renk Yardımcı Program Sınıfları

Tüm Frutjam renkleri herhangi bir Tailwind CSS renk yardımcı programıyla çalışır. `{color}`'i yukarıdaki tablodaki herhangi bir renk adıyla değiştirin.

| Sınıf                 | Tanım                        |
| --------------------- | ---------------------------- |
| `bg-{color}`          | Arka plan rengi              |
| `text-{color}`        | Metin rengi                  |
| `border-{color}`      | Kenarlık rengi               |
| `ring-{color}`        | Halka rengi                  |
| `outline-{color}`     | Anahat rengi                 |
| `shadow-{color}`      | Gölge rengi                  |
| `fill-{color}`        | SVG dolgu rengi              |
| `stroke-{color}`      | SVG kontur rengi             |
| `decoration-{color}`  | Metin dekorasyon rengi       |
| `caret-{color}`       | Giriş düzeltme işareti rengi |
| `placeholder-{color}` | Yer tutucu metin rengi       |
| `divide-{color}`      | Bölücü kenarlık rengi        |

```html
<div class="bg-primary text-on-primary p-4 rounded">Primary background</div>
<div class="bg-secondary text-on-secondary p-4 rounded">Secondary background</div>
<div class="border border-primary text-primary p-4 rounded">Primary border and text</div>
```

#### Opaklık Değiştirici

Herhangi bir Tailwind renginde olduğu gibi, renk opaklığını `/{value}` değiştiricisiyle kontrol edin.

```html
<div class="bg-primary/10 text-primary p-4 rounded">10% primary background</div>
<div class="bg-primary/20 text-primary p-4 rounded">20% primary background</div>
<div class="text-on-base/60 p-4">60% opacity text</div>
```

## Tema CSS Değişkenleri

Bunlar, özel bir tema oluştururken tanımladığınız kök belirteçlerdir. Diğer tüm renk belirteçleri bunlardan otomatik olarak hesaplanır.

| CSS Değişkeni          | Tanım                                    |
| ---------------------- | ---------------------------------------- |
| `--scheme-color`       | Renk şeması: `açık` veya `koyu`          |
| `--border-radius`      | Bileşenler için taban kenarlık yarıçapı  |
| `--color-base`         | Sayfa arka plan rengi                    |
| `--color-on-base`      | Temel arka planda varsayılan metin rengi |
| `--color-neutral`      | Nötr yüzey rengi                         |
| `--color-on-neutral`   | Nötr yüzeylerde metin rengi              |
| `--color-primary`      | Birincil marka rengi                     |
| `--color-on-primary`   | Birincil arka planlarda metin rengi      |
| `--color-secondary`    | İkincil marka rengi                      |
| `--color-on-secondary` | İkincil arka planlarda metin rengi       |
| `--color-accent`       | Vurgu rengi                              |
| `--color-on-accent`    | Vurgulu arka planlarda metin rengi       |
| `--color-info`         | Bilgi rengi                              |
| `--color-on-info`      | Bilgi arka planlarındaki metin rengi     |
| `--color-success`      | Başarı rengi                             |
| `--color-on-success`   | Başarı arka planlarındaki metin rengi    |
| `--color-warning`      | Uyarı rengi                              |
| `--color-on-warning`   | Uyarı arka planlarındaki metin rengi     |
| `--color-error`        | Hata rengi                               |
| `--color-on-error`     | Hata arka planlarındaki metin rengi      |

## Hesaplanan Renk Belirteçleri

Frutjam bu belirteçleri kök tema değişkenlerinizden otomatik olarak hesaplar; bunları manuel olarak ayarlamazsınız. Özel CSS'de kullanılabilirler.

### Ölçek (50–950)

Her renk, 11 adımlı tam bir renk tonu/gölge ölçeği oluşturur. `{color}`'i herhangi bir renk adıyla değiştirin.

| CSS Değişkeni         | Tanım                                   |
| --------------------- | --------------------------------------- |
| `--color-{color}-50`  | En açık renk tonu (4% renk karışımı)    |
| `--color-{color}-100` | Çok hafif renk tonu                     |
| `--color-{color}-200` | Açık renk tonu                          |
| `--color-{color}-300` | Orta-açık renk tonu                     |
| `--color-{color}-400` | Hafif renk tonu                         |
| `--color-{color}-500` | Temel renk (`--color-{color}` ile aynı) |
| `--color-{color}-600` | Hafif gölge                             |
| `--color-{color}-700` | Orta gölge                              |
| `--color-{color}-800` | Koyu gölge                              |
| `--color-{color}-900` | Çok koyu gölge                          |
| `--color-{color}-950` | En koyu gölge                           |

### Yumuşak ve Aktif

Açık ve koyu temalara otomatik olarak uyum sağlayan, etkileşimli öğeler için durum bilinçli değişkenler.

| CSS Değişkeni             | Tanım                                                                              |
| ------------------------- | ---------------------------------------------------------------------------------- |
| `--color-{color}-soft`    | Yumuşak çeşitler için ince renkli arka plan                                        |
| `--color-on-{color}-soft` | Yumuşak arka planlarda kullanım için metin rengi                                   |
| `--color-{color}-active`  | Fareyle üzerine gelme ve etkin durumlar için koyulaştırılmış/açıklaştırılmış gölge |
| `--color-body`            | Hesaplanan gövde metni rengi (`on-base`'den biraz yumuşatılmıştır)                 |

## Özel Tema Örneği

Özel bir tema oluşturmak için kök belirteçlerini geçersiz kılın. Frutjam tüm ölçekleri ve durumları otomatik olarak hesaplar.

```css
@import "tailwindcss";
@plugin "frutjam";

[data-theme="mytheme"] {
  --scheme-color: light;
  --border-radius: 0.5rem;

  --color-base: oklch(98% 0 0);
  --color-on-base: oklch(15% 0 0);

  --color-neutral: oklch(20% 0 0);
  --color-on-neutral: oklch(98% 0 0);

  --color-primary: oklch(55% 0.25 260);
  --color-on-primary: oklch(98% 0 0);

  --color-secondary: oklch(60% 0.20 320);
  --color-on-secondary: oklch(98% 0 0);

  --color-accent: oklch(65% 0.22 180);
  --color-on-accent: oklch(15% 0 0);

  --color-info: oklch(68% 0.17 237);
  --color-on-info: oklch(15% 0 0);

  --color-success: oklch(75% 0.20 150);
  --color-on-success: oklch(15% 0 0);

  --color-warning: oklch(82% 0.19 90);
  --color-on-warning: oklch(15% 0 0);

  --color-error: oklch(58% 0.24 27);
  --color-on-error: oklch(98% 0 0);
}
```