Ruang warna MacLeod–Boynton

Lihat warna, palet, gradien, atau gambar di setiap ruang warna. Dari web hingga cetak, dari pemilih warna hingga riset, dari 1860 hingga 2026.

Penggunaan

JavaScript

Seluruh pustaka: 221 ruang, 71 kB setelah gzip—setiap ruang ke ruang lain mana pun, dua arah.

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]]

Atau satu ruang saja—bundelnya tidak memuat apa pun selain itu.

import oklch from 'color-space/oklch.js'

oklch.rgb(0.65, 0.1, 180)   // → [56.14, 162.97, 145.41]

Bertipe: deklarasi TypeScript disertakan dalam paket, untuk seluruh pustaka maupun untuk tiap ruang secara terpisah.

WebAssembly

Untuk gambar utuh dan buffer panjang: 54 ruang, 53 kB setelah gzip, 1.4–4.8× lebih cepat daripada batch JS pada 26 konversi yang diukur.

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

Modul ini tidak mengimpor apa pun, jadi berjalan di mana pun WebAssembly berjalan: peramban, Node, Deno, Bun—serta Python, Rust, atau Go melalui wasmtime atau wasmer.

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)

Dikompilasi oleh jz

Ruang 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

Shader

Semua 221 ruang sebagai fungsi shader. Konversi ke rgb menghasilkan 0–255, seperti di JavaScript: bagi dengan 255 untuk warna fragmen.

WebGL dan 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, dan Unreal: HLSL. Metal: MSL. Keduanya dihasilkan dari WGSL oleh naga, dependensi opsional.

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)

Server MCP

Untuk agen AI: agen memanggil konversi yang sudah terverifikasi alih-alih menebaknya.

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"] } } }

Teruji dengan acuansetiap ruang diuji dengan nilai acuan
Dua arahruang apa pun ke ruang lain mana pun
RinganSekitar 1 kB per ruang
Domain publikCC0

Apa itu ruang warna?

Sistem koordinat untuk warna: sumbu, rentang, dan aturan yang mengikat angka-angkanya ke cahaya yang terukur. Penglihatan manusia bersifat trikromatik, dengan tiga jenis sel kerucut (S, M, L), sehingga dibutuhkan minimal tiga koordinat untuk menyatakan warna apa pun yang dapat dilihat mata. Jingga yang sama ditulis rgb(255 128 0), oklch(0.732 0.186 53), dan XYZ [49, 36.7, 4.5]. Palet adalah segelintir warna pilihan; ruang warna adalah cara untuk menuliskan warna apa pun.

Model warna atau ruang warna—apa bedanya?

Model warna menentukan bentuk angkanya: RGB berarti tiga warna primer, HSL berarti rona, saturasi, dan kecerahan, CMYK berarti empat tinta. Ruang warna mengikat model itu ke cahaya yang terukur—primer yang mana, putih yang mana, kurva yang mana—sehingga setiap set angka menunjuk tepat satu warna. rgb(255 0 0) adalah merah yang berbeda di sRGB, Display P3, dan Adobe RGB: satu model, tiga ruang.

Dalam pemakaian sehari-hari keduanya disebut ruang—begitu pula di color-mix(in hsl, …) pada CSS, dan di katalog ini. Model yang tidak punya acuan sendiri ke cahaya terukur memakai acuan ruang lain: di sini HSL dan HSV adalah bentuk lain dari sRGB, seperti di CSS.

Ruang mana yang sebaiknya saya pakai?

Tergantung tugasnya:

menyimpan dan berbagi gambar—sRGB, bawaan web;
merancang palet dan gradien—OKLCH, tempat langkah yang sama besar tampak sama;
perhitungan cahaya (pencampuran, pengaburan, 3D)—RGB cahaya linear;
merekam dan melakukan color grading video—ruang log kamera Anda, didistribusikan dalam Rec. 709 atau Rec. 2100;
mengukur seberapa berbeda dua warna terlihat—CIELAB atau DIN99o.

Untuk melihat semua ruang menurut tugasnya, kelompokkan katalog berdasarkan kegunaan.

Apa yang sebaiknya dipakai sebagai pengganti HSL?

