カラーミキサー

Blend two colors by ratio using normal, multiply, screen, overlay, darken, or lighten blend modes。無料、プライベート、100%クライアントサイド。

param.blendModeparam.blendRatio

入力

例を試す:

出力

Local only

最近の履歴

履歴はまだありません

使い方

Enter two colors separated by a space or newline.
Select a blend mode and set the ratio.
View the blended result in HEX and RGB.

このツールを使うタスク

色を hex・RGB・HSL・名前付き形式の間で変換する

色の値を hex(#ff5733)、rgb()、hsl()、CSS の名前付きカラーの間で変換し、さまざまな文脈で使えるようにします。

ベースカラーからカラーパレットを生成する

1 つのベースカラーから、補色、類似色、トリアード、シェード/ティントのバリエーションを導出し、デザインシステムに活かします。

RGB 色を HEX に変換する(逆変換も)

色の値を rgb() と #rrggbb 表記の間で変換します。CSS 作業に欠かせないアルファチャネルの扱いにも対応します。

よくある質問

What blend modes are supported?: Normal (linear interpolation), multiply, screen, overlay, darken (min), and lighten (max) blend modes are supported.
How do I input the two colors?: Enter both colors separated by a space or newline (e.g. '#FF0000 #0000FF'). HEX and RGB formats are accepted.
What does the ratio parameter mean?: The ratio (0-100%) controls the blend amount. At 50%, both colors contribute equally in normal mode.

関連ツール

カラーコンバーター

Convert colors between HEX, RGB, HSL, HSV, and CMYK color spaces. Auto-detects input format。無料、プライベート、100%クライアントサイド。

カラーパレットジェネレーター

Generate color palettes from a base color: complementary, analogous, triadic, tetradic, or monochromatic schemes。無料、プライベート、100%クライアントサイド。

CSS グラデーションジェネレーター

Generate CSS gradient code for linear, radial, and conic gradients with custom angles and color stops。無料、プライベート、100%クライアントサイド。