CSSカラー設定方法：HEX、RGB、HSLの簡易比較

CSS では、色の名前、16 進数の色、RGB()、HEX()、HSL() など、色の値を表すさまざまな方法があります。では、HEX、RGB、HSL の違いはご存知ですか?次の記事では、HEX、RGB、および HSL を簡単に比較して、その違いを確認します。

HEX、RGB、HSL の違いと、それぞれのさまざまな利点をご存知ですか?

この問題を詳しく説明する前に、各色の方法が何を意味するかを簡単に理解しましょう。

カラー メソッドの定義

Hex カラー値は、特に開発者の間で CSS カラー プロパティを設定する最も一般的な方法の 1 つです。ほぼすべてのブラウザがサポートしています。

紫は次のように 16 進カラー コードで定義できます。

800080

ここでの色の形式は #RRGGBB です。ここで RR (赤)、GG (緑)、および BB (青) は 00 と FF の間です。 16 進整数 色の濃さを表します。

HEX と RGB の違い

RGB または Red/Green/Blue (つまり、赤/緑/青) ) CSS で色を定義するためにも使用され、もう 1 つの一般的な方法です。 RGB カラースキームは、r、g、b の値が 0 ～ 255 の整数である 3 チャネル形式です。 RGB カラーの例を次に示します。

rgb(128, 0, 128)复制代码

上記の RGB カラー コードの実装は、上記の HEX カラーと一致しています。 16 進数のカラー コードのほうが覚えやすく、入力しやすいのに、なぜ RGB を使用するのか疑問に思われるかもしれません。

各色の方法には、それぞれ独自の利点があります。 RGB の利点は、色に不透明度を追加できることです。

これが RGBA の強みです。 CSS3 では、色の不透明度を示すために、追加の alpha チャネルが RGB カラー スキームに追加されました。

翻訳者注: 実は、16 進数もサポートしています。たとえば、50% の黒は #00000088 で、最後の 2 桁は 16 進数の透明度で、範囲も # # です。 #00 から FF まで。

新人、HSL!

HSL は色相、彩度、明度を表し、CSS で色を宣言するもう 1 つの方法です。紫の HSL カラー値は次のように指定できます。

hsl(300, 100%, 25.1%)

彩度は、混合色に含まれる色の度合いを指し、色が明るいか鈍いかを制御します。

HSLA RGBA と同様、HSL の拡張です。 4 番目のチャネルは、RGBA や 16 進アルファと同様に、色の不透明度を表します。不透明度は RGBA と同様に 10 進数値で指定されます。1 は完全に不透明、0 は完全に透明、その間のすべての値は部分的に不透明を意味します。

CSS で色を指定する最良の方法は何ですか?

私のアドバイスは、あなたが純粋な開発者で、プロジェクトを完成させたいだけであれば、最も使い慣れているカラー方法を使い続けることです。

ブラウザは使用するカラー形式をあまり気にしないため、異なるメソッド間でパフォーマンスに微妙な変化があったとしても、パフォーマンスの差は無視できる程度です。

さらに、使いやすさや開発者への決定の影響などが心配な場合は、自分の状況に最適なアプローチを見てみましょう。

まずは 16 進表記から始めましょう。 16 進数は表記が短いため、非常に魅力的です。多くの開発者は、RGB や HSL と比較して、16 進値は非常に読みやすく、お気に入りのテキスト エディタにコピーしやすいことに気づいています。

RGB はよく知られており、古いバージョンの Internet Explorer (9 以前) でサポートされています。

HSL は人間にとって理解しやすいように設計されています。

RGB や Hex などの形式は、人間が判読できるよりも機械が判読しやすい形式です。その代わり、HSL は人間の理解を深めるために設計されています。 HSL は、より新しく自然な色処理方法です。

必要な色を取得するためにいくつかの数値を渡す必要がある 16 進数や RGBA とは異なり、HSL では色相を使用して色を定義し、2 番目と 3 番目のパラメータのパーセンテージを使用して彩度を取得できます。希望の明るさレベルを選択します。

Web ページのタイトルは #578557 または rgb(87, 133, 87) にする必要があると言ったら、推測できますか?それは何色ですか？いいえ、あなたがコンピューターでない限り。しかし同時に、HSL で色を与えるとします: hsl(120, 21%, 43%)?これで少しは推測しやすくなりましたね?色相値 120° は、純粋な緑色を意味します。次に、彩度は 61% で、濃い灰色 (彩度の非常に低い緑色) から 21% 離れていることを示しています。最後に、43% の明るさは、色が単色から暗い側に 7% 進むことを意味します。