OKLCH. Ruang ini mempertahankan tiga kontrol yang sama—rona, kroma, kecerahan—tetapi kecerahannya bisa dipercaya: di HSL, kuning pada L=50 memancarkan cahaya sekitar 13 kali lebih banyak daripada biru pada L=50, jadi L yang sama tidak berarti sama terang. Di OKLCH, L yang sama memang berarti sama terang. CSS mendukung oklch() secara bawaan.

Bagaimana cara mengonversi hex ke OKLCH?

Ketik atau tempel ke kolom warna di bagian atas, misalnya #ff8000. Setiap ruang di halaman langsung menampilkan warna itu; di OKLCH nilainya 0.732, 0.186, 53, yang dalam CSS ditulis oklch(0.732 0.186 53). Tab css di setiap rincian memberikan bentuk yang siap disalin, dan dalam kode: space.rgb.oklch(255, 128, 0).

Mengapa warna gradien tampak kusam di tengah?

Karena gradien dihitung dalam sRGB yang disandikan dengan gama, dan di sana rata-rata angka dua warna menghasilkan cahaya yang lebih gelap dan kusam daripada jika cahayanya benar-benar dicampur. Interpolasi di OKLab menghindari hal ini; di CSS caranya linear-gradient(in oklab, red, blue). Baris interpolasi di setiap rincian menggambar campuran yang sama melalui dua ruang berdampingan, jadi Anda bisa melihat bedanya sebelum memilih.

Bagaimana cara mengonversi S-Log3 atau log kamera lain ke Rec. 709?

Buka ruang log kamera Anda, misalnya S-Log3, LogC4, atau Apple Log. Di blok LUT, pilih Rec. 709 dan editor Anda: DaVinci Resolve, Premiere Pro, Final Cut Pro, OBS, ffmpeg, dan lainnya. Peramban Anda membuat berkas .cube-nya. Ini konversi teknis tanpa pemetaan tona: bagian terang di atas putih difus terpotong, dan gaya visualnya Anda tambahkan sendiri.

Apa arti “di luar gamut”?

Warna yang dapat dinyatakan oleh satu ruang, tetapi tidak dapat ditampilkan oleh ruang lain—atau oleh layar Anda. Hijau Display P3 yang pekat tidak ada di sRGB: jika dikonversi, angkanya jatuh di luar rentang yang valid. Atlas ini menampilkannya dengan jelas: tanda ⚠ di samping warna saat ini menandakan warna itu berada di luar Batas yang Anda pilih, menahan Alt di atas bidang atau strip menunjukkan gamut lebih lebar mana yang dibutuhkan warna di situ (P3, Rec. 2020), dan bagian di luar rentang tampil samar di atas pola papan catur.

Mengapa hasil cetak tampak lebih kusam daripada di layar?

Layar memancarkan cahaya; kertas memantulkan cahaya yang tidak diserap tintanya. Tinta di atas kertas menjangkau lebih sedikit warna pekat—biru, hijau, dan merah RGB yang jenuh berada di luar jangkauannya—sehingga hasil cetaknya lebih kusam. Pracetak mengonversi warna melalui profil ICC yang dibuat untuk mesin cetak dan kertasnya, misalnya FOGRA39 untuk kertas coated Eropa atau GRACoL di AS. CMYK di katalog ini adalah rumus sederhana yang dipakai CSS untuk device-cmyk() tanpa profil—benar untuk angkanya, tetapi bukan pengganti cetak coba.

Dalam ruang warna apa sebaiknya saya mengekspor foto?

Untuk web dan untuk dibagikan: sRGB—peramban dan ponsel menganggap gambar memakai sRGB jika berkasnya tidak membawa profil. Display P3 menyimpan lebih banyak warna pekat dari pemandangan di layar Apple dan banyak layar Android, selama profilnya tetap tertanam. Kirim Adobe RGB jika lab cetak memintanya. Simpan ProPhoto RGB untuk penyuntingan 16-bit: gamutnya begitu lebar sehingga gradasi pada berkas 8-bit pecah bertingkat (banding).

Apakah konversinya tepat? Apakah konversi bolak-balik kehilangan data?

