AIStacker
メディア

概要

カラーコンバーター

HEX、RGB、HSL形式の間で色を即座に変換し、ライブプレビューとコントラスト確認が可能です。

カテゴリ hub

メディア

悩み

2

FAQ

3

Color Inspector

OKLCH

oklch(43.7% 0.120 269)

RGB

rgb(99, 102, 241)

Preview Mode

#6366F1

Contrast

White Text

Safe for accessibility

This color works best for primary brand elements.
Tailwind Shades (50-900)
Click shade to copy hex

解決できる問題

オンラインでHEXをRGBに変換するには?

このツールに16進数のカラーコードを入力するだけで、即座にRGB値を取得できます。ライブプレビューも表示されます。

アクセシビリティのための色のコントラストを確認するには?

ツールが自動的に背景色に適したテキスト色(白または黒)を判定するため、コントラストの目安として利用できます。

このワークフローのガイド

Supporting guides that connect this tool to the broader category workflow.

カテゴリ hub を開く

とは

カラーコンバーター とは?

ウェブ上の色は通常、HEX(16進数)、RGB(赤、緑、青)、HSL(色相、彩度、輝度)の3つの主要な形式で表現されます。このツールは、視覚的な正確さを維持しながら、これらの形式をシームレスに切り替える方法を提供します。

の使い方

カラーコンバーター の使い方

入力フィールドにカラーコード(例:#6366f1)を入力するか、カラーピッカーを使用してカスタムの色を選択します。RGB と HSL の値はリアルタイムで更新されます。各値の横にあるコピーボタンを使用して、CSS やデザインソフトで使用できます。

使用例

使用例

入力: #6366f1

RGB: rgb(99, 102, 241)
HSL: hsl(239°, 84%, 67%)
プレビュー: メインボタンに最適な鮮やかなインディゴカラーです。

主な使用シーン

主な使用シーン

1. デザインスペック(FigmaやSketch)をCSS用のRGBまたはHSL値に変換する。

2. テキストのコントラストを最適化するために、色が「暗い」か「明るい」かを判定する。

3. ランダムカラー生成機能を使用して、異なるシェードを試す。

4. フロントエンド開発やUIプロトタイピングのための素早い色選択。

よくある質問

よくある質問

3桁のHEXコードはサポートしていますか?v
はい。#F00 のような短縮形式は、変換時に自動的にフル形式(#FF0000)に展開されます。
RGB と HSL の違いは何ですか?v
RGB は画面が光を発する方法(赤、緑、青)に基づいています。一方、HSL は人間にとってより直感的で、色相(Hue)、鮮やかさ(Saturation)、明るさ(Lightness)で色を表現します。
変換の精度はどうですか?v
非常に正確です。ツールは色空間変換のための標準的な数学公式を使用しており、すべての形式で値の一貫性が保たれます。