ForHosting KIT · 画像の編集・解析

HSV の明度を下げて色を暗くするツール

色相を変えずに色を暗くします。HSV明度を25パーセント減らすと#40A0FFは#3078BFになり、色相と彩度は同じまま、RGBとHSVの数値も一緒に表示されます。ブラウザで無料で使えます。

無料
ブラウザで動作
登録不要
データは端末の外に出ません

無料で実行 API仕様を見る

ご利用方法ウェブAPIメールTelegramアプリ近日

計算例

入力した場合

色: #40A0FF
量: 25

結果

元の値: #40A0FF
Hex: #3078BF

この HSV カラー減光ツールは、色相と彩度を保ったまま明度成分を下げ、16 進カラーの暗い版を作成します。3 桁または 6 桁のカラーと、現在の明度から取り除く割合をご指定ください。正規化した元の色、暗くした 16 進コード、整数の RGB チャンネル、処理後の HSV 成分を返します。固定された算術処理と明示的な丸めを使うため、同じ入力からは常に同じ結果が得られます。無効な色や 0 から 100 の範囲外の割合は、推測や暗黙の補正を行わず、明確な入力エラーとして報告します。

HSV 明度を下げたときの色の変化

HSV は色を色相、彩度、明度で表します。色相は色相環上の位置、彩度は中立な灰色からの距離を示し、明度は最も明るい RGB チャンネルを百分率で表します。このツールが変更するのは最後の成分だけです。

まず 16 進コードを赤、緑、青の各チャンネルへ変換し、それらを HSV に変換してから、現在の明度に「1 から指定量を 100 で割った値を引いた係数」を掛けます。したがって 25 パーセントを指定すると、固定の 25 ポイントを引くのではなく、元の明度の 75 パーセントが残ります。

この相対的な方式は、すでに暗い色にも自然に対応し、負の明度を生じさせません。境界を明確にするため、ゼロでの下限処理も明示的に行います。色相と彩度の数値は維持されるため、鮮やかな青は同じ性質の青のまま暗くなります。

0 パーセントでは表記の正規化以外は変わらず、100 パーセントでは明度がゼロになり黒を返します。HSV 明度は最大 RGB チャンネルに基づくため、HSL 輝度を下げる処理とは異なります。

有効なカラーと割合の指定方法

color には、先頭のハッシュ記号を付けても付けなくてもよい、3 桁または 6 桁の CSS 形式の 16 進文字列をご指定ください。#3AF のような短縮形は、変換前にチャンネルごとに展開されて #33AAFF になります。英字は大文字と小文字のどちらでも受け付け、正規化した元の値は大文字 6 桁で返します。

この機能は不透明色だけを変換し、背景との透明合成を行わないため、4 桁または 8 桁のアルファ付き形式は拒否します。文字列全体の前後にある空白は除去しますが、コード内部の空白や記号は無効です。必須の amount は、現在の HSV 明度から取り除く割合です。

0 以上 100 以下の有限な数値である必要があり、精密なトークン生成には小数も使えます。フォームとの互換性のため数値文字列も受け付けますが、空文字列、数値でない文字、無限大、負数、100 を超える値は拒否します。無効な要求を既定色に置き換えたり、割合を黙って範囲内へ収めたりしないため、公開前に設定ミスを検出できます。

成功時には元の色、暗くした 16 進値、適用量、RGB 整数、度数と百分率で表した HSV が返ります。

活用例

操作状態の色を生成

基準トークンに明示した HSV 明度の低減率を適用し、ホバー、アクティブ、押下状態の色を再現可能に作成します。

HSV の階調を構築

1 つの元色に複数の割合を適用し、丸め誤差を蓄積させずに安定した 16 進値を書き出します。

画像処理工程を統一

ブラウザーのプレビュー、サーバーのビルド、テスト、生成ドキュメントで同じ決定論的な調整を使用します。

よくある質問

割合は具体的に何を減らしますか？

現在の HSV 明度から指定割合を取り除きます。たとえば 20 パーセントなら、元の明度の 80 パーセントが残ります。

HSV 明度と HSL 輝度は同じですか？

