Renk Dönüştürücü — HEX, RGB, HSL & OKLCH

Renk Dönüştürücü Nedir?

// sRGB → linear → XYZ D65 → OKLAB → OKLCH
// References: W3C CSS Color 4 §11-15, Ottosson 2020 (https://bottosson.github.io/posts/oklab/)
// Worked example: #3b82f6 (Tailwind blue-500)

const srgb = [0x3b, 0x82, 0xf6].map(v => v / 255); // [0.231, 0.510, 0.965]

const toLinear = (v) => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
const lin = srgb.map(toLinear); // gamma-decoded linear-sRGB

// linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
const [lr, lg, lb] = lin;
const x = 0.4124564 * lr + 0.3575761 * lg + 0.1804375 * lb;
const y = 0.2126729 * lr + 0.7151522 * lg + 0.0721750 * lb;
const z = 0.0193339 * lr + 0.1191920 * lg + 0.9503041 * lb;

// XYZ D65 → LMS (Ottosson 2020 matrix), cube-root, → OKLAB
const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z);
const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;

// OKLAB → OKLCH (Cartesian to polar)
const C = Math.sqrt(a * a + b * b);
const H = (Math.atan2(b, a) * 180 / Math.PI + 360) % 360;
console.log(`oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`);
// → oklch(0.629 0.193 263.4)

Temel Özellikler

Renk Dönüştürücü Alternatifleri Karşılaştırması

Renk Dönüşüm Örnekleri

#3b82f6

#FF5733

#FF6347

oklch(0.7 0.25 30)

#767676

#FF6347

hsl(220 70% 50%)

#3b82f6

Renk Dönüştürücü Nasıl Kullanılır

1. 1

   Herhangi bir biçimde herhangi bir renk yapıştırın veya yazın

   9 biçim alanının her biri (HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH, OKLAB, Adlandırılmış) doğrudan düzenlenebilir — tıklanacak bir "Dönüştür" düğmesi yoktur. Figma'dan bir hex yapıştırın, bir Tailwind yapılandırmasından bir `oklch()` değeri yazın, eski bir stil sayfasından bir `hsl()` bırakın veya hatta `tomato` gibi bir CSS adlandırılmış rengi yazın. Araç, siz yazarken artımlı olarak ayrıştırır, böylece yarı yazılmış bir değer, geçerli bir biçim göndermeden diğerlerini bozmaz. Geçersiz girdi sessiz bir satır içi hata alır; geçerli girdi tüm ızgarayı günceller.

2. 2

   9 biçim hepsi anında güncellenir

   Dahili kaynak-doğru OKLCH'dir (algısal olarak tek tip, renk gamı sınırsız) ve diğer her biçim her tuş vuruşunda ondan türetilir. Şu anda yazdığınız alan imleç konumunu el değmemiş şekilde korur — yalnızca *diğer* sekiz alan yeniden işlenir. Bu, OKLCH'nin L kanalını doğrudan düzenleyebileceğiniz ve hex, RGB, HSL ve CMYK'nın imlecinizi kaybetmeden gerçek zamanlı olarak kaydığını izleyebileceğiniz anlamına gelir. Dönüşüm matematiği, modern tarayıcılarda gönderilen aynı OKLAB ilkellerini kullanarak tamamen JavaScript'te çalışır.

