CSS 色

色の実際

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

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

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

リファレンス

プロパティ

アットルールと記述子

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

関数

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

データ型

用語集の用語とキーワード

インターフェイス

CSSColorProfileRule

ガイド

CSS を使った HTML 要素への色の適用: 様々な種類のコンテンツに CSS を使って色を適用するためのガイドです。色に関するすべての CSS プロパティが関係します。
CSS 色値: 色空間と CSS で利用できるさまざまな <color> 関数記法の概要です。
賢い色の使用: 色彩理論とリソース、例えばアクセシブルなカラーパレットを作成するために正しい色を探すこと、コントラスト、カラーで出力される印刷などです。
相対色の使用: この記事では、 CSS の相対色の構文について説明し、さまざまなオプションが何であるかを示し、いくつかの例を見ていきます。
色と明るさの理解: 色覚障碍（色盲）ユーザー、弱視ユーザー、前庭障碍やその他の神経障碍を持つユーザーを念頭に置いた色知覚と使用することです。
WCAG 1.4.1: 色コントラスト: 読みやすさを保証するために要求されるコンテンツの背景と前景のコントラストの説明です。

仕様書

Specification
CSS Color Module Level 4
CSS Color Module Level 5
CSS Color HDR Module Level 1

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年7月21日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content