1 回の API 呼び出しで 16 進数、RGB、HSL の間で色を変換

色変換の計算は、一度書いたら微妙に間違って、次から次へとコピーするようなコードです。 プロジェクトは永遠に続きます。 16 進数から RGB への変換は簡単です。 RGB から HSL への変換には、1 度ずれたバグが発生します 生きる。 このエンドポイントは 3 つの形式のいずれかで色を受け取り、3 つすべてを一度に返します。 変換関数を持ち歩くのをやめます。

リクエスト

応答により、16 進数の文字列が得られます。 {`{ r, g, b }`} オブジェクトと {`{ h, s, l }`} 一緒にオブジェクト:

入力形式は関係ありません。 合格 rgb(62, 201, 151) または HSL 文字列を使用すると、 同じ 3 つの表現が戻ってきます。 Hex は、 #:

1つのブランドカラーからデザイントークンスケールを生成

HSL は構築する価値のある形式です。 色相と明度を分離するので、 色相と彩度を一定に保ち、明度の値を段階的に変化させることにより、完全な色合いと色合いのスケールを実現します。 ブランドヘックスを一度 HSL に変換し、次に明度を調べて 50 ～ 900 のスケールを生成します。 デザインシステムには次のものが必要です。

これをビルドステップで実行し、出力を CSS 変数ファイルに書き込みます。 コーディネートが得られます 単一のソース カラーからパレットを作成し、ブランド カラーを変更するとスケール全体が再生成されます。

CMS に貼り付けられたカラーを正規化する

コンテンツ エディターは、デザイン ツールがエクスポートする形式 (Figma からの 16 進数、 rgb() スクリーンショット ツールから、CSS スニペットから HSL を取得します。 貼り付けたすべての値を実行する 正規化された 16 進数を保存して保存するときにエンドポイントを経由します。 レンダリング コードは次の 1 つを処理します。 形式を変更すると、エディターは都合のよいものを貼り付け続けます。

どこに当てはまるか

ブラウザーでの対話型 UI 計算の場合は、ローカル関数で十分です。 API がビルドに組み込まれる ステップ、バックエンド、単色パッケージのない言語: 単一の HTTP 呼び出しが 依存性。 カラー変換は、botoi 上の約 200 の単一目的エンドポイントの 1 つであり、すべて背後にあります。 5 リクエスト/分で 1 つのキーが無料。

で変換を試してください。 インタラクティブな遊び場、 閲覧する 完全な API ドキュメント、 または接続します MCPサーバー クロードまたはカーソルから直接色を変換します。