いいえ。 HSV は最大 RGB チャンネルに基づき、HSL は最大と最小チャンネルの中点を使うため、暗くした結果が異なる場合があります。

どのカラーフォーマットを使えますか？

先頭のハッシュ記号の有無を問わず、3 桁または 6 桁の 16 進文字列をご使用ください。アルファ付き形式と色名は拒否します。

0 と 100 パーセントではどうなりますか？

0 では色を保って 16 進表記だけを正規化します。100 では HSV 明度をゼロにして黒を返します。

#40A0FFを25パーセント暗くするにはどうしますか？

色に#40A0FF、量に25を入力します。現在の明度の75パーセントが残り、結果は#3078BF（RGB 48, 120, 191）です。色相と彩度は変わりません。

開発者向け — APIアクセス

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

エンドポイント

POSThttps://api.kit.forhosting.com/color/dim-hsv

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

お使いのスタックから呼び出す

curl -X POST https://api.kit.forhosting.com/color/dim-hsv \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"color":"#40A0FF","amount":25}'

const res = await fetch("https://api.kit.forhosting.com/color/dim-hsv", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "color": "#40A0FF",
    "amount": 25
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/dim-hsv",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "color": "#40A0FF",
    "amount": 25
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/dim-hsv", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"color":"#40A0FF","amount":25}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"color":"#40A0FF","amount":25}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/dim-hsv", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "color": "#40A0FF",
  "amount": 25
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.dim_hsv",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

料金

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

エラー

HTTP	コード	意味
`401`	`unauthorized`	APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
`402`	`insufficient_balance`	残高が不足しています。チャージ後に再度お試しください。
`404`	`unknown_type`	指定されたタスクタイプは存在しません。タイプ名を確認してください。
`429`	`rate_limited`	リクエストが多すぎます。しばらく待ってから再度お試しください。

技術的な注記

有効なカラーと割合の指定方法

color の別名には hex、amount の別名には percent または percentage を使用できます。

デザイン工程で決定論的な出力を使う方法

ボタンの押下状態を作る、グラフの色を暗くした版を確認する、画像ソフトを導入せずに明るさの段階を比べる、といった作業にはブラウザーツールをご利用ください。計算はネットワークや時計を参照せず、乱数もモデルも使わないため、バージョン管理するテストデータやキャッシュキーに利用できます。階調を作るときは結果を連鎖させず、同じ基準色に複数の割合を適用すると丸め誤差が蓄積しません。HSV 明度以外の HSL や OKLCH の明るさ、アルファ合成、目標コントラストには、それぞれ専用の変換をご利用ください。テーマコンパイラー、デザイントークンのパイプライン、ドキュメントのビルド、アセットサービスで同じ変換を繰り返す場合は API が適しています。成功した API の各項目は $0.002 からご利用いただけます。RGB チャンネルは HSV から戻した後にだけ最も近い整数へ丸め、表示する HSV フィールドは小数点以下 6 桁に丸めます。この固定方針により長い浮動小数点の端数を避けながら、検証に十分な精度を残します。返される 16 進値は常に大文字 6 桁で、CSS カスタムプロパティ、JSON トークン、canvas の塗りにそのまま使えます。

技術的な質問

無効な割合は範囲内に補正されますか？

いいえ。未指定、有限でない値、負数、100 を超える値は invalid_input を返し、設定ミスを明示します。

API の料金はいくらですか？

成功した API の各項目は $0.002 からご利用いただけます。同じ決定論的ソルバーはブラウザーで無料実行できます。

KITの完全なドキュメントを見る →

HSV の明度を下げて色を暗くするツール

無料で実行

計算例

HSV 明度を下げたときの色の変化

有効なカラーと割合の指定方法

活用例

操作状態の色を生成

HSV の階調を構築

画像処理工程を統一

よくある質問

関連ツール

開発者向け — APIアクセス

エンドポイント

お使いのスタックから呼び出す

リクエスト例

レスポンス例

料金

エラー

技術的な注記

有効なカラーと割合の指定方法

デザイン工程で決定論的な出力を使う方法

技術的な質問

ありがとう