CSSの色を変換する方法

CSS カラー変換

カラーは Web デザインと開発において非常に重要な要素です。次のような状況に遭遇したことがある人は多いと思います。 デザイン草案で、デザイナーが好みの色の値を指定しますが、その色の値を CSS で直接使用することができません。このとき、CSS カラー値に変換するためにいくつかの色変換操作を実行する必要があります。

ここでは、一般的な色変換方法とその使い方を紹介します。

1. RGB 変換

RGB は、最も一般的なカラー形式の 1 つです。 Web デザインでは、色を表現するために 16 進数の RGB 形式を使用することがよくあります。

RGB では、赤、緑、青の 3 原色の色の値が 0 ～ 255 の数値であり、異なる色の光の強度を表します。

たとえば、赤のRGB値を赤(255,0,0)、緑(0,255,0)、青(0,0,255)と表します。

RGB を CSS カラー値に変換するには、RGB 値を 255 で除算し、CSS で RGB (赤、緑、青) 形式にフォーマットする必要があります。次のようになります。

rgb(255, 0, 0) /*红色*/
rgb(0, 255, 0) /*绿色*/
rgb(0, 0, 255) /*蓝色*/

2. 16 進数変換

もう 1 つの一般的なカラー形式は、16 進数 (Hex) 表現です。 16 進数表記では、色の値は 6 つの 16 進数を使用して表されます。 CSS では、# 記号を使用します。

16 進表記では、各 2 桁の数字が赤、緑、青の 3 原色の輝度値を表します。数値の範囲は 00 ～ FF で、0 ～ 255 の値を表します。たとえば、赤の 16 進値は #FF0000、緑の 16 進値は #00FF00、青の 16 進値は #0000FF です。

変換方法は非常に簡単で、#と16進数6桁を取り除いてRGB形式で表現するだけです。

#FF0000 /*红色*/
#00FF00 /*绿色*/
#0000FF /*蓝色*/

3. HSL 変換

HSL は非常に直感的なカラー形式で、色相、彩度、明るさの 3 つのパラメータが含まれています。

Hue (色相) 値はカラープレート上の色の位置を表し、値の範囲は 0 ～ 360 です。彩度は色の深さを 0% から 100% の範囲で表します。明るさ（Lightness）は色の明暗を表し、値の範囲も0%から100%です。

変換方法も非常に簡単で、以下に示すように hsl (色相、彩度、明度) 形式を使用するだけです。

hsl(0, 100%, 50%) /*红色*/
hsl(120, 100%, 50%) /*绿色*/
hsl(240, 100%, 50%) /*蓝色*/

4. HSLA 変換

#HSLA は HSL 形式の拡張バージョンであり、透明度 (アルファ) 値も含まれています。透明度の値の範囲は 0 ～ 1 で、0 は完全な透明を表し、1 は完全な不透明を表します。

変換方法は HSL と似ていますが、hsla (色相、彩度、明度、アルファ) 形式で表現される透明度の値を最後に追加する必要がある点が異なります。例:

hsla(0, 100%, 50%, 0.5) /*半透明红色*/
hsla(120, 100%, 50%, 0.5) /*半透明绿色*/
hsla(240, 100%, 50%, 0.5) /*半透明蓝色*/

概要

Web デザインと開発では、さまざまなカラー形式を使用する必要があります。これらの色変換スキルを習得すると、開発効率が向上し、エラーの可能性が減るだけでなく、デザイナーのニーズをより適切に満たすことができます。

上記は一般的に使用される色変換方法です。ご参考になれば幸いです。

以上がCSSの色を変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。