Konversi memakai rumus bentuk tertutup, bukan pendekatan dengan tabel, dan konversi bolak-balik kembali ke nilai awal dengan selisih sebatas galat floating-point. Beberapa pengecualian didokumentasikan di tempatnya: OSA-UCS tidak memiliki invers bentuk tertutup, dan sistem atlas seperti Munsell menginterpolasi di antara tingkat-tingkat yang dipublikasikan. Keluaran rgb tidak pernah dipotong: warna di luar sRGB dikembalikan dengan nilai di bawah 0 atau di atas 255, jadi potong nilainya hanya saat menampilkannya.

Konversinya juga diperiksa: setiap ruang menautkan makalah atau spesifikasi yang diterapkannya, nilainya diuji terhadap colorjs.io di semua ruang yang dimiliki keduanya, dan log kamera diuji terhadap transformasi ACES resmi dari Academy. formula-verification.md mencatat apa diperiksa terhadap apa—termasuk beberapa tempat di mana makalah yang dipublikasikan itu sendiri mengandung kesalahan.

Jika angkanya berbeda dari pustaka lain, bandingkan rentangnya: pustaka ini mempertahankan rentang konvensional setiap ruang—RGB 0–255, kecerahan Lab 0–100, rona 0–360—sementara banyak pustaka meratakan semuanya ke 0–1. Setiap kartu menampilkan rentangnya; dalam kode, rentang itu ada di space.oklch.range.

Mana saja yang bisa ditulis dalam CSS?

Secara bawaan: rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), ditambah color() untuk Display P3, Adobe RGB, ProPhoto, sRGB linear, dan XYZ (D65 dan D50). rec2020 di CSS memakai gama 2.4 murni, bukan kurva BT.2020 seperti Rec. 2020 di katalog ini—angka yang sama akan menunjuk warna yang berbeda. Tab css di setiap rincian menuliskan warna saat ini dalam bentuk yang siap disalin; ruang yang tidak ada di CSS tersedia sebagai profil ICC atau LUT.

Bagaimana warna terlihat oleh penyandang buta warna?

Buka Tampilan dan pilih Penglihatan: buta warna merah (protanopia), buta warna hijau (deuteranopia), atau buta warna biru (tritanopia). Katalog digambar ulang seperti yang dilihat mata tersebut, sehingga Anda bisa memeriksa apakah warna-warna dalam palet tetap bisa dibedakan. Sekitar 1 dari 12 laki-laki mengalami gangguan penglihatan warna, menurut data NEI.

Di mana Pantone, NCS, RAL?

Itu produk berlisensi: warnanya ditentukan oleh data yang dijual pemiliknya, bukan oleh rumus yang dipublikasikan—jadi tidak ada matematika terbuka yang bisa diterapkan, dan menyebarluaskan tabelnya tidak legal. Sistem serupa yang matematikanya terbuka ada di sini: Munsell (renotasi 1943-nya adalah dokumen publik) dan RAL Design (didefinisikan langsung dalam CIELAB). Setiap sistem yang matematikanya pernah dipublikasikan layak ada di sini; usulkan yang belum ada.

Alternatif

Perbandingan pustaka konversi warna.

Alat	Ruang	Log kamera	Luma–kroma	sRGB	Fitur	Ukuran	Kecepatan	Target
color-space	205	31	16	0–255	`parse` `mix` `ΔE` `contrast` `CVD`	62 kB		JS, WASM, GL, LUT, ICC, OCIO, MCP, Figma, VS Code, CLI, web
culori	30	–	1	0–1	`parse` `mix` `gamut` `ΔE` `contrast` `CVD`	23 kB		JS
colorjs.io	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
colour-science	128	24	6	0–1	`ΔE` `CVD`	–	–	Python, LUT
ColorAide	77	–	–	0–1	`parse` `mix` `gamut` `ΔE` `contrast` `CVD` `palettes`	–	–	Python
colorspace (R)	9	–	–	0–1	`mix` `contrast` `CVD` `palettes`	–	–	R, web
OpenColorIO	57	11	–	0–1	`gamut`	–	–	C++, Python, GL, LUT, ICC
Bruce Lindbloom	22	–	–	0–1, 0–255	`ΔE`	–	–	web
oklch.com	9	–	–	0–255	`parse` `gamut`	–	–	web

Dari sumber, paket, atau halaman masing-masing proyek, 2026-10-18.

Ruang warna MacLeod–Boynton

Penggunaan

JavaScript

WebAssembly

Shader

LUT video

Profil ICC

Server MCP

Plugin Figma

Ekstensi VS Code

Alternatif