わかりました。ホバーするとボタンの色を明るくし、クリックすると暗くしたいとします。 HSL の使い方は驚くほど簡単です。明るさの値を増減するだけです。それだけです。 ！ただし、ツールやデザイナーの助けがなければ、これを HEX または RGB で行うことはできません。

HSL は、現実世界を模倣した直感的な色表記です。

たとえば、水色の色の紙を考えてみましょう。 3 つの形式の色の値は次のとおりです:

如你所见，Hex 和 RGB 值已经被改到面目全非了，而对于 HSL，只有一个值发生了变化。毫无疑问，在构建配色方案时，HSL 是最有用的。以底色为基础，根据需要调整饱和度和亮度，就是这样！有了 HSL，建立一个配色方案，简直就是小菜一碟。

最后，这一切都取决于个人喜好！

现在你可能认为 HSL 是最好的颜色表示法。但是，正如我上面提到的，旧版本的 Internet Explorer 不支持 HSL。同样，每种颜色格式都有其优点和缺点。问题是，这并不重要。

最重要的是尽可能保持在项目中使用到的类型的一致性，因为它有助于提高生产力。

• 和其他两种颜色相比 Hex 有不支持透明度的限制（译者注：Hex 是支持的……）
• 不使用特定工具来调整 RGBA 颜色是很很困难的
• 旧浏览器不支持 HSLA
  • 如果你所服务的浏览器支持 HSLA 那就忽略这条吧！你可以选择使用任何格式！

在选择在项目中设置 CSS 颜色属性的最佳方法时，你可以考虑以下因素。

1、使用与开发团队其他成员相同的格式来提高可维护性。

2、如果你已经熟悉 RGB 格式，请使用它。

3、如果你的目标访问者使用严重过时的浏览器访问你的网站，请使用 Hex，或者使用如下后备代码：

p {
    color: #FF0000;
    color: hsla(0, 100%, 50%, 1);
}

4、如果以上三点还是没能让你决定使用哪一种，请使用 HSLA。HSLA 允许你像 RGBA 一样使用透明度，而且更具备可访问性。

有哪些替代方案？

除了上面提到的方法，还有一些其他方法可以用来在 CSS 中设置颜色属性。

• 使用颜色名称：所有现代浏览器都支持 140 个标准 CSS 颜色名称。颜色名称是代表特定颜色的关键字，如 coral。
• currentcolor 关键字：如果需要引用一个元素的颜色，可以使用这个关键字。
• HWB 值： HWB 代表色相、白度、黑度。虽然目前 HTML 不支持它，但它被建议作为 CSS4 的新标准。
• CMYK 值：CMYK 是青色、洋红色、黄色和黑色的组合。尽管计算机屏幕使用 RGB 值来显示颜色，但打印机通常使用 CMYK 颜色值来显示颜色。与 HWB 类似，CMYK 在 HTML 中尚不支持，不过也是被建议作为 CSS4 中的新标准。

最后

颜色在网页中起着至关重要的作用。在 CSS 中，我们能使用 RGB、Hex 和 HSL 等方法来定义颜色。在本文中，我们了解了用于在 CSS 中设置颜色属性的三种主要方法，以及它们的区别和各自的优缺点，还有可用于在 CSS 中定义颜色属性的其他替代方法。

尽管 HSLA 由于其人类可读性而比其他两种方法略有优势，但如果不是针对特定情况，则无关紧要。你可以使用任何你觉得舒服的方式。

看看不同的优缺点，每种方法都优于其他方法，总而言之，决定使用哪种方式在 CSS 中设置颜色属性应取决于以下三个因素：

• 偏好
• 可维护性
• 性能与效果

那么，你更喜欢用什么来设置 CSS 中的颜色？Hex、RGBA、HSLA 或其他什么？原因又是什么？在评论区告诉我吧。 

英文原文地址：https://link.juejin.cn/?target=https%3A%2F%2Fblog.bitsrc.io%2Fhex-vs-rgb-vs-hsl-what-is-the-best-method-to-set-css-color-property-f45d2debeee

原文作者：Nethmi Wijesinghe

更多编程相关知识，请访问：编程视频！！

以上がCSSカラー設定方法：HEX、RGB、HSLの簡易比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。