HTML Color Codes

RGB HEX HSLフォーマットのHTMLカラーピッカー

カラーピッカーを使用して、ウェブサイト用のHTML CSSカラ―コードを簡単に取得し、HEX、RGB、HSL、HSVの間でカラーフォーマットを変換します。

色を選択

カラ―値を入力

またはHTML5ピッカーを使用

選択された色

レッド: 0
グリーン: 255
ブルー: 255
HUE (度): 180
明るさ: 0.7
Alpha: 1
Hex: #00ffff
RGB: rgb(0, 255, 255)
HSL: hsl(180, 100%, 50%)
色グループ: Cyan
共有:
CSS3カラーの例

<style>
  div {
    color: #00ffff;
    color: rgb(0, 255, 255);
    color: hsl(180, 100%, 50%);
  }
</style>
最も暗いおよび明るいスタイル

<style>
  .darken {
    color: rgb(0, 230, 230);
  }
  .lighten {
    color: rgb(25, 255, 255);
  }
</style>

画像から色を取得

get pixel color from pic

色を選択してパレットを作成

select color and create palette

HTMLカラ―コードとは？

HTMLカラ―コードは、ウェブデザインにおいて色を指定する方法です。これらのコードは、HTMLとCSSでテキスト、背景、ボーダーなどの要素の色を定義するために使用されます。HTMLカラ―コードを理解することは、視覚的に魅力的で一貫性のあるウェブページを作成するために不可欠です。

例えば、赤色は次のフォーマットで識別できます：

HTMLカラ―コードの種類


16進数カラ―コード：
  • HTMLとCSSで色を指定する最も一般的な方法は、16進数（hex）カラ―コードを使用することです。hexカラ―コードは、赤、緑、青（RGB）成分の組み合わせによって定義された6桁の数字と文字の組み合わせです。
  • フォーマット: #RRGGBB
  • 例: #FF5733はオレンジ色の一種を表します。
  • それぞれの桁は、赤、緑、青の強度をそれぞれ00（強度なし）からFF（最大強度）までの範囲で表します。
RGBカラ―コード：
  • RGBカラ―コードは、赤、緑、青の成分に基づいて色を定義します。
  • フォーマット: rgb(赤, 緑, 青)
  • 例: rgb(255, 87, 51)は、#FF5733のRGB等価です。
  • それぞれの成分（赤、緑、青）は0から255の範囲の数値で指定されます。
RGBAカラ―コード：
  • RGBに似ていますが、不透明度のためのアルファ成分が含まれています。
  • フォーマット: rgba(赤, 緑, 青, アルファ)
  • 例: rgba(255, 87, 51, 0.5)は、50%の不透明度で同じ色を指定します。
HSLカラ―コード：
  • HSLは色相（Hue）、彩度（Saturation）、明度（Lightness）を表します。
  • フォーマット: hsl(色相, 彩度%, 明度%)
  • 例: hsl(9, 100%, 60%)は、#FF5733の別の表現方法です。
  • 色相は色相環上の度合い（0から360）、彩度はパーセント（0%はグレースケール、100%は完全な色）、明度もパーセント（0%は黒、100%は白）で表されます。
HSLAカラ―コード：
  • HSLに似ていますが、不透明度のためのアルファ成分が含まれています。
  • フォーマット: hsla(色相, 彩度%, 明度%, アルファ)
  • 例: hsla(9, 100%, 60%, 0.5)は、50%の不透明度で同じ色を指定します。
HTMLカラ―コードの使用方法：

HTMLカラ―コードは、ウェブ要素をスタイル設定するためにさまざまなCSSプロパティで使用できます。例えば：

<style>
    .text-color {
        color: #FF5733;
    }
    .background-color {
        background-color: rgb(255, 87, 51);
    }
    .border-color {
        border: 2px solid hsl(9, 100%, 60%);
    }
</style>
<p class="text-color">This text is orange.</p>
<div class="background-color">This background is orange.</div>
<div class="border-color">This border is orange.</div>

この例では、テキスト、背景、およびボーダーが異なる種類のHTMLカラ―コードを使用してスタイル設定されていますが、すべて同じオレンジ色の色合いを表しています。

HTMLカラ―コードはウェブデザインの基本的な側面であり、開発者が色を正確に定義および操作できるようにします。16進数、RGB、RGBA、HSL、およびHSLAカラ―コードを理解することで、視覚的に一貫性があり魅力的なウェブページを作成し、ユーザー体験を向上させることができます。