---
title: "Color Picker"
description: "Renk alanı. Açılınca doygunluk ve parlaklık alanı, ton ve opaklık kaydırıcıları, dört metin formatı, ekrandan renk seçme ve kayıtlı renkler sunar."
---

<Callout type="info" title="Ne zaman kullanılır">
Marka rengi, rozet rengi, widget teması gibi mağaza sahibinin serbestçe renk seçtiği alanlar. `<input type="color">` veya elle yazılan hex alanı yerine bunu kullanın.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/color-picker
```

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın.

## Örnekler

### Form alanında

`Field` içinde, `FieldLabel htmlFor` ile `id` eşleşir. Alan panele doğru büyür. Metin alanı HEX, RGB, HSL ve OKLCH okur; format butonu aralarında geçiş yapar. `onValueChange` her zaman hex döner: opaksa `#RRGGBB`, değilse `#RRGGBBAA`.

**Örnek: Form alanında** (`color-picker/simple`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/color-picker/simple)

```tsx
import * as React from "react"

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { ColorPicker } from "@/components/ikas/color-picker"

export default function ColorPickerSimple() {
  const [color, setColor] = React.useState("#3B6FE0")

  return (
    <Field className="max-w-xs">
      <FieldLabel htmlFor="brand-color">Marka rengi</FieldLabel>
      <ColorPicker id="brand-color" label="Marka rengi" value={color} onValueChange={setColor} />
      <FieldDescription>Butonlarda ve bağlantılarda kullanılır.</FieldDescription>
    </Field>
  )
}
```

### Kayıtlı renkler ve kontrast

`swatches` ile kayıtlı renkler: eklenir, sürükleyerek veya Alt + ok tuşlarıyla sıralanır, silinir. `contrastWith`, rengin üzerinde duracağı zemine göre WCAG kontrast değerini gösterir.

**Örnek: Kayıtlı renkler ve kontrast** (`color-picker/swatches`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/color-picker/swatches)

```tsx
import * as React from "react"

import { Field, FieldLabel } from "@/components/ui/field"
import { ColorPicker } from "@/components/ikas/color-picker"

export default function ColorPickerSwatches() {
  const [color, setColor] = React.useState("#C2410C")
  const [swatches, setSwatches] = React.useState(["#C2410C", "#0F766E", "#7C3AED", "#1F2937"])

  return (
    <div className="grid w-full max-w-sm gap-4">
      <Field>
        <FieldLabel htmlFor="badge-color">Rozet rengi</FieldLabel>
        <ColorPicker
          id="badge-color"
          label="Rozet rengi"
          value={color}
          onValueChange={setColor}
          swatches={swatches}
          onSwatchesChange={setSwatches}
          contrastWith="#FFFFFF"
        />
      </Field>
      <div className="flex items-center gap-3 rounded-xl bg-card p-4 shadow-card">
        <span className="rounded-md px-2 py-0.5 text-xs font-semibold text-white" style={{ background: color }}>
          Yeni
        </span>
        <span className="text-sm">Keten gömlek</span>
      </div>
    </div>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Rengi Field içinde, ne için kullanıldığını anlatan bir FieldLabel ile verin.
- Renk bir zeminin üstünde metin taşıyacaksa contrastWith verin.
- Opaklık anlamsızsa alpha={false} ile kaydırıcıyı kapatın.

**Yapmayın:**

- Kayıtlı renkleri yalnızca bir kez yazıp bırakmayın; kalıcı olacaksa onSwatchesChange ile kaydedin.
- Seçilen rengi kendi formatınıza çevirmeye çalışmayın; değer her zaman hex gelir.

## Erişilebilirlik

- Doygunluk/parlaklık alanı iki boyutlu bir `slider` olarak okunur; ton ve opaklık da birer `slider`'dır.
- Ok tuşları 1, Shift veya Page Up / Page Down 10 adım taşır; Home ve End kaydırıcıyı uçlara götürür.
- Kayıtlı renklerde Delete veya Backspace siler, Alt + ← → sırayı değiştirir.
- Ekrandan renk seçme butonu yalnızca tarayıcı EyeDropper API'sini destekliyorsa görünür.

## API

### `ColorPicker`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `value` | `string` | - | Seçili renk. hex, rgb(), hsl() ve oklch() okur. Kontrolsüz kullanım için boş bırakıp defaultValue verin. |
| `defaultValue` | `string` | `"#3B6FE0"` | Kontrolsüz kullanımda başlangıç rengi. |
| `onValueChange` | `(hex: string) => void` | - | Rengi #RRGGBB, opak değilse #RRGGBBAA olarak verir. |
| `defaultFormat` | `ColorFormat` | `"hex"` | Metin alanının açıldığı format; format butonu diğerleri arasında döner. |
| `alpha` | `boolean` | `true` | Opaklık kaydırıcısını gösterir. Kapalıyken her renk opak kalır. |
| `contrastWith` | `string` | - | Rengin üzerinde duracağı zemin. Verilirse WCAG kontrast değeri görünür. |
| `swatches` | `string[]` | - | Kayıtlı renkler, en yenisi önce. Kontrolsüz kullanım için boş bırakıp defaultSwatches verin. |
| `defaultSwatches` | `string[]` | `[]` | Kontrolsüz kullanımda başlangıçtaki kayıtlı renkler. |
| `onSwatchesChange` | `(swatches: string[]) => void` | - | Bir renk kaydedildiğinde, silindiğinde veya taşındığında çağrılır; sürüklemede renk bırakılınca bir kez. |
| `maxSwatches` | `number` | `7` | En fazla kayıtlı renk sayısı. Aşılınca en eskisi düşer. |
| `label` | `string` | `"Renk"` | Rengin adı; panel başlığında ve erişilebilir adlarda kullanılır. |
| `disabled` | `boolean` | `false` | Alanı devre dışı bırakır. |
| `id` | `string` | - | Tetikleyicinin id'si; FieldLabel htmlFor için. |
| `aria-invalid` | `boolean` | - | Form hatalarında alanı geçersiz işaretler. |
| `align` | `"start" \| "center" \| "end"` | `"start"` | Panelin tetikleyiciye göre hizası. |
| `className` | `string` | - | Tetikleyiciye eklenen sınıflar. |