Color Picker & Converter

Renk Seçici ve Dönüştürücü

Görsel olarak seçin veya herhangi bir değer yapıştırın — HEX, RGB, HSL, OKLCH ve OKLAB senkronize kalır. WCAG 2.2 kontrast denetleyicisi ve OKLCH tabanlı palet üreteci içerir. Tamamen tarayıcınızda çalışır.

Renk Seçici ve Dönüştürücü — TL;DR

Görsel olarak seçin veya herhangi bir değer yapıştırın — HEX, RGB, HSL, OKLCH ve OKLAB senkronize kalır. WCAG 2.2 kontrast denetleyicisi ve OKLCH tabanlı palet üreteci içerir. Tamamen tarayıcınızda çalışır.

Hex değerinizi (örn. #ff5722) HEX alanına yapıştırın — RGB satırı anında güncellenir. Aynı şekilde rgb(255 87 34) değerini RGB alanına yapıştırın; HEX, HSL, OKLCH ve OKLAB hepsi senkronize olur. Dönüşüm desteklenen her format arasında çift yönlüdür.

OKLCH, algısal parlaklık (L), kroma (C) ve ton (h) kullanan bir CSS Color Module Level 4 renk uzayıdır — HSL gibi ama algısal olarak tek tip. Aynı L değerine sahip iki OKLCH rengi, farklı tonlarda bile eşit derecede parlak görünür. Bu, tasarım jetonlarını, üretilen paletleri ve erişilebilir renk rampalarını HSL'ye göre çok daha öngörülebilir kılar. Tüm güncel tarayıcılar (Chrome 111+, Safari 15.4+, Firefox 113+) destekler.

Renk değerleri cihazınızdan asla ayrılmaz. DevTools → Network'ü açın; dönüşüm, seçim, palet üretimi veya kontrast kontrolü sırasında sıfır giden istek göreceksiniz.

HEX
RGB
HSL
OKLCH
OKLAB
İsimli

Palet

WCAG 2.2 kontrastı

Metin
Arka plan
—
Önizleme
Büyük başlık örneği
Gövde metni örneği — pijamalı hasta yağız şoföre çabucak güvendi.

Gerçek iş akışları için tasarlandı

Tasarım sistemlerinden erişilebilirlik denetimlerine — ihtiyacınız olan her format ve kontrol tek bir yerde.

Altı renk uzayı

HEX (3 / 4 / 6 / 8 hane), RGB(A), HSL(A), OKLCH, OKLAB ve CSS isimli renkler arasında ileri-geri dönüşüm. Çıktı dizeleri CSS Color Module Level 4 söz dizimine uyar — doğrudan stil sayfalarınıza yapıştırın.

WCAG 2.2 kontrast denetleyicisi

Herhangi iki renk arasındaki kontrast oranını, normal ve büyük metin boyutlarında AA (4.5 : 1) ve AAA (7 : 1) için tek tıkla geçer/kalır rozetleriyle görün. Hesaplama W3C referansına uyar: sRGB doğrusallaştırma, göreli parlaklık, ardından (L1+0,05)/(L2+0,05).

EyeDropper — herhangi bir pikseli örnekle

Damlalığa tıklayarak ekranınızdaki herhangi bir rengi örnekleyin — tasarımlar, ekran görüntüleri, fotoğraflar, hatta diğer tarayıcı sekmeleri. Chromium tabanlı tarayıcılarda yerel EyeDropper API'sini kullanır.

OKLCH tabanlı palet

9 adımlı açık ve koyu tonlar ile tamamlayıcı, üçlü ve analog harmoniler oluşturun — OKLCH'de türetildiği için her adım algısal olarak eşit aralıklı (parlaklığın çılgınca değiştiği HSL'nin aksine).

Tasarımdan gelen gizlilik

Her dönüşüm cihazınızda JavaScript olarak çalışır. Hiçbir şey yüklenmez, kaydedilmez veya üçüncü bir tarafa gönderilmez — kendiniz doğrulamak isterseniz DevTools → Network'ü açın.

Hız için inşa edildi

Saf JavaScript, framework çalışma zamanı yok. İlk yükleme gzip'li 50 KB'ın altında; dönüşümler ve palet üretimi beş yıllık bir dizüstü bilgisayarda bir milisaniyenin altında tamamlanır.

Renk seçici nasıl kullanılır