3. 3

   Görsel keşif için seçiciyi kullanın

   Biçim ızgarasının altında bir doygunluk-açıklık karesi (geçerli renk tonu için S+L'yi ayarlamak üzere herhangi bir yere sürükleyin), bir renk tonu kaydırıcısı (renk tekerleği etrafında dönmek için sürükleyin) ve bir alpha kaydırıcısı (şeffaflığı ayarlamak için sürükleyin) bulunur. Chromium tabanlı tarayıcılarda (Chrome, Edge, Brave), **Damlalık** düğmesi yerel `EyeDropper` API'sini etkinleştirir — bu pikselin rengini örneklemek için tarayıcı penceresinin dışı dahil ekranın herhangi bir yerine tıklayın. Safari ve Firefox API'yi henüz göndermez, bu yüzden düğme bu tarayıcılarda gizlenir ve SL karesi + renk tonu kaydırıcısı birincil seçici olarak kalır.

4. 4

   Renk gamını ve kontrastı bir bakışta kontrol edin

   Üç renk gamı rozeti (**sRGB**, **Display P3**, **Rec.2020**), geçerli rengin her uzayın yeniden üretilebilir aralığının içine düşüp düşmediğini gösterir — OKLCH'de çalışırken ve hangi ekranların değeri doğru şekilde işleyeceğini bilmek istediğinizde kullanışlıdır. Kontrast satırı, hem beyaza hem de siyaha karşı WCAG 2.1 oranını ve ayrıca APCA Lc puanını (ileriye dönük WCAG 3 metriği) gösterir. Geçti / kaldı rozetleri (AA, AAA) satır içi görünür. Bir renk sRGB renk gamı dışındaysa, bir **sRGB'ye Hizala** düğmesi sığana kadar chroma'yı küçültür.

5. 5

   Platformunuzun yerel sözdiziminde kopyalayın

   9 biçim alanının her birinin kendi **Kopyala** düğmesi vardır — tek tıkla değer panonuza iner, etiket kısaca "Kopyalandı!" olarak değişir, böylece bilirsiniz. Seçicinin altındaki **Kod olarak kopyala** bölümü beş platform için yapıştırmaya hazır parçacıklar üretir: CSS özel özelliği, Tailwind v4 `@theme` belirteci, SwiftUI `Color(red:green:blue:)` literal'i, Jetpack Compose `Color(0xFF...)` sabiti ve Flutter `Color(0xFF...)`. URL hash'i (`#hex=...` veya `#oklch=...`) de güncellenir, böylece tam renge canlı bir bağlantı paylaşabilirsiniz.

Yaygın Renk Dönüşüm Hataları

Bir HSL paletinin algısal olarak tek tip olduğunu varsayın:
hsl(220 50% 30%) → hsl(220 50% 60%) → hsl(220 50% 90%)
Ekranda bunlar eşit olmayan aralıklı görünür.

Algısal olarak tek tip rampalar için OKLCH kullanın:
oklch(0.30 0.10 220) → oklch(0.60 0.10 220) → oklch(0.90 0.10 220)
Ekranda bunlar eşit aralıklı görünür.

CMYK çıktımızı doğrudan bir baskı makinesine gönderin:
hex #FF6347 → cmyk(0%, 61%, 72%, 0%)
Basılı sonuç çamurlu veya aşırı doygun görünebilir.

Orijinal hex'i baskı sağlayıcısına gönderin:
hex #FF6347 → matbaanın baskı makinelerine karşı ICC dönüştürmesine izin verin
Basılı sonuç ekran rengine çok daha yakın eşleşir.

Lc 60 = WCAG 4.5:1 sanın:
APCA Lc 60 → "bu AA'yı geçer"
Aynı çift için WCAG 2 oranı 3.8:1 olabilir (AA'da kaldı).

Her iki metriği bağımsız olarak kontrol edin:
AA gövde metni uyumluluğu için WCAG 2 oranı ≥ 4.5:1, VE
Gerçek dünya okunabilirliği için APCA |Lc| ≥ 75.
İkisi de geçmeli, biri diğerinin yerine geçmemeli.

Tonlar için HSL L'yi adımlayın:
hsl(220 50% 30%) / hsl(220 50% 60%) / hsl(220 50% 90%)
%90 yıkanmış görünür; %30, 60'a olan boşluktan çok daha koyu görünür.

Tonlar için OKLCH L'yi adımlayın:
oklch(0.30 0.10 220) / oklch(0.60 0.10 220) / oklch(0.90 0.10 220)
Her adım aynı görsel boşluk gibi görünür.

8 haneli hex'i eski bir ayrıştırıcıya kopyalayın:
#FF573380 → ayrıştırıcı keser → #FF5733 (alpha yok)
%50 şeffaflık sessizce kaybolur.

Hedefin 8 haneli hex'i desteklediğini doğrulayın veya rgba() kullanın:
modern CSS için: #FF573380 (8 haneli hex)
eski destek için: rgba(255, 87, 51, 0.5) (her zaman desteklenir)
Açık alpha sözdizimi sessiz kesilmeyi önler.

Varsayılan olarak her OKLCH rengini sRGB'ye hizalayın:
oklch(0.7 0.25 30) → hizala → oklch(0.7 0.18 30)
P3 ekranları sebepsiz yere %30+ doygunluk kaybeder.

Önce Display P3 rozetini kontrol edin:
P3'e sığarsa: geniş gamlı değeri tutun, @supports aracılığıyla sRGB geri dönüşü ekleyin
P3'ü aşarsa: o zaman sRGB'ye hizalayın
Geniş gamlı donanımın işini yapmasına izin verin.

Bu Aracı Kimler Kullanır

Tailwind v4 OKLCH Belirteçlerine Geçen Ön Uç Geliştiriciler

Tailwind v4, 2024'te varsayılan paleti için OKLCH'yi standartlaştırdı. Eski bir HSL veya hex tabanlı tasarım sistemini taşımak, yüzlerce marka rengini OKLCH'ye dönüştürmek anlamına gelir. Her hex'i yapıştırın, OKLCH çıktısını kopyalayın, `@theme` bloğuna bırakın. Canlı renk gamı rozetleri, sRGB'yi aşan renkleri işaretler, böylece Display P3 ekranları için daha geniş gamlı değeri tutup tutmayacağınıza karar verebilirsiniz.

Figma Renklerini iOS / Android'e Çeviren Tasarımcılar

Figma varsayılan olarak hex'i dışa aktarır, ancak iOS SwiftUI `Color(red:green:blue:)` literal'ları ister ve Android Jetpack Compose `Color(0xFF...)` sabitleri ister. Figma hex'ini bir kez yapıştırın, iOS mühendisi için SwiftUI parçacığını ve Android mühendisi için Compose parçacığını kopyalayın — her ikisi de zaten her platformun beklediği tam sözdiziminde, izlenebilirlik için orijinal hex bir yorumda korunur.

Baskı Provası Hazırlayan Tasarımcılar (CMYK Yaklaşımı)

Bir marka renginin basılı bir kartvizitte görünmesi gerektiğinde, CMYK yaklaşımı uygun ICC dönüşümünden önce matbaayla paylaşmak için hızlı bir tahmin verir. Marka hex'ini yapıştırın, CMYK yüzdelerini kopyalayın, hızlı bir fiyat teklifi için matbaaya gönderin — ardından belirli baskı makinesine karşı son renk eşleşmesi için matbaanın ICC profili farkında dönüşümüne bırakın.

WCAG ve APCA Doğrulayan Erişilebilirlik Mühendisleri

WCAG 2.1 bugün düzenleyici standarttır (ADA, EAA, Section 508); APCA Lc önerilen WCAG 3 ardılıdır. Her iki metriğin yan yana gösterilmesi, bir tasarımcının beyaza karşı bir gövde metni renginin 4.5:1 WCAG'yi geçtiğini doğrulayabileceği, ardından iki ayrı hesaplayıcı arasında zıplamadan tek bir ekranda APCA Lc 75'i de geçtiğine dair sağduyu denetimi yapabileceği anlamına gelir.

Renk Uzayı Kavramlarını Öğreten Eğitimciler

Eşzamanlı dokuz alan görünümü, renk uzayı ilişkilerini görünür kılar. Bir OKLCH değeri yazın, L her uzayda farklı şeyler ifade ettiği için HSL'nin saptığını izleyin. Renk tonu kaydırıcısını sürükleyin ve hex, RGB ve CMYK'nın hepsinin güncellendiğini izleyin. Chroma'yı sRGB'nin ötesine ittikçe renk gamı rozetlerinin kırmızıya döndüğünü gösterin. Araç, üniversite seviyesindeki bir grafik veya İnsan-Bilgisayar Etkileşimi dersi için kendi sınıf demosudur.

En Yakın CSS Adlandırılmış Rengini Bulan Marka Yöneticileri

Pazarlama metni "tomato renginde bir vurgu" derken gerçek marka hex'i `#FF6347` ise, Adlandırılmış alanı `tomato (exact)` döndürür çünkü CSS spesifikasyonunda `tomato`'nun çözüldüğü şey tam olarak budur. Yakın-kaçırma hex'leri için alan, OKLAB'da ΔE mesafesiyle birlikte en yakın adlandırılmış rengi döndürür — belgelendirme, düz yazı ve gündelik renk adlandırması için kullanışlıdır.

Eski HEX Paletlerini OKLCH'ye Dönüştüren Web Geliştiricileri

Eski bir site, CSS özel özelliklerinde hex kodları olarak tanımlanmış 50 renkli bir marka paletine sahip olabilir. OKLCH'ye modernleştirmek, marka ekibinin aynı rampaları algısal olarak tek tip bir uzayda ifade etmesine olanak tanır. Her hex'i yapıştırın, OKLCH çıktısını kopyalayın, değişken tanımlarına takas edin. Aşağıdaki Açık Tonlar/Koyu Tonlar paneli, ortaya çıkan rampanın göndermeden önce görsel olarak eşit olduğunu doğrular.

Tasarım Belirteçlerini Belgeleyen Açık Kaynak Bakımcıları

Tasarım belirteci belgelendirmesi genellikle aynı rengi birden çok sözdiziminde göstermesi gerekir — CSS kod bloğu için hex, spesifikasyon tablosu için OKLCH, düz yazı sözleri için adlandırılmış renk. Eşzamanlı alan görünümü, bir bakımcının üç ayrı dönüşümü yeniden çalıştırmak yerine her birini tek bir geçişte kopyalamasına olanak tanır. Paylaşılabilir URL hash'i ayrıca katkıda bulunanların bir GitHub sorununda tartışılan tam renge bağlantı vermesine olanak tanır.

Renk Dönüşüm Matematiği ve Algoritmalar

Dahili Kaynak-Doğru Olarak OKLCH

Araç, kanonik renk değerini dahili olarak bir OKLCH üçlüsü olarak tutar. Her düzenlenebilir alan görüntü değerini her tuş vuruşunda o üçlüden türetir; her kullanıcı düzenlemesi önce üçlüyü günceller, ardından diğer sekiz alanın yeniden işlenmesini tetikler. Bu, HSL veya sRGB üzerinden bir pivot olarak yönlendiren dönüştürücülere musallat olan adım başına float sapmasını ortadan kaldırır. OKLAB yerine OKLCH seçimi kasıtlıdır — kutupsal biçim Hue'yu kararlı bir eksen olarak korur, böylece renk tonu kaydırıcısını sürüklemek yanlışlıkla gri üzerinden geçişe neden olmaz. Björn Ottosson'un 2020 makalesine göre, OKLAB'ın algısal tek tipliliği, onu modern renk matematiğinin ortak dili olarak ele almak için en güçlü argümandır.

Matris Kaynakları (W3C CSS Color 4 + Ottosson 2020)

Kod tabanındaki her dönüşüm matrisi birincil kaynağına atıfta bulunur. sRGB ↔ doğrusal-sRGB parçalı gamma işlevi W3C CSS Color 4 §11.2'dir (`v <= 0.04045 ? v/12.92 : ((v+0.055)/1.055)^2.4`). Doğrusal-sRGB ↔ CIE XYZ D65 3×3 matrisi CSS Color 4 §15.1'dir. XYZ D65 ↔ LMS matrisi ve OKLAB küp kökü adımı, Ottosson'un `https://bottosson.github.io/posts/oklab/` referans uygulamasından, yayımlandığı şekilde tam olarak alınır. Hiçbir matris yeniden hesaplanmaz veya yeniden türetilmez — bunları kelimesi kelimesine kopyalamak, çıktıyı spesifikasyonun referans vektörlerine özdeş tutar.

Saf CMYK Formülü ve ICC Uyarısı

CMYK çıktımız standart ders kitabı formülünü kullanır: `K = 1 - max(R, G, B); C = (1-R-K)/(1-K); M = (1-G-K)/(1-K); Y = (1-B-K)/(1-K)`, normalleştirilmiş sRGB değerleri üzerinde çalışır. Bu kasıtlı bir yaklaşımdır. Gerçek baskı doğruluğu, belirli baskı makinesine, mürekkebe (örn. US Web Coated SWOP v2, Fogra39, Japan Color 2011) ve kâğıda karşı bir ICC profil dönüşümü gerektirir; bu da kanalları %5-15 oranında kaydırabilir. Kullanıcıların değerlerimizi doğrudan bir baskı makinesine göndermemesi için CMYK alanını görünür bir uyarıyla yüzeyleştiriyoruz. Çıktıyı teslim edilebilir olarak değil, teklifler için bir sağduyu denetimi olarak değerlendirin.

Kanal-Aralık Kontrolü Üzerinden Renk Gamı Algılama

Bir renk, o uzayın primerlerine dönüştürüldükten sonra her kanal `[-ε, 1 + ε]` aralığına düşerse hedef uzay (sRGB, Display P3, Rec.2020) için renk gamı içinde kabul edilir; burada `ε = 1e-7` sınırlar etrafındaki float-hassasiyet gürültüsünü emer. Herhangi bir kanal aralığı aştığında her uzayın renk gamı rozeti kırmızıya döner. Bu yaygın durumu yakalar — `oklch(0.7 0.4 30)` gibi geniş gamlı bir OKLCH renk, sRGB dışı ancak P3 içi olarak bildirir, size hangi ekranların onu doğru şekilde işleyeceğini söyler. Kontrol her tuş vuruşunda çalışır.

Chroma-Azaltma Hizalama Algoritması

sRGB'ye Hizala, Chroma ekseninde ikili arama kullanır: L ve H'yi geçerli değerlerde sabit tutun, C ∈ [0, currentC] aralığında sRGB dönüşümü renk gamında kalan en büyük C'yi arayın. Arama en fazla 30 yineleme çalışır (hassasiyet ~10⁻⁹), bu da görsel doğruluk için fazlasıyla yeterlidir. Bu, CSS Color 4 §13'te tanımlanan bilgilendirici renk gamı haritalama algoritmasıyla eşleşir — açıklığı ve renk tonunu korurken yalnızca chroma'yı azaltmak, hizalanan rengi aynı renk tonu ailesi olarak tanınabilir kılar. Renk tonunu belirgin şekilde bozduğu için (özellikle mavilerde) RGB kanallarını doğrudan kırpmıyoruz.

Brettel + Machado CVD Matrisleri

Renk körlüğü simülasyonu iki yayımlanmış matris ailesi kullanır. Üç dikromasi — protanopi, döteranopi, tritanopi — doğrusal-RGB'de çalışan Brettel-Viénot-Mollon 1997 matrislerini kullanır (önce gamma kodu çözme, matrisi uygulama, gamma kodlama geri). Üç anormal trikromasi — protanomali, döteranomali, tritanomali — tipik bir anormal-trikromasi hastasına karşılık gelen, şiddet 0.66'da Machado-Oliveira-Fernandes 2009 matrislerini kullanır. Akromatopsi ve kısmi akromatomali, gri tonlamalı bir projeksiyon için rec601 parlaklık ağırlıkları (`0.299R + 0.587G + 0.114B`) kullanır. Sekiz simülasyonun tümü her renk değişikliğinde işlenir.

WCAG 2 ile APCA: Ne Zaman Hangisi Kullanılmalı

WCAG 2.x (geçerli standart), bağıl parlaklıktan simetrik bir kontrast oranı hesaplar: `(L1 + 0.05) / (L2 + 0.05)`, normal gövde metni için hedef 4.5:1 ve AAA için 7:1. 2026'da erişilebilirlik denetimleri için yasal uyum tabanıdır. APCA (Accessible Perceptual Contrast Algorithm), önerilen WCAG 3 ardılıdır — polariteye duyarlıdır (açık-üzerine-koyu, koyu-üzerine-açıktan farklı puanlanır), insan-algılanan okunabilirlikle daha iyi ilişkilidir, gövde metni için hedef `|Lc| ≥ 75`. Her iki metriğin tek bir satırda gösterilmesi, bir tasarımcının uyumluluk için WCAG 2'yi ve gerçek dünya okunabilirliği için APCA'yı iki ayrı hesaplayıcı arasında zıplamadan vurabilmesine olanak tanır.

Renk Dönüşümü için En İyi Uygulamalar

Tasarım Sistemi Belirteçleri için OKLCH'yi Tercih Edin; Eski için HEX

2025 veya sonrası gönderilen herhangi bir yeni tasarım sistemi için marka renklerini ve palet rampalarını OKLCH'de tanımlayın. L ekseni algısal olarak eşit rampaları otomatik olarak verir; Chroma ekseni hex'in kodlayamayacağı geniş gamlı renkleri adresleyebilir. Eski tarayıcılar için `@supports not (color: oklch(0 0 0))` veya derleme zamanı PostCSS aracılığıyla bir hex geri dönüşü tutun, ancak belirteç deponuzdaki kanonik değer OKLCH olsun. Binlerce mevcut hex değişkenine sahip eski sistemler, planlı bir geçişe kadar hex olarak kalabilir — kendi iyiliği için karıştırmayın.

CMYK Çıktısını Yaklaşım Olarak Değerlendirin, Baskı Sağlayıcıyla Doğrulayın

Bu aracın yüzeyleştirdiği CMYK sayıları, bir ICC profili dönüşümü değil saf bir sRGB tabanlı formüldür. Bunları yaklaşık teklifler ve dahili karşılaştırmalar için kullanın. Gerçek bir baskı çalıştırmasından önce, orijinal hex'i (CMYK yaklaşımını değil) baskı sağlayıcısına gönderin ve belirli baskı makinesine, mürekkebe ve kâğıda karşı kendi ICC dönüşümünü yapmasına izin verin. Uygun bir dönüşümden gelen %5-15 kanal kayması, yaklaşım doğrudan gönderilirse keskin bir kırmızıyı kolayca çamurlu bir turuncuya çevirebilir.

İleriye Dönük Erişilebilirlik için APCA Lc Kullanın

WCAG 2.x, birkaç yıl daha düzenleyici taban olmaya devam edecek, ancak APCA standardın gittiği yöndür. Yeni tasarımlar için WCAG 2.1 tabanlarının yanında gövde metni için `|Lc| ≥ 75` ve büyük metin için `|Lc| ≥ 60`'a ulaşın. APCA, WCAG 2'nin simetrik oranının kaçırdığı okunabilirlik sorunlarını yakalar — özellikle WCAG oranının iyi göründüğü ancak metnin normal okuma mesafesinde aslında kaybolduğu parlak arka planlardaki ince stroke metin.

Geniş Gamlı Renkleri Display P3 Renk Gamı Kontrolünden Geçirin

Modern Apple donanımını (2017+ iPhone, iPad, MacBook) hedefliyorsanız veya HDR farkında içerik gönderiyorsanız, marka renklerini OKLCH'de tanımlayın ve sRGB'yi aşsalar bile P3'e sığdıklarını doğrulamak için Display P3 rozetini kullanın. Daha geniş gamlı renkler P3 ekranlarda gözle görülür şekilde daha doygun görünür ve yalnızca sRGB ekranlarda tarayıcı tarafından uygulanan chroma sıkıştırması aracılığıyla zarif bir şekilde indirgenir. Tüm hedef kitlenizin eski ekranlarda olduğunu bilmediğiniz sürece sRGB'ye önceden hizalamayın.

OKLCH Gri Tonları Aracılığıyla Algısal Olarak Tek Tip Koyu Tonlar Seçin

Bir marka rengi için 50/100/200/.../900 rampası üretirken Gri Tonlar panelini kullanın: C ve H'yi sabit tutarken L'yi eşit artışlarla adımlar. Sonuç, 400 ve 500 arasındaki görsel boşluğun 500 ve 600 arasındaki boşlukla aynı göründüğü algısal olarak eşit bir rampadır. HSL rampalarını aynı eşitlik için el ile ayarlamak, renk başına çok saatlik bir egzersizdir; OKLCH bunu ücretsiz verir.

Sekmeler Arası Renk Eşleştirme için Damlalığı Tutumlu Kullanın

EyeDropper API (2026 itibarıyla yalnızca Chromium), tarayıcının dışı dahil ekranın herhangi bir yerine tıklayarak o pikselin rengini örneklemenize olanak tanır. Bir ekran görüntüsünden, bir video karesinden veya başka bir uygulamanın arayüzünden bir rengi eşleştirmek için kullanışlıdır. Sonucu bir başlangıç noktası olarak değerlendirin, son değer olarak değil — ekran işleme, kaynak dosyadan farklı olabilecek renk yönetimi uygular. Kanonik marka renkleri için bir ekran görüntüsünü damlalıkla almak yerine her zaman hex'i tasarım kaynağından (Figma, Sketch, marka yönergeleri PDF'i) alın.

Paylaşılabilir Palet Kararları için `#hex=...` İçeren URL'leri Yer İmlerine Ekleyin

Geçerli renk, URL hash'ine otomatik olarak `#hex=...` veya `#oklch=...` olarak kodlanır. URL'yi kopyalayın, bir Slack mesajına veya bir GitHub sorununa yapıştırın ve onu açan herkes tam olarak aynı renkte iner. "Marka mavisinin" belirli bir OKLCH üçlüsü anlamına gelmesi gereken tasarım inceleme mesajları için kullanışlıdır. Hash her değişiklikte güncellenir, böylece adres çubuğunuzdaki URL her zaman canlı geçerli renktir — daha sonra belirli bir palete geri dönmek için yer imine ekleyin.

Sıkça Sorulan Sorular