Barokit

🎨カラーコード変換 (HEX ↔ RGB ↔ HSL)

HEX、RGB、HSLカラーコードを相互変換。デザイナーと開発者向け無料ツール。

🔒 ブラウザ内処理ウォーターマークなし登録不要

使い方

  1. 1希望する形式のカラーコードを入力するか、カラーホイールから選択します。
  2. 2他の形式のコードに自動変換されて表示されます。
  3. 3希望するコードをコピーボタンで取得します。

よくある質問

HSLは何が違うのですか?+

HSL(色相、彩度、明度)は色を直感的に調整するのに便利です。同じ色の明るさだけを変えたいときHSLがRGBより簡単です。

HEXとRGBは同じ色ですか?+

はい。表記方式が違うだけです。#FF0000 = rgb(255, 0, 0) = 赤です。HEXは短く慣れているのでCSSでよく使われます。

透明度(alpha)も含まれますか?+

RGBA、HSLA、HEX 8桁(#RRGGBBAA)でアルファチャネルを表現できます。

デザイン用にどの形式が良いですか?+

CSSはHEXまたはhsl()、デザインツール(Figma)ではHEX 8桁、印刷用はCMYK(本ツール非対応)です。

CMYKも変換できますか?+

現在はRGBベースのカラーのみ対応しています。CMYKは印刷用で別途専門ツールが必要です。

ウェブサイトのカラー抽出にも良いですか?+

[画像カラー抽出]ツールと併用するのが良いです。画像からカラーパレットを抽出してから各色をHSLに変換してデザインシステムを作りましょう。

関連ツール