Başlamak için dört yol, senkron her format.

  1. 1

    Görsel olarak seçin

    Tonu seçmek için doygunluk/değer karesinin içine sürükleyin, temel rengi değiştirmek için aşağıdaki ton çubuğunu kaydırın ve saydamlık için alfa kaydırıcısını kullanın. Sağdaki her format anında güncellenir.

  2. 2

    Herhangi bir değeri yapıştırın

    Eşleşen girdiye bir HEX (#4f46e5), RGB (rgb(79 70 229)), HSL (hsl(244 76% 59%)), OKLCH (oklch(53% 0.22 277)) veya hatta bir CSS isimli renk (tomato) yapıştırın — seçici ve diğer formatların tümü senkronize olur.

  3. 3

    Damlalıkla örnekleyin

    Ekranınızdaki herhangi bir pikseli yakalamak için damlalık düğmesine tıklayın — başka bir sekme, bir ekran görüntüsü, bir fotoğraf, bir simge. Chrome, Edge ve Opera'da yerel EyeDropper API'sini kullanır.

  4. 4

    Kopyalayın veya kontrastı kontrol edin

    Herhangi bir formatın yanındaki kopyalama simgesine tıklayarak panonuza alın. Veya ön plan / arka plan kombinasyonunuzun normal ve büyük metin boyutlarında AA veya AAA'dan geçip geçmediğini kontrol etmek için WCAG 2.2 kontrast bölümüne kaydırın.

Tasarımcılar, geliştiriciler ve erişilebilirlik denetçileri için inşa edildi

Dört yaygın iş akışına uyan bir renk aracı.

Tasarım sistemi token oluşturma

Marka HEX değerlerini OKLCH'ye dönüştürün, böylece token rampanızdaki her tonun aynı algısal parlaklık adımı olur. OKLCH çıktısını doğrudan CSS'inize yapıştırın — ön işlemciye gerek yok.

WCAG erişilebilirlik denetimleri

Ön plan / arka plan çiftlerini bırakın ve kontrast oranını ile AA / AAA rozetlerini okuyun. Yayınlanmadan önce başarısız kombinasyonları yakalayın — W3C'nin zorunlu kıldığı 4.5 : 1 normal / 7 : 1 gelişmiş eşiklerini karşılar.

Front-end CSS dönüşümü

Bir tasarımcı maketinden HEX'iniz var ama Tailwind yapılandırması için bir HSL veya modern bir stil sayfası için bir OKLCH mi gerekiyor? Bir kez yapıştırın, herhangi bir formatta kopyalayın. Çıktı dizeleri geçerli CSS Color Module Level 4 söz dizimidir.

Palet keşfi

Bir temel renk seçin ve algısal olarak aralıklı dokuz açık ve koyu ton ile tamamlayıcı, üçlü ve analog harmonileri anında görün — OKLCH'de üretildiği için her adım eşit derecede parlak görünür.

%100 özel — tarayıcınızda çalışır

Renk değerleri cihazınızdan asla ayrılmaz. DevTools → Network'ü açın; dönüşüm, seçim, palet üretimi veya kontrast kontrolü sırasında sıfır giden istek göreceksiniz.

  • Her dönüşüm (HEX ↔ RGB ↔ HSL ↔ OKLCH ↔ OKLAB) makinenizde JavaScript olarak çalışır — formüller sayfa kaynağında görünür.
  • EyeDropper API yalnızca açıkça tıkladığınız renkleri döndürür; izinleri tarayıcı yönetir ve sayfanın rastgele pikselleri görmesine asla izin vermez.
  • Giriş yok, renk değerlerinde telemetri yok, üçüncü taraf renk API'si yok. Site kutudan çıkar çıkmaz GDPR uyumludur.

İlgili rehberler

Tasarımcılar, geliştiriciler ve erişilebilirlik ekipleri için özenle seçilmiş eğitimler.

Sıkça sorulanlar

HEX'i RGB'ye nasıl dönüştürürüm?

Hex değerinizi (örn. #ff5722) HEX alanına yapıştırın — RGB satırı anında güncellenir. Aynı şekilde rgb(255 87 34) değerini RGB alanına yapıştırın; HEX, HSL, OKLCH ve OKLAB hepsi senkronize olur. Dönüşüm desteklenen her format arasında çift yönlüdür.

OKLCH nedir ve neden kullanmalıyım?

OKLCH, algısal parlaklık (L), kroma (C) ve ton (h) kullanan bir CSS Color Module Level 4 renk uzayıdır — HSL gibi ama algısal olarak tek tip. Aynı L değerine sahip iki OKLCH rengi, farklı tonlarda bile eşit derecede parlak görünür. Bu, tasarım jetonlarını, üretilen paletleri ve erişilebilir renk rampalarını HSL'ye göre çok daha öngörülebilir kılar. Tüm güncel tarayıcılar (Chrome 111+, Safari 15.4+, Firefox 113+) destekler.

WCAG kontrast sonucu güvenilir mi?

Evet. WCAG 2.2 §1.4.3'teki algoritmayı kullanıyoruz: her sRGB kanalını doğrusallaştırın, göreli parlaklığı hesaplayın (0,2126·R + 0,7152·G + 0,0722·B), ardından (L_açık + 0,05) / (L_koyu + 0,05). AA, normal metin için 4.5 : 1 ve büyük metin için 3 : 1'de geçer (18 pt+ veya 14 pt+ kalın). AAA sırasıyla 7 : 1 ve 4.5 : 1'de geçer.

Görsellerden veya diğer uygulamalardan renk örnekleyebilir miyim?

Evet — tarayıcının yerleşik EyeDropper API'sini başlatmak için Damlalık düğmesine tıklayın. Ekranın herhangi bir yerindeki herhangi bir pikseli örnekleyebilirsiniz: başka bir tarayıcı sekmesi, bir Figma tasarımı, bir video karesi, hatta bir ekran görüntüsü. Şu anda Chrome, Edge ve Opera'da destekleniyor; Firefox ve Safari sorunsuz şekilde geri çekilir (düğme devre dışı kalır).

Sunucunuza herhangi bir şey gönderiliyor mu?

Hayır. Seçici, her dönüşüm, palet üreteci ve kontrast denetleyici tamamen tarayıcınızda çalışır. Hiçbir renk değeri, görüntü örneği veya metin asla iletilmez. DevTools → Network'ü açıp kullanım sırasında sıfır giden istek olduğunu doğrulayabilirsiniz.