CSS 色

下記の色構文コンバーターは、現在選択されている色の値を 赤緑青 (RGB), 16 進数 (HEX), 色相・彩度・明度 (HSL), and 色相・白色度・黒色度 (HWB) の CSS 色形式で表示します。ここでの RGB、HEX、HSL、HWB の色値はすべて、書き方は異なりますが、同じ色値を表します。

カラーピッカーで色を選択し、スライダーで不透明度を選択すると、RGB、HEX、HSL、HWB 値が更新されます。新しい色や不透明度の値を選ぶと、背景とスライダーの色はそれぞれ CSS プロパティの background-color と accent-color によって更新されます。

この色構文コンバーターのコードを見るには、 GitHub でソースをご覧ください。

• color
• opacity

• @color-profile
  • components 記述子
  • rendering-intent 記述子
  • src 記述子

• 色関数:
  • rgb()
  • hsl()
  • hwb()
  • lab()
  • lch()
  • oklab()
  • oklch()
  • color()
• color-contrast() Experimental
• color-mix()
• device-cmyk()
• light-dark()

• <color>
• <color-function>
• <hex-color>
• <named-color>
• <alpha-value>
• <hue>
• <system-color>
• <colorspace-params>

• 色空間
• currentcolor
• interpolation
• RGB
• transparent

• CSSColorProfileRule

CSS を使った HTML 要素への色の適用

様々な種類のコンテンツに CSS を使って色を適用するためのガイドです。色に関するすべての CSS プロパティが関係します。

CSS 色値

色空間と CSS で利用できるさまざまな <color> 関数記法の概要です。

賢い色の使用

色彩理論とリソース、例えばアクセシブルなカラーパレットを作成するために正しい色を探すこと、コントラスト、カラーで出力される印刷などです。

相対色の使用

この記事では、 CSS の相対色の構文について説明し、さまざまなオプションが何であるかを示し、いくつかの例を見ていきます。

色と明るさの理解

色覚障碍（色盲）ユーザー、弱視ユーザー、前庭障碍やその他の神経障碍を持つユーザーを念頭に置いた色知覚と使用することです。

WCAG 1.4.1: 色コントラスト

読みやすさを保証するために要求されるコンテンツの背景と前景のコントラストの説明です。

• 他の仕様の一部である CSS プロパティ:
  • accent-color
  • background-color
  • background-image
  • border-color
  • box-shadow
  • caret-color
  • color
  • color-scheme
  • column-rule-color
  • outline-color
  • scrollbar-color
  • text-decoration-color
  • text-emphasis-color
  • text-shadow
  • -webkit-tap-highlight-color
• 他の仕様の一部である SVG 色プロパティ:
  • fill
  • flood-color
  • lighting-color
  • stop-color
  • stroke
• SVG color 属性
• 色相環（用語）
• 補間（用語）
• @font-palette-values アットルールの override-colors 記述子
• @color-profile アットルール
• @media の color-gamut 特性
• @media の forced-colors 特性

• CSS 色調整モジュールと print-color-adjust プロパティ
• CSS 画像モジュール（CSS <gradient> 画像を定義）
• VideoColorSpace インターフェイス
• SVG の <feColorMatrix> 要素
• キャンバス API: スタイルと色の適用