Rengi, paleti, gradyanı ya da görüntüyü her renk uzayında görün. Ekranlardan baskıya, renk seçiminden araştırmaya, 1860–2026.
Kütüphanenin tamamı: 221 uzay, gzip ile 71 kB – her uzaydan her uzaya, iki yönde de.
npm install color-space
import space from 'color-space' space.rgb.oklch(255, 128, 0) // → [0.732, 0.186, 53] space.oklch.rgb(0.65, 0.1, 180) // → [56.14, 162.97, 145.41] space.oklch.range // [[0,1], [0,0.4], [0,360]]
Ya da yalnızca tek bir uzay – pakete başka hiçbir şey girmez.
import oklch from 'color-space/oklch.js' oklch.rgb(0.65, 0.1, 180) // → [56.14, 162.97, 145.41]
Tipli: TypeScript bildirimleri pakete dahildir; hem kütüphanenin tamamı hem de tek başına içe aktarılan her renk uzayı için.
Bütün görüntüler ve uzun arabellekler için: 54 uzay, gzip ile 53 kB, ölçülen 26 dönüşümde JS toplu işleminden 1.4–4.8 kat hızlı.
import space, { alloc } from 'color-space/wasm'
space.oklch.rgb(0.72, 0.16, 41) // → [246, 125, 79]
const buf = alloc(n) // n×3 Float64Array
space.rgb.oklch(buf) // in place
Modül hiçbir şey içe aktarmaz, bu yüzden WebAssembly’nin çalıştığı her yerde çalışır: tarayıcılar, Node, Deno, Bun – ve wasmtime ya da wasmer aracılığıyla Python, Rust veya Go.
import struct
from wasmtime import Store, Module, Instance # pip install wasmtime
store = Store() # color-space.wasm: the npm package's dist/
cs = Instance(store, Module.from_file(store.engine, 'color-space.wasm'), []).exports(store)
at = cs['alloc'](store, 1.0) & 0xFFFFFFFF # the buffer: n×3 float64 in the kernel's memory
cs['memory'].write(store, struct.pack('3d', 255, 128, 0), at)
cs['rgb_lrgb_n'](store, 1.0) # in place, edge by edge: rgb → linear rgb → oklab
cs['lrgb_oklab_n'](store, 1.0)
struct.unpack('3d', cs['memory'].read(store, at, at + 24)) # (0.732, 0.112, 0.148)
Uzaylar rgb, lrgb, xyz, xyz-d50, xyy, lms, p3, p3-linear, rec2020, rec2020-linear, a98rgb, a98rgb-linear, prophoto, prophoto-linear, rec709, hsl, hsv, hwb, oklab, oklrab, oklch, oklrch, lab, lchab, lab-d65, lch-d65, din99o-lab, din99o-lch, luv, lchuv, hsluv, hpluv, cam16, hct, ycbcr-bt709, ycbcr-bt2020, jzazbz, jzczhz, ictcp, ictcp-hlg, ipt, din99d, acescg, acescct, acescc, awg3, logc3, logc4, slog3, vlog, log3g10, clog2, ryb, munsell
221 uzayın tamamı shader fonksiyonu olarak. rgb’ye dönüşüm JavaScript’te olduğu gibi 0–255 döndürür: fragment rengi için 255’e bölün.
WebGL ve OpenGL: GLSL.
import { glsl } from 'color-space/gl'
import oklch from 'color-space/gl/oklch'
const frag = `#version 300 es
precision highp float;
${glsl(oklch, 'rgb')}
out vec4 color;
void main() { color = vec4(oklch_rgb(vec3(0.7, 0.15, gl_FragCoord.x)) / 255.0, 1.0); }`
WebGPU: WGSL.
import { wgsl } from 'color-space/gl'
const code = wgsl(oklch, 'rgb') + `
@fragment fn main(@builtin(position) p: vec4f) -> @location(0) vec4f {
return vec4f(oklch_rgb(vec3f(0.7, 0.15, p.x)) / 255.0, 1.0);
}`
DirectX, Unity ve Unreal: HLSL. Metal: MSL. İkisi de isteğe bağlı bir bağımlılık olan naga ile WGSL’den üretilir.
import { hlsl } from 'color-space/gl/hlsl' // npm i naga-wasm
import { msl } from 'color-space/gl/msl'
await hlsl('oklch', 'rgb') // float3 oklch_rgb(float3)
await msl('oklch', 'rgb') // metal::float3 oklch_rgb(metal::float3)Görüntüleri düzenleyicinizde dönüştürün: iki uzay seçin ve Resolve, Premiere, Final Cut, OBS ya da ffmpeg için bir .cube indirin. Kamera log dönüşümleri Akademi’nin resmî ACES dönüşümleriyle örtüşür.
Bir uzayı Photoshop’a, sisteminizin renk yönetimine, lcms’ye ya da ImageMagick’e taşıyın: .icc profili olarak indirin. RGB uzayları Photoshop’ta çalışma uzayı olarak kullanılabilir; diğerleri bir arama tablosu (LUT) üzerinden dönüştürülür.
Yapay zekâ ajanları için: dönüşümleri tahmin etmek yerine doğrulanmış olanları çağırırlar.
npx -y color-space mcp
// Claude Code
claude mcp add color-space -- npx -y color-space mcp
// VS Code
code --add-mcp '{"name":"color-space","command":"npx","args":["-y","color-space","mcp"]}'
// Claude Desktop · Cursor · .mcp.json
{ "mcpServers": { "color-space": { "command": "npx", "args": ["-y", "color-space", "mcp"] } } }Seçimin dolguları ve konturları, 221 uzayın herhangi birinde – kanal başına bir düzlem ve bir çubuk, dosyanın gamutuna göre kırpılmış; rengi CSS olarak kopyalayın.
Dosyadaki her renk – CSS, Swift, Flutter, Compose, Unity, tasarım token’ları – 221 uzayın herhangi birinde, kanal başına bir düzlem ve bir çubukla; bir düzenleme, rengin kendi gösterimiyle geri yazılır.
Renk için bir koordinat sistemi: eksenler, aralıklar ve sayıları ölçülebilir ışığa bağlayan bir kural. İnsan görüşü trikromatiktir, üç tip koni hücresi vardır (S, M, L); bu yüzden gözün görebildiği herhangi bir rengi tanımlamak için en az üç koordinat gerekir. Aynı turuncu rgb(255 128 0), oklch(0.732 0.186 53) ve XYZ [49, 36.7, 4.5] olarak ifade edilir. Palet seçilmiş birkaç renktir; uzay ise herhangi bir rengi sayılarla ifade etmenin yoludur.
Renk modeli, rengi hangi bileşenlerle tanımlayacağımızı belirler: RGB’de üç ana renk, HSL’de renk tonu, doygunluk ve açıklık, CMYK’da dört mürekkep. Renk uzayı ise ana renkleri, beyaz noktayı ve kodlama eğrisini belirler. Böylece her değer kümesi ölçülebilir bir renge karşılık gelir. Bu nedenle rgb(255 0 0), sRGB, Display P3 ve Adobe RGB içinde farklı kırmızıları tanımlar: aynı model, üç farklı uzay.
Günlük kullanımda her ikisine de renk uzayı denir. CSS’teki color-mix(in hsl, …) ifadesinde ve bu katalogda da aynı kullanım vardır. Bir model, mevcut bir renk uzayını referans alabilir: burada HSL ve HSV, CSS’te olduğu gibi sRGB’yi temel alır.
Yapacağınız işe bağlı:
Tüm uzayları göreve göre sıralanmış görmek için kataloğu kullanım alanı ölçütüne göre gruplayın.
OKLCH. Aynı üç parametreyi kullanır – renk tonu, kroma, açıklık – ama açıklık değeri gerçek açıklığı yansıtır: HSL’de L=50’deki sarı, L=50’deki maviden yaklaşık 13 kat fazla ışık yayar; yani eşit L eşit parlaklık demek değildir. OKLCH’de ise öyledir. CSS, oklch() fonksiyonunu doğrudan destekler.
Değeri üstteki renk alanına yazın ya da yapıştırın, örneğin #ff8000. Sayfadaki her uzay bu rengi aynı anda gösterir; OKLCH’de değeri 0.732, 0.186, 53’tür ve CSS bunu oklch(0.732 0.186 53) olarak yazar. Her uzay dosyasının css sekmesi kopyalanabilir biçimi verir; kodda ise space.rgb.oklch(255, 128, 0) olarak yazılır.
Çünkü gama kodlu sRGB’de hesaplanırlar; orada iki rengin sayılarının ortalamasını almak, ışıklarını gerçekten karıştırmanın vereceğinden daha koyu ve daha donuk bir ışık üretir. OKLab içinde enterpolasyon yapmak bunu önler; CSS’te bu linear-gradient(in oklab, red, blue) olarak yazılır. Her uzay dosyasındaki enterpolasyon satırı aynı geçişi iki uzayda hesaplayıp yan yana gösterir; böylece seçmeden önce farkı görebilirsiniz.
Kameranızın log uzayını açın; örneğin S-Log3, LogC4 ya da Apple Log. Ardından LUT bloğunda Rec. 709’u ve kullandığınız düzenleyiciyi seçin: DaVinci Resolve, Premiere Pro, Final Cut Pro, OBS, ffmpeg ve diğerleri. .cube dosyasını tarayıcınız oluşturur. Bu, ton eşleme içermeyen teknik bir dönüşümdür: difüz beyazın üzerindeki parlak bölgeler kırpılır, yaratıcı görünümü (look) eklemek ise size kalır.
Bir uzayın tanımlayabildiği ama bir diğerinin – ya da ekranınızın – gösteremediği bir renk. Canlı bir Display P3 yeşili sRGB’de yoktur: dönüştürdüğünüzde sayılar geçerli aralığın dışına düşer. Atlas bunu açıkça gösterir: geçerli rengin yanındaki ⚠, rengin Sınır ayarında seçtiğiniz gamutun dışında kaldığını belirtir; bir düzlem ya da şerit üzerinde Alt tuşunu basılı tuttuğunuzda oradaki rengin hangi daha geniş gamutu gerektirdiği (P3, Rec. 2020) görünür; aralık dışı bölümler ise dama tahtası bir zeminin üzerinde soluk görünür.
Ekran ışık yayar; kâğıt ise mürekkeplerin soğurmadığı ışığı yansıtır. Kâğıt üzerindeki mürekkeple daha az canlı renk elde edilebilir – doygun RGB mavileri, yeşilleri ve kırmızıları bu gamutun dışında kalır – bu yüzden baskıda daha soluk çıkarlar. Baskı öncesinde renkler, baskı makinesine ve kâğıda göre hazırlanmış bir ICC profiliyle dönüştürülür; Avrupa’da kuşe kâğıt için FOGRA39, ABD’de GRACoL gibi. Bu katalogdaki CMYK, CSS’in profil olmadan device-cmyk() için kullandığı yalın formüldür: sayılar için doğru, baskının provası değil.
Web ve paylaşım için sRGB: tarayıcılar ve telefonlar, profili olmayan bir dosyanın bu uzayda olduğunu varsayar. Display P3, profil gömülü kaldığı sürece Apple’ın ve birçok Android cihazın ekranında canlı bir sahnenin renklerini daha fazla korur. Bir baskı laboratuvarı isterse Adobe RGB gönderin. ProPhoto RGB’yi 16 bit düzenlemeye ayırın: gamutu o kadar geniştir ki 8 bit dosyalarda bantlaşma görülür.
Dönüşümler tablo yaklaşıklaması değil, kapalı formüldür; gidiş-dönüş dönüşümünde değerler yalnızca kayan nokta yuvarlama hatası kadar değişir. Az sayıdaki istisna, ortaya çıktıkları yerde belgelenmiştir: OSA-UCS için kapalı biçimli bir ters dönüşüm yoktur, Munsell gibi atlas sistemleri ise yayımlanmış kademeler arasında enterpolasyon yapar. rgb çıktısı asla kırpılmaz: sRGB dışındaki bir renk 0’ın altında ya da 255’in üstünde değerler verir, bu yüzden yalnızca ekranda gösterirken kırpın.
Üstelik doğrulanmışlardır: her uzay uyguladığı makaleye ya da spesifikasyona bağlantı verir, değerler ikisinin örtüştüğü her yerde colorjs.io ile, kamera log’ları ise Akademi’nin resmî ACES dönüşümleriyle sınanır. formula-verification.md neyin neyle karşılaştırıldığını kaydeder – yayımlanmış makalelerin kendisinin hatalı çıktığı birkaç yer dahil.
Sayılar başka bir kütüphaneninkinden farklıysa aralıkları karşılaştırın: bu kütüphane her uzayın alışılmış aralıklarını korur – RGB 0–255, Lab açıklığı 0–100, renk tonu 0–360 – oysa birçoğu her şeyi 0–1’e indirger. Her kart kendi aralıklarını gösterir; kodda ise space.oklch.range içinde yer alır.
Doğrudan desteklenenler: rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(); ayrıca Display P3, Adobe RGB, ProPhoto, doğrusal sRGB ve XYZ (D65 ve D50) için color(). CSS’teki rec2020 saf 2.4 gama kullanır, bu katalogdaki Rec. 2020 uzayının BT.2020 eğrisini değil – aynı sayılar farklı bir renge karşılık gelir. Her uzay dosyasının css sekmesi geçerli rengi kopyalanabilir biçimde yazar; CSS’in desteklemediği uzaylar ise ICC profili ya da LUT olarak sunulur.
Görünüm menüsünü açın ve Görme altında birini seçin: kırmızı körlüğü (protanopi), yeşil körlüğü (döteranopi) ya da mavi körlüğü (tritanopi). Katalog o gözün gördüğü gibi yeniden çizilir; böylece bir paletin renklerinin birbirinden ayrı kalıp kalmadığını kontrol edebilirsiniz. NEI verilerine göre her 12 erkekten yaklaşık 1’inde renk görme bozukluğu vardır.
Bunlar lisanslı ürünlerdir: renkleri yayımlanmış formüllerle değil, sahiplerinin sattığı verilerle tanımlanır – bu yüzden uygulanabilecek açık formüller yoktur ve tablolarını yeniden dağıtmak yasal olmaz. Formülleri kamuya açık benzer sistemler burada: Munsell (1943 Renotation verisi kamuya açıktır) ve RAL Design (doğrudan CIELAB’da tanımlanır). Formülleri bir zamanlar yayımlanmış her sistem bu katalogda yer alabilir; eksik olanı önerin.
| Araç | Uzaylar | Kamera log’ları | Luma–kroma | sRGB | Araç seti | Boyut | Hız | Hedefler |
|---|---|---|---|---|---|---|---|---|
| 205 | 31 | 16 | 0–255 | parse mix ΔE contrast CVD | 62 kB | JS, WASM, GL, LUT, ICC, OCIO, MCP, Figma, VS Code, CLI, web | ||
| 30 | – | 1 | 0–1 | parse mix gamut ΔE contrast CVD | 23 kB | JS | ||
| 51 | – | – | 0–1 | parse mix gamut ΔE contrast | 34 kB | JS, web | ||
| chroma-js | 11 | – | – | 0–255 | parse mix ΔE contrast palettes | 17 kB | JS | |
| @texel/color | 16 | – | – | 0–1 | parse gamut ΔE | 9 kB | JS | |
| 128 | 24 | 6 | 0–1 | ΔE CVD | – | – | Python, LUT | |
| 77 | – | – | 0–1 | parse mix gamut ΔE contrast CVD palettes | – | – | Python | |
| 9 | – | – | 0–1 | mix contrast CVD palettes | – | – | R, web | |
| 57 | 11 | – | 0–1 | gamut | – | – | C++, Python, GL, LUT, ICC | |
| 22 | – | – | 0–1, 0–255 | ΔE | – | – | web | |
| 9 | – | – | 0–255 | parse gamut | – | – | web |
Her projenin kendi kaynak kodundan, paketinden ya da sayfasından, 2026-10-18 itibarıyla.
@software{Ivanov_color-space_2026,
author = {Ivanov, Dmitry},
license = {CC0-1.0},
month = oct,
title = {{color-space}},
url = {https://github.com/colorjs/color-space},
version = {3.4.0},
year = {2026}
}Ivanov, D. (2026). color-space (Version 3.4.0) [Computer software]. https://github.com/colorjs/color-space
Kolorimetri
Yy: L* gibi ölçeklenmiş Y; Cx ve Cz: küp kök olmadan a* ve b* gibi ölçeklenmiş X − Y ve Y − Z
1993, Flohr, Kolpatzik, Balasubramanian, Carrara, Bouman & Allebach
Renkli görüntüleri doğrusal ışıkta, CIELAB ile hizalı eksenler boyunca filtrelemek – yarım ton tasarımı ve NVIDIA’nın FLIP’i gibi bulanıklaştırmaya dayalı fark metrikleri.
Yarım ton tasarımı ve uzamsal görüntü farkı metrikleri (FLIP): filtreleme burada yapılır, ardından CIELAB’a geçilir.
XYZ’ye göre doğrusal, bu yüzden algısal olarak tekdüze değil: farklar ancak CIELAB’a dönüştürüldükten sonra ölçülmeli.
// one space, tree-shaken (0.4-1.5 kB) — its own edge: import ycxcz from 'color-space/ycxcz.js' ycxcz.xyz(9, 0, 0) // → [20.5166, 21.5861, 23.5085] // any-to-any, both ways — the wired hub: import space from 'color-space' space.ycxcz.rgb(9, 0, 0) // → [128, 128, 128] space.rgb.ycxcz(128, 128, 128) // → [9, 0, 0] // route: ycxcz → xyz → rgb