
Web’den baskıya, renk seçicilerden araştırmaya, 1860–2026. CSS, gölgelendirici, WASM ve renk dönüşüm tablosu (LUT) desteği.
Tek bir JavaScript paketi. Aynı dönüşümler WASM ile görüntülerin tamamını işler, GLSL ve WGSL gölgelendiricilerinde çalışır, LUT tabloları ve ICC profilleri olarak dışa aktarılır.
import space from 'color-space' space.rgb.oklch(255, 128, 0) // → [0.732, 0.186, 53] space.oklch.rgb(0.65, 0.25, 180) // any of 205 × 204 pairs space.oklch.name // 'oklch' space.oklch.range // [[0,1], [0,0.4], [0,360]] // one space only – tree-shaken, 0.4-1.5 kB import oklch from 'color-space/oklch.js' oklch.rgb(0.65, 0.25, 180)
// values in the notations CSS already speaks – straight from the library color: oklch(0.732 0.186 53); // space.rgb.oklch(255, 128, 0) color: color(display-p3 0.936 0.529 0.199); // space.rgb.p3(255, 128, 0) color: color(xyz-d65 0.49 0.367 0.045); // space.rgb.xyz(…) / 100 – exact interchange // spaces CSS lacks ship as ICC profiles or LUTs – see those tabs; // every dossier's css tab writes the current color in copyable forms
// per-space metadata – sourced, ships as data.json
import data from 'color-space/data.json' with { type: 'json' }
const m = data.spaces.oklch
m.channels // [{symbol, min, max, name}, …]
m.refs // defining spec / paper links
m.year, m.by // 2020, 'Björn Ottosson'
// scalar or whole-buffer, zero-copy – a true WASM kernel
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 – 27 spaces
// every pair as a GLSL shader chunk
import { glsl } from 'color-space/gl'
import oklch from 'color-space/gl/oklch'
const src = glsl(oklch, 'rgb')
// → self-contained: vec3 oklch_rgb(vec3 c)
// paste into any fragment shader, no uniforms
Herhangi bir çift, bir .cube LUT olarak – Resolve, Premiere, Final Cut, OBS ya da ffmpeg’e yükleyin. Kamera log eğrileri resmi ACES üretici dönüşümlerine göre doğrulanmıştır.
Herhangi bir uzay, bir .icc v2 profili olarak – RGB çalışma uzayları için matris + ton eğrisi (Photoshop, işletim sistemi renk yönetimi), diğer her şey için bir CLUT kafesi (lcms, ArgyllCMS, ImageMagick).
// an MCP server – convert · gamut · css · space · spaces · cube –
// so an agent calls verified conversions instead of guessing them
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"] } } }
// bir Figma eklentisi: seçimin dolguları ve konturları, 205 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 figma.com/community/plugin/1691970922817908383/color-space git clone https://github.com/colorjs/color-space // Figma masaüstü: sağ tık › Plugins › Development › Import plugin from manifest… color-space/plugins/figma/manifest.json // neleri okuduğu, yazdığı ve sakladığı – plugins/figma
Renk için bir koordinat sistemi: eksenler, aralıklar ve sayıları ölçülebilir ışığa bağlayan bir kural. Aynı turuncu rgb(255 128 0), oklch(0.732 0.186 53) ve XYZ [49, 36.7, 4.5] olarak yazılır. Bir palet, seçilmiş bir avuç renktir; bir uzay ise herhangi bir rengi yazıya dökmenin bir 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.
Göreve bağlı:
Tüm uzayları göreve göre sıralanmış görmek için kataloğu amaç ölçütüne göre gruplayın.
OKLCH. Aynı üç kontrolü korur – renk tonu, kroma, açıklık – ama açıklığına güvenilebilir: HSL içinde 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 ise bunu sağlar. CSS, oklch() fonksiyonunu yerel olarak 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ı karışımı iki uzaydan yan yana geçirerek çizer; 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 dönüşüm LUT’u 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 yazar. 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 görünür tutar: geçerli rengin yanındaki etiket, onu içine alan en dar standart gamutu adlandırır; aralık dışı bölümler ise dama tahtası bir zeminin üzerinde soluk görünür.
Ekran ışık yayar; kâğıt, mürekkeplerinin soğurmadığını yansıtır. Kâğıttaki mürekkep daha az canlı renge ulaşır – doygun RGB maviler, yeşiller ve kırmızılar onun gamut'unun dışında kalır – bu yüzden daha soluk basılırlar. Baskı öncesi hazırlık, renkleri baskı makinesi ve kâğıt için yapılmış bir ICC profiliyle dönüştürür; Avrupa kuşe kâğıdı 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, profil taşımayan bir dosyayı bu uzayda kabul eder. 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şıklamaları değil, kapalı formüllerdir ve gidiş-dönüşler kayan nokta gürültüsü sınırları içinde geri döner. 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 yayımlanmış kademeler arasında enterpolasyon yapar ve rgb çıktısı sRGB gamutuna kırpılır – bunun dışında kalan değerlere ihtiyacınız olduğunda XYZ ya da doğrusal RGB üzerinden geçin.
Ü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 bunlar space.oklch.range.
Yerel olarak 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 rec2020 uzayı saf bir 2.4 gamadır, bu katalogdaki Rec. 2020 uzayının BT.2020 eğrisi değil – aynı sayılar farklı bir rengi adlandırır. Her uzay dosyasının css sekmesi geçerli rengi kopyalanabilir biçimde yazar; CSS tarafından desteklenmeyen uzaylar ise bunun yerine 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 uygulanacak açık bir matematik yoktur ve tablolarını yeniden dağıtmak yasal olmaz. Matematiği kamuya açık yakın akrabaları burada: Munsell (1943 Renotation verisi kamuya açıktır) ve RAL Design (doğrudan CIELAB’da tanımlanır). Matematiği bir kez bile yayımlanmış her sistemin yeri burasıdır; eksik olanı önerin.
@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.3.0},
year = {2026}
}Ivanov, D. (2026). color-space (Version 3.3.0) [Computer software]. https://github.com/colorjs/color-space
OPPO’nun ikinci telefon log eğrisi: BT.2020 üzerinde tek bir 2 tabanlı log eğrisi; LUT’lar ve bir ACES dönüşümüyle birlikte sunulur.
OPPO akıllı telefonları için log video profili; renk düzenleme OPPO’nun O-Log2 LUT’ları ya da ACES dönüşümüyle yapılır.
OPPO bunun için teknik belge yayımlamıyor; ACES CTL dosyasındaki 4 basamaklı sabitler tek tanımdır.
bileşensahneye dayalıHDRlogD65
2026, OPPO
O, OPPO’dan gelir; 2 = şirketin ikinci log profili
O-Log2 → Linear-light Rec. 2020 → CIE XYZ → sRGB
// one space, tree-shaken (0.4-1.5 kB) — its own edge: import olog2 from 'color-space/olog2.js' olog2['rec2020-linear'](0.51, 0.51, 0.51) // → [0.2159, 0.2159, 0.2159] // any-to-any, both ways — the wired hub: import space from 'color-space' space.olog2.rgb(0.51, 0.51, 0.51) // → [128, 128, 128] space.rgb.olog2(128, 128, 128) // → [0.51, 0.51, 0.51] // route: olog2 → rec2020-linear → xyz → rgb