OSS探訪
GitHubで見るプロジェクトサイト

CSS Color 4を含む多数のcolor spaceを相互変換し、gamut mapping・DeltaE・interpolationをJavaScriptから扱う

OSS規模スコア 192.5OSS健全度 81更新ペース 5 Commit/30日
スコアの見方

OSS規模スコアはStars・Watchers・Forks・Contributorsを対数圧縮して重み付けした現在の規模指標（上限なし）です。発掘スコアは現在のOSS規模スコアから発掘時点のOSS規模スコアを引いた値、更新ペースは直近30日Commit数、成長モメンタムは直近の観測期間におけるOSS規模スコア差、OSS健全度は取得できた更新状況・Community Health・Releaseの0〜100評価です。

Stars
2,308
主要言語
JavaScript
ライセンス
MIT
リポジトリ最終更新
2026/09/28
ページ内ナビ

概要

Color.jsはCSS Color specificationのeditorらが開発するcolor conversion・modification libraryです。sRGB、Display P3、Lab/LCh、OKLab/OKLCh、REC.2100等を同じAPIで扱い、gamut mapping、DeltaE、chromatic adaptation、interpolation等のcolor science処理をbrowser/Nodeから利用できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：

主な特徴

多数のcolor spaceを共通object modelで相互変換する

各Color objectは座標とcolor spaceを持ち、sRGB、Display P3、Lab/LCh、OKLab/OKLCh、REC.2100等の間をto()等で変換できます。

出典：[1]

gamut mapping・DeltaE・chromatic adaptationを扱う

単純なchannel clippingだけでなくgamut mapping、複数のDeltaE方式、BradfordやCAT16等のchromatic adaptationを提供し、色差やdisplay gamutを意識した処理を構成できます。

出典：[1]

object APIとtree-shakeableなprocedural APIを選ぶ

複数操作に向くColor object APIと、performanceやbundle sizeを意識したprocedural APIがあり、必要なcolor space moduleだけをimportする構成も可能です。

出典：[1]

向いている用途

wide-gamut UI・color tool・visualizationで色変換を正確に扱いたい場合に向く

CSS Color 4形式、Display P3、OKLCH等をbrowser support差に左右されずparse・変換したいfrontend toolやdesign utilityに適します。

出典：[1]

導入前の確認

color spaceとgamutの違いをoutput側まで明示する

wide-gamut colorをsRGBへ出力するとgamut外になる場合があります。toString時のgamut handlingやoutput spaceを明示し、表示環境に合わせたmappingを選びます。

出典：[1]

module構成を選びbundle sizeを管理する

全module込みbundleだけでなくsrcからspecific moduleをimportできます。frontendでは必要なspace・DeltaE処理だけを選び、tree-shaking結果を確認します。

出典：[1]

0.7.1へ更新してbundlerのspace accessor regressionを避ける

v0.7.1はbundler環境でcolor.oklch.l等のspace accessorが壊れる0.7.0のregressionを修正しています。npm packageも0.7.1が公開されているため、0.7系ではpatch versionを固定します。

出典：[2][3]

参考にした公式資料

  1. [1]Color.js v0.7.1 README(2026-10-03)
  2. [2]Color.js v0.7.1 release(2026-10-03)
  3. [3]colorjs.io 0.7.1 npm package(2026-10-03)
  4. [4]Color.js MIT license(2026-10-03)
編集部からの補足

単純なhex変換だけでなくwide gamutやperceptual color spaceまで正しく扱いたいUI・visualizationに向きます。表示先のbrowser gamutと最終output spaceを決めずに変換を重ねると意図しないclippingが起きるため、color pipeline全体で基準を決めてください。

3ステップで試す

  1. 1

    Color.js 0.7.1をinstallする

    npmで公開されている0.7.1をversion固定して追加します。

    npm install colorjs.io@0.7.1
  2. 2

    OKLCHからsRGBへ変換する

    Color objectへCSS Color形式を渡し、別のcolor spaceへ変換してserializeします。

    node --input-type=module -e 'import Color from "colorjs.io"; const c=new Color("oklch(60% 0.2 30)"); console.log(c.to("srgb").toString())'
  3. 3

    Display P3との色差を計算する

    wide-gamut colorを含む2色のDeltaEを計算し、color science APIが利用できることを確認します。

    node --input-type=module -e 'import Color from "colorjs.io"; const a=new Color("red"); const b=new Color("color(display-p3 1 0 0)"); console.log(a.deltaE(b,"2000"))'
公式READMEで確認

成長

成長の推移 · 直近30日

2,308 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）
5
Open PR
13

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る
GitHubで見る

GitHub Topics

  • cielab
  • color
  • color-palette
  • color-spaces
  • esm
  • oklab
  • oklch
  • rec2020
  • srgb
  • display-p3
  • interpolation
Stars
2,308
Forks
100
Watchers
18
Open Issues
81
Contributors
51
所有者種別
Organization
主要言語
JavaScript
ライセンス
MIT
リポジトリ最終更新
2026/09/28
関連記事を投稿する

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

情報の誤りを報告

掲載内容に誤りや古い情報があればお知らせください。

このページを読んで、次に何をすればよいか分かりましたか？