もう一つのTS/JSカラーライブラリ(追加のステップで)

こんにちは

開始する前に、あなたが読んだり、気にしないし、コードを参照したい場合は、迅速かつ汚れた例を参照してくださいにスクロールダウンします.より詳しい情報と例についてはDocumentation リソースまたはGitHub Repo .
過去数ヶ月間、私は徐々に色変換と操作ライブラリを書いている.@skinnypete/color , 私のオフの時間と最終的にNPMにパッケージを公開している.
プロジェクトはまだ積極的に開発されているが、使用可能なポイントであり、フィードバックを得るといくつかのコミュニティサポートも有益であろう.
プロジェクトの詳細については

NPM

Documentation

GitHub Repo

ああ、私はそれがタイプスクリプトで書かれている言及?それで、すべてはタイプセーフです.しかし、TSがあなたの味でないならば、心配しません;パッケージもJSをサポートします.

何をするかなぜ私はそれを使用する必要があります？

@skinnypete/color 近代的な、軽量、カラー操作＆変換ライブラリです.これは、特定のカラーモデルを必要とするさらに複雑な操作に色を変更するような単純なタスクに使用することができます.
提供するものもあります.

サポート複数のカラーモデル

理研

HSL

HSV

HWB

受け入れるCSS color-names

フル機能と使いやすい(ビルダーのパターン設計)

タイプスクリプトで書かれた

たくさんのQOL魅力

ユニットテストとカバレッジ

色のスペース内で直接ではなく、単一のカラーモデルに依存して出力値を生成するために

依存関係のない

でもどうして？

はい、私は他の優れたライブラリが色を扱うときに知っているし、正直に、私のお気に入りはかなりの間今されているcolor . しかし、私は他のライブラリ(より良いか悪いか)の間で見たよりも、それにアプローチしたかったです.

のデザイン@skinnypete/color 各々のカラーモデルがそれ自身のインスタンスとして扱われるので、異なる.ほとんどのライブラリは、1つのモデルを使用します.ほとんどの場合、RGBAであり、CSSの色値やHEXなどの出力値を生成するモデルを使用します.このライブラリは、それぞれのモデルを別々に扱い、モデル内で直接操作を行います.使いやすいAPIと消化できる構造を提供している間、これは敏感なプロジェクトのためにモデルの分離と正確さを保持するのを許します.

まあ、それはクールです。どうやって使うの？

まあ、それはかなり簡単です.

import {RGBA, HSLSpace } from '@skinnypete/color'

const hsl: HSLSpace = RGBA.fromCssColor('RebeccaPurple')
    .lighten(10)
    .rotate(0.45)
    .fade(25)
    .toSpace('hsl');

console.log(hsl.toString())     // hsl(315,50%,44%)
console.log(hsl.toHexString())  // #a8388c
console.log(hsl.toObject())     // { hue: 315, saturation: 50, lightness: 44 }

ここで何が起こっているのかを壊します.

import {RGBA, HSLSpace } from '@skinnypete/color' - もちろんライブラリをインポートします

RGBA.fromCssColor('RebeccaPurple') - RGBAカラーモデル空間を使用して新しいインスタンスを生成しますCSS color name

lighten(10) - RGBAモデルを10 %明るく

rotate(0.45) - RGBAモデルの色相を45 %回転させます(比率値の0 - 1と1 - 100の両方を使用できます).

fade(25) - フェードザットalpha RGBAモデルの25 %

toSpace('hsl') - 現在の色空間をHSLカラーモデルに変換する

toString() - 有効なCSSカラー値を返す

toHexString() - カラーモデルを16進数の色の値に変換する

toObject() - カラーモデルデータをオブジェクトとして返す

あなたの色を操作し、変換するために利用可能な他の多くの方法がありますこれらの方法についてもっと学ぶためにdocumentation resource サイト.

現在、これらのモデルを使用することができます

現在はまだ追加されていますが、次のようになります.

RGBA (赤,緑,青,アルファ)

HSL(色相、彩度、明度)

HSV (色相,彩度,値)

HWB(色相、白さ、黒さ)

すぐに来る™)

あなたに感謝

正直、あなたがこのすべてを読んだならば、ありがとう.うまくいけば、私は十分にあなたがカラーライブラリを探してNPMをスキミングしている次の時間を考慮するために納得していた.

詳しく知る@skinnypete/color , そして、あなたが質問をするか、ちょうどそれが吸うと言って欲しいならば、知らせてください.