Design

Color Converter

Convert colors between HEX, RGB, and HSL. Includes a color picker, live swatch preview, white/black contrast ratio, and a quick lightness-based palette.

ツール要約

このツールは構造化された入力を受け取り、サーバーへアップロードせずにブラウザで決定的な出力を返します。

ツール名: Color Converter
入力の目的: 変換・検証・分析するソースコンテンツを入力してください。
出力の目的: コピー・再利用・デバッグに適した正規化された出力を受け取ります。
入力例: #3b82f6
出力例: rgb(59, 130, 246) · hsl(217, 91%, 60%)

PickerHEX

#3b82f6

RGB

HEX

#3b82f6

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

Contrast on white: 3.68:1 · on black: 5.71:1

Palette

ツールの紹介

Convert colors between HEX, RGB, and HSL. Includes a color picker, live swatch preview, white/black contrast ratio, and a quick lightness-based palette.

ツール概要

HEX is compact, RGB is intuitive for mixing, and HSL is best for describing tints, shades, and hue shifts. This converter keeps all three in sync as you edit any one. The palette row shows five lightness-shifted variants of your base color, handy for picking hover, focus, or background tints. All computation is pure client-side — nothing is uploaded.

ユースケース

Use Color Converter when you need fast convert hex, rgb, and hsl color formats instantly with a visual picker, palette suggestions, and copyable outputs.
Handle design workflows directly in the browser with no install required.
Support SEO long-tail intent by covering quick checks, troubleshooting, and one-off conversions.

入力／出力の例

入力の目的

#3b82f6

出力の目的

rgb(59, 130, 246) · hsl(217, 91%, 60%)

入力の目的

#fff

出力の目的

#ffffff · rgb(255, 255, 255) · hsl(0, 0%, 100%)

よくある質問

Why is my 3-digit HEX auto-expanded?+

3-digit HEX is shorthand for the 6-digit version (#abc → #aabbcc). The tool normalizes to 6 digits so the value matches what CSS actually parses.

What does the contrast ratio mean?+

It is the WCAG luminance contrast ratio between your color and pure white or black. 4.5:1 is the AA threshold for normal text; 7:1 is AAA.

How is the palette generated?+

It takes the base color's HSL value and shifts lightness in ±20% and ±40% steps, keeping hue and saturation constant.

Share this tool

X Facebook LinkedIn WhatsApp Reddit Telegram Email

他のツールを見る

下記の Design カテゴリで関連ユーティリティを探す。

Design をすべて見る