色

互換性（色空間）

Dart Sass

1.79.0以降

LibSass

✗

Ruby Sass

✗

➤

互換性（レベル4構文）

Dart Sass

1.14.0以降

LibSass

✗

Ruby Sass

3.6.0以降

➤

Sassは色値を組み込みでサポートしています。CSSの色と同様に、各色はrgbやlabなどの特定の色空間における点を表します。Sassの色は、16進コード（#f2ece4または#b37399aa）、CSSの色名（midnightblue、transparent）、またはrgb()、lab()、color()などのカラー関数として記述できます。

• SCSS
• Sass

プレイグラウンド

SCSS構文

@debug #f2ece4; // #f2ece4
@debug #b37399aa; // rgba(179, 115, 153, 67%)
@debug midnightblue; // #191970
@debug rgb(204 102 153); // #c69
@debug lab(32.4% 38.4 -47.7 / 0.7); // lab(32.4% 38.4 -47.7 / 0.7)
@debug color(display-p3 0.597 0.732 0.576); // color(display-p3 0.597 0.732 0.576)

プレイグラウンド

Sass構文

@debug #f2ece4  // #f2ece4
@debug #b37399aa  // rgba(179, 115, 153, 67%)
@debug midnightblue  // #191970
@debug rgb(204 102 153)  // #c69
@debug lab(32.4% 38.4 -47.7 / 0.7)  // lab(32.4% 38.4 -47.7 / 0.7)
@debug color(display-p3 0.597 0.732 0.576)  // color(display-p3 0.597 0.732 0.576)

色空間色空間パーマリンク

Sassは、CSSと同じ色空間のセットをサポートしています。Sassの色は、レガシーの色空間にある場合、またはcolor.to-space()を使用して別の空間に変換しない限り、常に記述されたのと同じ色空間で出力されます。Sassの他のすべてのカラー関数は、関数が別の空間でその色に変更を加えた場合でも、常に元の空間と同じ空間の色を返します。

各色空間には、そのチャンネルで期待される色域の上限がありますが、Sassは任意の色空間の範囲外の値を表すことができます。これにより、広色域空間の色を狭色域空間に出入りしても、情報を失うことなく安全に変換できます。

以下は、Sassがサポートするすべての色空間の完全なリストです。これらの空間については、MDNで学ぶことができます。

*印の色空間は、レガシーの色空間です。

欠損チャンネル欠損チャンネルパーマリンク

CSSとSassの色には、「欠損チャンネル」があり、これはnoneと記述され、値が不明であるか、色のレンダリング方法に影響しないチャンネルを表します。たとえば、彩度が0%の場合は色相が問題にならないため、hsl(none 0% 50%)と記述する場合があります。ほとんどの場合、欠損チャンネルは単に0値として扱われますが、時々発生します。

• アニメーションなどのCSS補間の部分として、またはSassのcolor.mix()関数を使用して色を混合する場合は、可能な場合は常に、欠損チャンネルは他の色のそのチャンネルの値になります。

• 類似のチャンネルを持つ別の空間に色を欠損チャンネル付きで変換する場合は、変換が完了した後にそのチャンネルがnoneに設定されます。

color.channel()は欠損チャンネルに対して0を返しますが、color.is-missing()を使用して常に確認できます。

• SCSS
• Sass

プレイグラウンド

SCSS構文

@use 'sass:color';

$grey: hsl(none 0% 50%);

@debug color.mix($grey, blue, $method: hsl); // hsl(240, 50%, 50%)
@debug color.to-space($grey, lch); // lch(53.3889647411% 0 none)

プレイグラウンド

Sass構文

@use 'sass:color'

$grey: hsl(none 0% 50%)

@debug color.mix($grey, blue, $method: hsl)  // hsl(240, 50%, 50%)
@debug color.to-space($grey, lch)  // lch(53.3889647411% 0 none)

無効なチャンネル無効なチャンネルパーマリンク

特定の状況下では、色のチャンネルは「無効」と見なされ、その値は画面での色のレンダリング方法に影響しません。CSS仕様では、色を新しい空間に変換する際に、無効なチャンネルはすべてnoneで置き換える必要があります。Sassでは、レガシー空間への変換を除くすべてのケースでこれを実行して、レガシー空間への変換が常に古いブラウザと互換性のある色を生成することを保証します。

無効なチャンネルの詳細については、color.is-powerless()を参照してください。

レガシー色空間レガシー色空間パーマリンク

従来、CSSとSassは標準RGB色域のみをサポートしており、色の定義にはrgb、hsl、hwb関数のみをサポートしていました。当時はすべての色が同じ色域を使用していたため、すべてのカラー関数は色空間に関わらずすべての色で機能しました。Sassは依然としてこの動作を保持していますが、古い関数とこれらの3つの「レガシー」色空間の色に対してのみです。それにもかかわらず、カラー関数を使用する際には、作業する$spaceを明示的に指定することをお勧めします。

Sassは、従来の色値をCSSに変換する際、異なるレガシーな色空間間でも自由に相互変換を行います。CSS。これは常に安全です。なぜなら、すべてが同じ基盤となるカラーモデルを使用しており、Sassが可能な限り互換性のある形式で色を出力するのに役立つからです。

カラー関数カラー関数パーマリンク

Sassは、カラー関数を多数サポートしており、色を混ぜ合わせることやチャネル値を調整することで、既存の色に基づいて新しい色を作成するために使用できます。カラー関数を呼び出す際には、CSSと合わせるため、色空間は常に引用符なしの文字列で記述し、チャネル名は引用符付きの文字列で記述する必要があります。これにより、"red"などのチャネルが色値として解析されるのを防ぎます。

• SCSS
• Sass

プレイグラウンド

SCSS構文

@use 'sass:color';

$venus: #998099;

@debug color.scale($venus, $lightness: +15%, $space: oklch);
// rgb(170.1523703626, 144.612080603, 170.1172627174)
@debug color.mix($venus, midnightblue, $method: oklch);
// rgb(95.9363315581, 74.5687109346, 133.2082569526)

プレイグラウンド

Sass構文

@use 'sass:color'

$venus: #998099

@debug color.scale($venus, $lightness: +15%, $space: oklch)
// rgb(170.1523703626, 144.612080603, 170.1172627174)
@debug color.mix($venus, midnightblue, $method: oklch)
// rgb(95.9363315581, 74.5687109346, 133.2082569526)