sass:color

互換性
Dart Sass
1.23.0以降
LibSass
✗
Ruby Sass
✗

現在、@useを使用して組み込みモジュールを読み込むのはDart Sassのみがサポートしています。他の実装を使用するユーザーは、代わりにグローバル名を使用して関数を呼び出す必要があります。

color.adjust($color,
  $red: null, $green: null, $blue: null,
  $hue: null, $saturation: null, $lightness: null,
  $whiteness: null, $blackness: null,
  $x: null, $y: null, $z: null,
  $chroma: null,
  $alpha: null,
  $space: null)
adjust-color(...) //=> color
互換性($x、$y、$z、$chroma、および$space)
Dart Sass
1.79.0以降
LibSass
✗
Ruby Sass
✗
互換性($whitenessと$blackness)
Dart Sass
1.28.0以降
LibSass
✗
Ruby Sass
✗

$colorの1つ以上のチャンネルを固定量だけ増減します。

各キーワード引数で渡された値をカラーの対応するチャンネルに追加し、調整されたカラーを返します。デフォルトでは、$colorの空間内のチャンネルのみ調整できますが、代わりに別のカラースペースを$spaceとして渡して、そこでチャンネルを調整できます。これは常に、$colorと同じ空間のカラーを返します。

⚠️ 注意！

歴史的な理由から、$colorがレガシーカラースペースにある場合、任意のレガシーカラースペースチャンネルを調整できます。ただし、RGBチャンネル（$red、$green、および/または$blue）とHSLチャンネル（$hue、$saturation、および/または$lightness）を同時に指定すること、またはそれらのいずれかとHWBチャンネル（$hue、$whiteness、および/または$blackness）を同時に指定することはエラーになります。

それでも、レガシーカラーに対しても$spaceを明示的に渡すことをお勧めします。

すべてのチャンネル引数は数値でなければならず、カラースペースのコンストラクターでこれらのチャンネルに渡すことができる単位でなければなりません。既存のチャンネル値と調整値の合計がチャンネルのネイティブ範囲外にある場合は、次のようにクランプされます。

  • rgb空間の赤、緑、青チャンネル；
  • lab、lch、oklab、およびoklch空間の輝度チャンネル；
  • hsl、lch、およびoklch空間の彩度と彩度のチャンネルの下限；
  • すべての空間のアルファチャンネル。

こちらもご覧ください

  • color.scale()は、カラーのプロパティを流動的にスケーリングします。
  • color.change()は、カラーのプロパティを設定します。
プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.adjust(#6b717f, $red: 15); // #7a717f
@debug color.adjust(lab(40% 30 40), $lightness: 10%, $a: -20); // lab(50% 10 40)
@debug color.adjust(#d2e1dd, $hue: 45deg, $space: oklch);
// rgb(209.7987626149, 223.8632000471, 229.3988769575)
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.adjust(#6b717f, $red: 15)  // #7a717f
@debug color.adjust(lab(40% 30 40), $lightness: 10%, $a: -20)  // lab(50% 10 40)
@debug color.adjust(#d2e1dd, $hue: 45deg, $space: oklch)
// rgb(209.7987626149, 223.8632000471, 229.3988769575)

color.change($color,
  $red: null, $green: null, $blue: null,
  $hue: null, $saturation: null, $lightness: null,
  $whiteness: null, $blackness: null,
  $x: null, $y: null, $z: null,
  $chroma: null,
  $alpha: null,
  $space: null)
change-color(...) //=> color
互換性($x、$y、$z、$chroma、および$space)
Dart Sass
1.79.0以降
LibSass
✗
Ruby Sass
✗
互換性($whitenessと$blackness)
Dart Sass
1.28.0以降
LibSass
✗
Ruby Sass
✗

カラーの1つ以上のチャンネルを新しい値に設定します。

各キーワード引数で渡された値を対応するカラーチャンネルの代わりに使用し、変更されたカラーを返します。デフォルトでは、$colorの空間内のチャンネルのみ変更できますが、代わりに別のカラースペースを$spaceとして渡して、そこでチャンネルを調整できます。これは常に、$colorと同じ空間のカラーを返します。

⚠️ 注意！

歴史的な理由から、$colorがレガシーカラースペースにある場合、任意のレガシーカラースペースチャンネルを変更できます。ただし、RGBチャンネル（$red、$green、および/または$blue）とHSLチャンネル（$hue、$saturation、および/または$lightness）を同時に指定すること、またはそれらのいずれかとHWBチャンネル（$hue、$whiteness、および/または$blackness）を同時に指定することはエラーになります。

それでも、レガシーカラーに対しても$spaceを明示的に渡すことをお勧めします。

すべてのチャンネル引数は数値でなければならず、カラースペースのコンストラクターでこれらのチャンネルに渡すことができる単位でなければなりません。color.change()ではチャンネルはクランプされません。

こちらもご覧ください

  • color.scale()は、カラーのプロパティを流動的にスケーリングします。
  • color.adjust()は、カラーのプロパティを固定量だけ調整します。
プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.change(#6b717f, $red: 100); // #64717f
@debug color.change(color(srgb 0 0.2 0.4), $red: 0.8, $blue: 0.1);
// color(srgb 0.8 0.1 0.4)
@debug color.change(#998099, $lightness: 30%, $space: oklch);
// rgb(58.0719961509, 37.2631531594, 58.4201613409)
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.change(#6b717f, $red: 100)  // #64717f
@debug color.change(color(srgb 0 0.2 0.4), $red: 0.8, $blue: 0.1)
// color(srgb 0.8 0.1 0.4)
@debug color.change(#998099, $lightness: 30%, $space: oklch)
// rgb(58.0719961509, 37.2631531594, 58.4201613409)

color.channel($color, $channel, $space: null) //=> number
互換性($space)
Dart Sass
1.79.0以降
LibSass
✗
Ruby Sass
✗

$space（デフォルトは$colorの空間）の$channelの値を返します。$channelは引用符で囲まれた文字列でなければならず、$spaceは引用符なしの文字列でなければなりません。

これは、hsl、hwb、lch、およびoklch空間のhueチャンネルに対して単位degの数値を返します。hsl、hwb、lab、lch、oklab、およびoklch空間のsaturation、lightness、whiteness、およびblacknessチャンネルに対しては、単位%の数値を返します。他のすべてのチャンネルについては、単位のない数値を返します。

$channelが$colorに存在しない場合、これは0（適切な単位が付いている場合があります）を返します。存在しないチャンネルを明示的に確認するには、color.is-missing()を使用できます。

プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.channel(hsl(80deg 30% 50%), "hue"); // 80deg
@debug color.channel(hsl(80deg 30% 50%), "hue", $space: oklch); // 124.279238779deg
@debug color.channel(hsl(80deg 30% 50%), "red", $space: rgb); // 140.25
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.channel(hsl(80deg 30% 50%), "hue")  // 80deg
@debug color.channel(hsl(80deg 30% 50%), "hue", $space: oklch)  // 124.279238779deg
@debug color.channel(hsl(80deg 30% 50%), "red", $space: rgb)  // 140.25

color.complement($color, $space: null)
complement($color, $space: null) //=> color
互換性($space)
Dart Sass
1.79.0以降
LibSass
✗
Ruby Sass
✗

$spaceの$colorの補色を返します。

これは、$spaceで$colorの色相を180deg回転させます。つまり、$spaceは極座標カラースペース（hsl、hwb、lch、またはoklch）でなければなりません。これは常に、$colorと同じ空間のカラーを返します。

⚠️ 注意！

歴史的な理由から、$colorがレガシーカラースペースにある場合、$spaceは省略可能です。その場合、$spaceはhslにデフォルト設定されます。常に$spaceを明示的に渡すことをお勧めします。

プレイグラウンド

SCSS構文

@use 'sass:color';

// HSL hue 222deg becomes 42deg.
@debug color.complement(#6b717f); // #7f796b

// Oklch hue 267.1262408996deg becomes 87.1262408996deg
@debug color.complement(#6b717f, oklch);
// rgb(118.8110604298, 112.5123650034, 98.1616586336)

// Hue 70deg becomes 250deg.
@debug color.complement(oklch(50% 0.12 70deg), oklch); // oklch(50% 0.12 250deg)
プレイグラウンド

Sass構文

@use 'sass:color'

// HSL hue 222deg becomes 42deg.
@debug color.complement(#6b717f)  // #7f796b

// Oklch hue 267.1262408996deg becomes 87.1262408996deg
@debug color.complement(#6b717f, oklch) 
// rgb(118.8110604298, 112.5123650034, 98.1616586336)

// Hue 70deg becomes 250deg.
@debug color.complement(oklch(50% 0.12 70deg), oklch)  // oklch(50% 0.12 250deg)

color.grayscale($color)
grayscale($color) //=> color

$colorと同じ明るさのグレーカラーを返します。

$colorがレガシーカラースペースにある場合、これはHSL彩度を0％に設定します。それ以外の場合は、Oklch彩度を0％に設定します。

プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.grayscale(#6b717f); // #757575
@debug color.grayscale(color(srgb 0.4 0.2 0.6)); // color(srgb 0.3233585271 0.3233585411 0.3233585792)
@debug color.grayscale(oklch(50% 80% 270deg)); // oklch(50% 0% 270deg)
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.grayscale(#6b717f)  // #757575
@debug color.grayscale(color(srgb 0.4 0.2 0.6))  // color(srgb 0.3233585271 0.3233585411 0.3233585792)
@debug color.grayscale(oklch(50% 80% 270deg))  // oklch(50% 0% 270deg)

color.ie-hex-str($color)
ie-hex-str($color) //=> unquoted string

Internet Explorerの-ms-filterプロパティで期待される#AARRGGBB形式で$colorを表す引用符なしの文字列を返します。

$colorが既にrgbカラースペースにない場合は、rgbに変換され、必要に応じてガンママッピングが行われます。特定のガンママッピングアルゴリズムは、最新の技術の進歩に伴い、将来のSassバージョンで変更される可能性があります。現在は、local-mindeが使用されています。

プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.ie-hex-str(#b37399); // #FFB37399
@debug color.ie-hex-str(rgba(242, 236, 228, 0.6)); // #99F2ECE4
@debug color.ie-hex-str(oklch(70% 10% 120deg)); // #FF9BA287
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.ie-hex-str(#b37399)  // #FFB37399
@debug color.ie-hex-str(rgba(242, 236, 228, 0.6))  // #99F2ECE4
@debug color.ie-hex-str(oklch(70% 10% 120deg))  // #FF9BA287

color.invert($color, $weight: 100%, $space: null)
invert($color, $weight: 100%, $space: null) //=> color
互換性($space)
Dart Sass
1.79.0以降
LibSass
✗
Ruby Sass
✗

$spaceの$colorの逆またはネガティブを返します。

$weightは0％から100％（両方を含む）の数値でなければなりません。ウェイトが高いほど、結果はネガティブに近づき、ウェイトが低いほど$colorに近づきます。ウェイト50％は常に$spaceで中程度の明るさのグレーを生成します。

⚠️ 注意！

歴史的な理由から、$colorがレガシーカラースペースにある場合、$spaceは省略可能です。その場合、$spaceは$color自身の空間にデフォルト設定されます。常に$spaceを明示的に渡すことをお勧めします。

プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.invert(#b37399, $space: rgb); // #4c8c66
@debug color.invert(#550e0c, 20%, $space: display-p3); // rgb(103.4937692017, 61.3720912206, 59.430641338)
プレイグラウンド

Sass構文

@use 'sass:color';

@debug color.invert(#b37399, $space: rgb)  // #4c8c66
@debug color.invert(#550e0c, 20%, $space: display-p3)  // rgb(103.4937692017, 61.3720912206, 59.430641338)

color.is-legacy($color) //=> boolean
互換性($space)
Dart Sass
1.79.0以降
LibSass
✗
Ruby Sass
✗

$colorがレガシーカラースペースにあるかどうかを返します。

プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.is-legacy(#b37399); // true
@debug color.is-legacy(hsl(90deg 30% 90%)); // true
@debug color.is-legacy(oklch(70% 10% 120deg)); // false
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.is-legacy(#b37399)  // true
@debug color.is-legacy(hsl(90deg 30% 90%))  // true
@debug color.is-legacy(oklch(70% 10% 120deg))  // false

color.is-missing($color, $channel) //=> boolean
互換性($space)
Dart Sass
1.79.0以降
LibSass
✗
Ruby Sass
✗

$channelが$colorで[欠落]しているかどうかを返します。$channelは引用符で囲まれた文字列でなければなりません。

プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.is-missing(#b37399, "green"); // false
@debug color.is-missing(rgb(100 none 200), "green"); // true
@debug color.is-missing(color.to-space(grey, lch), "hue"); // true
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.is-legacy(#b37399)  // true
@debug color.is-legacy(hsl(90deg 30% 90%))  // true
@debug color.is-legacy(oklch(70% 10% 120deg))  // false

color.is-powerless($color, $channel, $space: null) //=> boolean
互換性($space)
Dart Sass
1.79.0以降
LibSass
✗
Ruby Sass
✗

$colorの$channelが$space（デフォルトは$colorの空間）でパワーレスかどうかを返します。$channelは引用符で囲まれた文字列でなければならず、$spaceは引用符なしの文字列でなければなりません。

チャンネルは、次の状況でパワーレスと見なされます。

  • hsl空間では、saturationが0％の場合、hueはパワーレスです。
  • hwb空間では、whitenessとblacknessの合計が100％を超える場合、hueはパワーレスです。
  • lchとoklch空間では、chromaが0％の場合、hueはパワーレスです。
プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.is-powerless(hsl(180deg 0% 40%), "hue"); // true
@debug color.is-powerless(hsl(180deg 0% 40%), "saturation"); // false
@debug color.is-powerless(#999, "hue", $space: hsl); // true
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.is-powerless(hsl(180deg 0% 40%), "hue")  // true
@debug color.is-powerless(hsl(180deg 0% 40%), "saturation")  // false
@debug color.is-powerless(#999, "hue", $space: hsl)  // true

color.mix($color1, $color2, $weight: 50%, $method: null)
mix($color1, $color2, $weight: 50%, $method: null) //=> color
互換性($method)
Dart Sass
1.79.0以降
LibSass
✗
Ruby Sass
✗

$methodを使用して、$color1と$color2の混合カラーを返します。$methodはカラースペースの名前であり、極座標カラースペース（hsl、hwb、lch、またはoklch）の場合は、色相補間メソッドがオプションで続きます。

これは、CSSのcolor-mix()関数と同じアルゴリズムを使用してカラーを混合します。これは、補間空間でどちらかのカラーに欠落チャンネルがある場合、もう一方のカラーの対応するチャンネル値を取ることになります。これは常に、$color1の空間のカラーを返します。

$weightは0％から100％（両方を含む）の数値でなければなりません。ウェイトが大きいほど、$color1が多く使用され、ウェイトが小さいほど$color2が多く使用されます。

⚠️ 注意！

歴史的な理由により、$color1と$color2の両方が従来のカラースペースにある場合、$methodは省略可能です。この場合、カラーミキシングはSassが歴史的に使用していたのと同じアルゴリズムを使用して行われ、$weightと各色の相対的な不透明度の両方によって、結果に各色がどれだけ含まれるかが決定されます。

プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.mix(#036, #d2e1dd, $method: rgb); // #698aa2
@debug color.mix(#036, #d2e1dd, $method: oklch); // rgb(87.864037264, 140.601918773, 154.2876826946)
@debug color.mix(
  color(rec2020 1 0.7 0.1),
  color(rec2020 0.8 none 0.3),
  $weight: 75%,
  $method: rec2020
); // color(rec2020 0.95 0.7 0.15)
@debug color.mix(
  oklch(80% 20% 0deg),
  oklch(50% 10% 120deg),
  $method: oklch longer hue
); // oklch(65% 0.06 240deg)
プレイグラウンド

Sass構文

@use 'sass:color';

@debug color.mix(#036, #d2e1dd, $method: rgb)  // #698aa2
@debug color.mix(#036, #d2e1dd, $method: oklch)  // rgb(87.864037264, 140.601918773, 154.2876826946)
@debug color.mix(color(rec2020 1 0.7 0.1), color(rec2020 0.8 none 0.3), $weight: 75%, $method: rec2020)  // color(rec2020 0.95 0.7 0.15)





@debug color.mix(oklch(80% 20% 0deg), oklch(50% 10% 120deg), $method: oklch longer hue)  // oklch(65% 0.06 240deg)





color.same($color1, $color2) //=> boolean
互換性
Dart Sass
1.79.0以降
LibSass
✗
Ruby Sass
✗

$color1と$color2が視覚的に同じ色としてレンダリングされるかどうかを返します。==とは異なり、xyzカラースペースで同じ色値を表している限り、異なるカラースペースにあっても色を同等とみなします。チャネルの欠損はゼロと同等に扱われます。

プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.same(#036, #036); // true
@debug color.same(#036, #037); // false
@debug color.same(#036, color.to-space(#036, oklch)); // true
@debug color.same(hsl(none 50% 50%), hsl(0deg 50% 50%)); // true
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.same(#036, #036)  // true
@debug color.same(#036, #037)  // false
@debug color.same(#036, color.to-space(#036, oklch))  // true
@debug color.same(hsl(none 50% 50%), hsl(0deg 50% 50%))  // true

color.scale($color,
  $red: null, $green: null, $blue: null,
  $saturation: null, $lightness: null,
  $whiteness: null, $blackness: null,
  $x: null, $y: null, $z: null,
  $chroma: null,
  $alpha: null,
  $space: null)
scale-color(...) //=> color
互換性($x、$y、$z、$chroma、および$space)
Dart Sass
1.79.0以降
LibSass
✗
Ruby Sass
✗
互換性($whitenessと$blackness)
Dart Sass
1.28.0以降
LibSass
✗
Ruby Sass
✗

$colorの1つ以上のプロパティを流動的にスケーリングします。

各キーワード引数は、-100%から100%（を含む）の数値でなければなりません。これは、対応するプロパティを元の位置から最大値（引数が正の場合）または最小値（引数が負の場合）に向かってどれだけ移動させるべきかを示します。例えば、$lightness: 50%は、すべての色を完全に白にすることなく、最大輝度により近い50%にします。デフォルトでは、$colorのスペースの色のみをスケーリングできますが、別のカラースペースを$spaceとして渡して、代わりにそこでチャネルをスケーリングすることもできます。これは常に、$colorと同じスペースの色を返します。

⚠️ 注意！

歴史的な理由により、$colorが従来のカラースペースにある場合、従来のカラースペースのチャネルはすべてスケーリングできます。ただし、RGBチャネル（$red、$green、および/または$blue）とHSLチャネル（$saturationおよび/または$lightness）、またはそれらのいずれかとHWBチャネル（$hue、$whiteness、および/または$blackness）を同時に指定することはエラーです。

それでも、レガシーカラーに対しても$spaceを明示的に渡すことをお勧めします。

こちらもご覧ください

  • color.adjust()は、色のプロパティを固定量だけ変更するため使用します。
  • color.change()は、カラーのプロパティを設定します。
プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.scale(#6b717f, $red: 15%); // rgb(129.2, 113, 127)
@debug color.scale(#d2e1dd, $lightness: -10%, $space: oklch);
// rgb(181.2580722731, 195.8949200496, 192.0059024063)
@debug color.scale(oklch(80% 20% 120deg), $chroma: 50%, $alpha: -40%);
// oklch(80% 0.24 120deg / 0.6)
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.scale(#6b717f, $red: 15%)  // rgb(129.2, 113, 127)
@debug color.scale(#d2e1dd, $lightness: -10%, $space: oklch)
// rgb(181.2580722731, 195.8949200496, 192.0059024063)
@debug color.scale(oklch(80% 20% 120deg), $chroma: 50%, $alpha: -40%)
// oklch(80% 0.24 120deg / 0.6)

color.space($color) //=> unquoted string
互換性
Dart Sass
1.79.0以降
LibSass
✗
Ruby Sass
✗

$colorのスペースの名前を引用符なしの文字列として返します。

プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.space(#036); // rgb
@debug color.space(hsl(120deg 40% 50%)); // hsl
@debug color.space(color(xyz-d65 0.1 0.2 0.3)); // xyz
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.space(#036)  // rgb
@debug color.space(hsl(120deg 40% 50%))  // hsl
@debug color.space(color(xyz-d65 0.1 0.2 0.3))  // xyz

color.to-gamut($color, $space: null, $method: null) //=> color
互換性
Dart Sass
1.79.0以降
LibSass
✗
Ruby Sass
✗

$colorと視覚的に類似した色を、$spaceのガマット（デフォルトは$colorのスペース）で返します。$colorが既に$spaceのガマット内にある場合は、そのまま返されます。これは常に、$colorの元のスペースの色を返します。$spaceは引用符なしの文字列でなければなりません。

$methodは、Sassがどのようにして「類似した」色を選択するかを示します。

  • local-minde：これは、CSS Colors 4仕様で現在推奨されている方法です。色のOklchクロマ空間をバイナリサーチして、クリップされたガマット値が、クロマが減少したバリアントに可能な限り近い色を見つけます。

  • clip：これは、すべてのチャネルを$spaceのガマット内に単純にクリップし、ガマット外にある場合は最小または最大のガマット値に設定します。

⚠️ 注意！

CSSワーキンググループとブラウザベンダーは、推奨されるガマットマッピングアルゴリズムの代替オプションについて現在も積極的に議論しています。CSSのデフォルトと同じデフォルト値を最終的に設定できるように、推奨事項が決定されるまで、color.to-gamut()では$methodパラメータが必須です。

プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.to-gamut(#036, $method: local-minde); // #036
@debug color.to-gamut(oklch(60% 70% 20deg), $space: rgb, $method: local-minde);
// oklch(61.2058838235% 0.2466052584 22.0773325274deg)
@debug color.to-gamut(oklch(60% 70% 20deg), $space: rgb, $method: clip);
// oklch(62.5026609544% 0.2528579741 24.1000466758deg)
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.to-gamut(#036, $method: local-minde)  // #036
@debug color.to-gamut(oklch(60% 70% 20deg), $space: rgb, $method: local-minde)
// oklch(61.2058838235% 0.2466052584 22.0773325274deg)
@debug color.to-gamut(oklch(60% 70% 20deg), $space: rgb, $method: clip)
// oklch(62.5026609544% 0.2528579741 24.1000466758deg)

color.to-space($color, $space) //=> color
互換性
Dart Sass
1.79.0以降
LibSass
✗
Ruby Sass
✗

$colorを指定された$spaceに変換します。$spaceは引用符なしの文字列でなければなりません。

$colorの元のスペースのガマットが$spaceのガマットよりも広い場合、$spaceのガマット外の色が返される可能性があります。color.to-gamut()を使用して、類似したガマット内の色に変換できます。

これは、$colorに類似したチャネルが欠落している場合、またはチャネルが目的のスペースで無効な場合に、チャネルの欠損を含む色を生成する可能性があります。従来のカラースペースへの変換が常に古いブラウザと互換性のある色を生成することを保証するために、$spaceが従来のものの場合、新しい欠落チャネルは決して返されません。

💡豆知識

これは、渡されたものとは異なるスペースの色を返す唯一のSass関数です。

プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.to-space(#036, display-p3); // lch(20.7457453073% 35.0389733355 273.0881809283deg)
@debug color.to-space(oklab(44% 0.09 -0.13)); // rgb(103.1328911972, 50.9728091281, 150.8382311692)
@debug color.to-space(xyz(0.8 0.1 0.1)); // color(a98-rgb 1.2177586808 -0.7828263424 0.3516847577)
@debug color.to-space(grey, lch); // lch(53.5850134522% 0 none)
@debug color.to-space(lch(none 10% 30deg), oklch); // oklch(none 0.3782382429 11.1889160032deg)
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.to-space(#036, display-p3)  // lch(20.7457453073% 35.0389733355 273.0881809283deg)
@debug color.to-space(oklab(44% 0.09 -0.13))  // rgb(103.1328911972, 50.9728091281, 150.8382311692)
@debug color.to-space(xyz(0.8 0.1 0.1))  // color(a98-rgb 1.2177586808 -0.7828263424 0.3516847577)
@debug color.to-space(grey, lch)  // lch(53.5850134522% 0 none)
@debug color.to-space(lch(none 10% 30deg), oklch)  // oklch(none 0.3782382429 11.1889160032deg)

非推奨関数非推奨関数パーマリンク

adjust-hue($color, $degrees) //=> color

$colorのHSL色相を増減します。

$hueは、$colorの色相に追加する-360degから360deg（を含む）の数値でなければなりません。単位なし、または角度単位を持つことができます。$colorは従来のカラースペースでなければなりません。

色のプロパティを調整できるcolor.adjust()も参照してください。

⚠️ 注意！

adjust-hue()はcolor.adjust()と冗長であるため、新しいモジュールシステムには直接含まれていません。adjust-hue($color, $amount)の代わりに、color.adjust($color, $hue: $amount, $space: hsl)を書くことができます。

プレイグラウンド

SCSS構文

// Hue 222deg becomes 282deg.
@debug adjust-hue(#6b717f, 60deg); // #796b7f

// Hue 164deg becomes 104deg.
@debug adjust-hue(#d2e1dd, -60deg); // #d6e1d2

// Hue 210deg becomes 255deg.
@debug adjust-hue(#036, 45); // #1a0066
プレイグラウンド

Sass構文

// Hue 222deg becomes 282deg.
@debug adjust-hue(#6b717f, 60deg)  // #796b7f

// Hue 164deg becomes 104deg.
@debug adjust-hue(#d2e1dd, -60deg)  // #d6e1d2

// Hue 210deg becomes 255deg.
@debug adjust-hue(#036, 45)  // #1a0066

color.alpha($color)
alpha($color)
opacity($color) //=> number

$colorのアルファチャネルを0から1の数値として返します。

$colorは従来のカラースペースでなければなりません。

特別なケースとして、Internet Explorer構文alpha(opacity=20)をサポートしており、この場合、引用符なしの文字列を返します。

⚠️ 注意！

color.alpha()はcolor.channel()と冗長であるため、もはや推奨されていません。color.alpha($color)の代わりに、color.channel($color, "alpha")を書くことができます。

プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.alpha(#e1d7d2); // 1
@debug color.opacity(rgb(210, 225, 221, 0.4)); // 0.4
@debug alpha(opacity=20); // alpha(opacity=20)
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.alpha(#e1d7d2)  // 1
@debug color.opacity(rgb(210, 225, 221, 0.4))  // 0.4
@debug alpha(opacity=20)  // alpha(opacity=20)

color.blackness($color)
blackness($color) //=> number
互換性
Dart Sass
1.28.0以降
LibSass
✗
Ruby Sass
✗

$colorのHWB黒さを0%から100%の数値として返します。

$colorは従来のカラースペースでなければなりません。

⚠️ 注意！

color.blackness()はcolor.channel()と冗長であるため、もはや推奨されていません。color.blackness($color)の代わりに、color.channel($color, "blackness")を書くことができます。

プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.blackness(#e1d7d2); // 11.7647058824%
@debug color.blackness(white); // 0%
@debug color.blackness(black); // 100%
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.blackness(#e1d7d2)  // 11.7647058824%
@debug color.blackness(white)  // 0%
@debug color.blackness(black)  // 100%

color.blue($color)
blue($color) //=> number

$colorの青チャネルを0から255の数値として返します。

$colorは従来のカラースペースでなければなりません。

⚠️ 注意！

color.blue()はcolor.channel()と冗長であるため、もはや推奨されていません。color.blue($color)の代わりに、color.channel($color, "blue")を書くことができます。

プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.blue(#e1d7d2); // 210
@debug color.blue(white); // 255
@debug color.blue(black); // 0
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.blue(#e1d7d2)  // 210
@debug color.blue(white)  // 255
@debug color.blue(black)  // 0

darken($color, $amount) //=> color

$colorをより暗くします。

$colorは従来のカラースペースでなければなりません。

$amountは0%から100%（を含む）の数値でなければなりません。HSLの輝度をその量だけ減少させます。

⚠️ 注意！

darken()関数は輝度を固定量だけ減少させるため、多くの場合、望ましい効果ではありません。色を以前よりも特定の割合だけ暗くするには、代わりにcolor.scale()を使用します。

darken()は通常、色を暗くする最良の方法ではないため、新しいモジュールシステムには直接含まれていません。ただし、既存の動作を維持する必要がある場合、darken($color, $amount)はcolor.adjust($color, $lightness: -$amount, $space: hsl)として記述できます。

プレイグラウンド

SCSS構文

@use 'sass:color';

// #036 has lightness 20%, so when darken() subtracts 30% it just returns black.
@debug darken(#036, 30%); // black

// scale() instead makes it 30% darker than it was originally.
@debug color.scale(#036, $lightness: -30%); // #002447
プレイグラウンド

Sass構文

@use 'sass:color'

// #036 has lightness 20%, so when darken() subtracts 30% it just returns black.
@debug darken(#036, 30%)  // black

// scale() instead makes it 30% darker than it was originally.
@debug color.scale(#036, $lightness: -30%)  // #002447
プレイグラウンド

SCSS構文

// Lightness 92% becomes 72%.
@debug darken(#b37399, 20%); // #7c4465

// Lightness 85% becomes 45%.
@debug darken(#f2ece4, 40%); // #b08b5a

// Lightness 20% becomes 0%.
@debug darken(#036, 30%); // black
プレイグラウンド

Sass構文

// Lightness 92% becomes 72%.
@debug darken(#b37399, 20%)  // #7c4465

// Lightness 85% becomes 45%.
@debug darken(#f2ece4, 40%)  // #b08b5a

// Lightness 20% becomes 0%.
@debug darken(#036, 30%)  // black

desaturate($color, $amount) //=> color

$colorを彩度を低くします。

$colorは従来のカラースペースでなければなりません。

$amountは0%から100%（を含む）の数値でなければなりません。HSLの彩度をその量だけ減少させます。

⚠️ 注意！

desaturate()関数は彩度を固定量だけ減少させるため、多くの場合、望ましい効果ではありません。色を以前よりも特定の割合だけ彩度を低くするには、代わりにcolor.scale()を使用します。

desaturate()は通常、色を彩度を低くする最良の方法ではないため、新しいモジュールシステムには直接含まれていません。ただし、既存の動作を維持する必要がある場合、desaturate($color, $amount)はcolor.adjust($color, $saturation: -$amount, $space: hsl)として記述できます。

プレイグラウンド

SCSS構文

@use 'sass:color';

// #d2e1dd has saturation 20%, so when desaturate() subtracts 30% it just
// returns gray.
@debug desaturate(#d2e1dd, 30%); // #dadada

// scale() instead makes it 30% less saturated than it was originally.
@debug color.scale(#6b717f, $saturation: -30%); // #6e727c
プレイグラウンド

Sass構文

@use 'sass:color'

// #6b717f has saturation 20%, so when desaturate() subtracts 30% it just
// returns gray.
@debug desaturate(#d2e1dd, 30%)  // #dadada

// scale() instead makes it 30% less saturated than it was originally.
@debug color.scale(#6b717f, $saturation: -30%)  // #6e727c
プレイグラウンド

SCSS構文

// Saturation 100% becomes 80%.
@debug desaturate(#036, 20%); // #0a335c

// Saturation 35% becomes 15%.
@debug desaturate(#f2ece4, 20%); // #eeebe8

// Saturation 20% becomes 0%.
@debug desaturate(#d2e1dd, 30%); // #dadada
プレイグラウンド

Sass構文

// Saturation 100% becomes 80%.
@debug desaturate(#036, 20%)  // #0a335c

// Saturation 35% becomes 15%.
@debug desaturate(#f2ece4, 20%)  // #eeebe8

// Saturation 20% becomes 0%.
@debug desaturate(#d2e1dd, 30%)  // #dadada

color.green($color)
green($color) //=> number

$colorの緑チャネルを0から255の数値として返します。

$colorは従来のカラースペースでなければなりません。

⚠️ 注意！

color.green()はcolor.channel()と冗長であるため、もはや推奨されていません。color.green($color)の代わりに、color.channel($color, "green")を書くことができます。

プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.green(#e1d7d2); // 215
@debug color.green(white); // 255
@debug color.green(black); // 0
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.green(#e1d7d2)  // 215
@debug color.green(white)  // 255
@debug color.green(black)  // 0

color.hue($color)
hue($color) //=> number

$colorの色相を0degから360degの数値として返します。

$colorは従来のカラースペースでなければなりません。

⚠️ 注意！

color.hue()はcolor.channel()と冗長であるため、もはや推奨されていません。color.hue($color)の代わりに、color.channel($color, "hue")を書くことができます。

プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.hue(#e1d7d2); // 20deg
@debug color.hue(#f2ece4); // 34.2857142857deg
@debug color.hue(#dadbdf); // 228deg
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.hue(#e1d7d2)  // 20deg
@debug color.hue(#f2ece4)  // 34.2857142857deg
@debug color.hue(#dadbdf)  // 228deg

lighten($color, $amount) //=> color

$colorを明るくします。

$colorは従来のカラースペースでなければなりません。

$amountは0%から100%（を含む）の数値でなければなりません。HSLの輝度をその量だけ増加させます。

⚠️ 注意！

lighten()関数は輝度を固定量だけ増加させるため、多くの場合、望ましい効果ではありません。色を以前よりも特定の割合だけ明るくするには、代わりにscale()を使用します。

lighten()は通常、色を明るくする最良の方法ではないため、新しいモジュールシステムには直接含まれていません。ただし、既存の動作を維持する必要がある場合、lighten($color, $amount)はcolor.adjust($color, $lightness: $amount, $space: hsl)として記述できます。

プレイグラウンド

SCSS構文

@use 'sass:color';

// #e1d7d2 has lightness 85%, so when lighten() adds 30% it just returns white.
@debug lighten(#e1d7d2, 30%); // white

// scale() instead makes it 30% lighter than it was originally.
@debug color.scale(#e1d7d2, $lightness: 30%); // #eae3e0
プレイグラウンド

Sass構文

@use 'sass:color'

// #e1d7d2 has lightness 85%, so when lighten() adds 30% it just returns white.
@debug lighten(#e1d7d2, 30%)  // white

// scale() instead makes it 30% lighter than it was originally.
@debug color.scale(#e1d7d2, $lightness: 30%)  // #eae3e0
プレイグラウンド

SCSS構文

// Lightness 46% becomes 66%.
@debug lighten(#6b717f, 20%); // #a1a5af

// Lightness 20% becomes 80%.
@debug lighten(#036, 60%); // #99ccff

// Lightness 85% becomes 100%.
@debug lighten(#e1d7d2, 30%); // white
プレイグラウンド

Sass構文

// Lightness 46% becomes 66%.
@debug lighten(#6b717f, 20%)  // #a1a5af

// Lightness 20% becomes 80%.
@debug lighten(#036, 60%)  // #99ccff

// Lightness 85% becomes 100%.
@debug lighten(#e1d7d2, 30%)  // white

color.lightness($color)
lightness($color) //=> number

$colorのHSL輝度を0%から100%の数値として返します。

$colorは従来のカラースペースでなければなりません。

⚠️ 注意！

color.lightness()はcolor.channel()と冗長であるため、もはや推奨されていません。color.lightness($color)の代わりに、color.channel($color, "lightness")を書くことができます。

プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.lightness(#e1d7d2); // 85.2941176471%
@debug color.lightness(#f2ece4); // 92.1568627451%
@debug color.lightness(#dadbdf); // 86.4705882353%
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.lightness(#e1d7d2)  // 85.2941176471%
@debug color.lightness(#f2ece4)  // 92.1568627451%
@debug color.lightness(#dadbdf)  // 86.4705882353%

opacify($color, $amount)
fade-in($color, $amount) //=> color

$colorをより不透明にします。

$colorは従来のカラースペースでなければなりません。

$amountは0から1（を含む）の数値でなければなりません。$colorのアルファチャネルをその量だけ増加させます。

⚠️ 注意！

opacify()関数はアルファチャネルを固定量だけ増加させるため、多くの場合、望ましい効果ではありません。色を以前よりも特定の割合だけ不透明にするには、代わりにcolor.scale()を使用します。

opacify()は通常、色をより不透明にする最良の方法ではないため、新しいモジュールシステムには直接含まれていません。ただし、既存の動作を維持する必要がある場合、opacify($color, $amount)はcolor.adjust($color, $alpha: -$amount)として記述できます。

プレイグラウンド

SCSS構文

@use 'sass:color';

// rgba(#036, 0.7) has alpha 0.7, so when opacify() adds 0.3 it returns a fully
// opaque color.
@debug opacify(rgba(#036, 0.7), 0.3); // #036

// scale() instead makes it 30% more opaque than it was originally.
@debug color.scale(rgba(#036, 0.7), $alpha: 30%); // rgba(0, 51, 102, 0.79)
プレイグラウンド

Sass構文

@use 'sass:color'

// rgba(#036, 0.7) has alpha 0.7, so when opacify() adds 0.3 it returns a fully
// opaque color.
@debug opacify(rgba(#036, 0.7), 0.3)  // #036

// scale() instead makes it 30% more opaque than it was originally.
@debug color.scale(rgba(#036, 0.7), $alpha: 30%)  // rgba(0, 51, 102, 0.79)
プレイグラウンド

SCSS構文

@debug opacify(rgba(#6b717f, 0.5), 0.2); // rgba(107, 113, 127, 0.7)
@debug fade-in(rgba(#e1d7d2, 0.5), 0.4); // rgba(225, 215, 210, 0.9)
@debug opacify(rgba(#036, 0.7), 0.3); // #036
プレイグラウンド

Sass構文

@debug opacify(rgba(#6b717f, 0.5), 0.2)  // rgba(107, 113, 127, 0.7)
@debug fade-in(rgba(#e1d7d2, 0.5), 0.4)  // rgba(225, 215, 210, 0.9)
@debug opacify(rgba(#036, 0.7), 0.3)  // #036

color.red($color)
red($color) //=> number

$colorの赤チャネルを0から255の数値として返します。

$colorは従来のカラースペースでなければなりません。

⚠️ 注意！

color.red()はcolor.channel()と冗長であるため、もはや推奨されていません。color.red($color)の代わりに、color.channel($color, "red")を書くことができます。

プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.red(#e1d7d2); // 225
@debug color.red(white); // 255
@debug color.red(black); // 0
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.red(#e1d7d2)  // 225
@debug color.red(white)  // 255
@debug color.red(black)  // 0

saturate($color, $amount) //=> color

$colorをより鮮やかにします。

$colorは従来のカラースペースでなければなりません。

$amountは0%から100%（を含む）の数値でなければなりません。HSLの彩度をその量だけ増加させます。

⚠️ 注意！

saturate()関数は彩度を固定量だけ増加させるため、多くの場合、望ましい効果ではありません。色を以前よりも特定の割合だけ鮮やかにするには、代わりにcolor.scale()を使用します。

saturate()は通常、色をより鮮やかにする最良の方法ではないため、新しいモジュールシステムには直接含まれていません。ただし、既存の動作を維持する必要がある場合、saturate($color, $amount)はcolor.adjust($color, $saturation: $amount, $space: hsl)として記述できます。

プレイグラウンド

SCSS構文

@use 'sass:color';

// #0e4982 has saturation 80%, so when saturate() adds 30% it just becomes
// fully saturated.
@debug saturate(#0e4982, 30%); // #004990

// scale() instead makes it 30% more saturated than it was originally.
@debug color.scale(#0e4982, $saturation: 30%); // #0a4986
プレイグラウンド

Sass構文

@use 'sass:color'

// #0e4982 has saturation 80%, so when saturate() adds 30% it just becomes
// fully saturated.
@debug saturate(#0e4982, 30%)  // #004990

// scale() instead makes it 30% more saturated than it was originally.
@debug color.scale(#0e4982, $saturation: 30%)  // #0a4986
プレイグラウンド

SCSS構文

// Saturation 50% becomes 70%.
@debug saturate(#c69, 20%); // #e05299

// Saturation 35% becomes 85%.
@debug desaturate(#f2ece4, 50%); // #ebebeb

// Saturation 80% becomes 100%.
@debug saturate(#0e4982, 30%)  // #004990
プレイグラウンド

Sass構文

// Saturation 50% becomes 70%.
@debug saturate(#c69, 20%); // #e05299

// Saturation 35% becomes 85%.
@debug desaturate(#f2ece4, 50%); // #ebebeb

// Saturation 80% becomes 100%.
@debug saturate(#0e4982, 30%)  // #004990

color.saturation($color)
saturation($color) //=> number

$colorのHSL彩度を0%から100%の数値として返します。

$colorは従来のカラースペースでなければなりません。

⚠️ 注意！

color.saturation()はcolor.channel()と冗長であるため、もはや推奨されていません。color.saturation($color)の代わりに、color.channel($color, "saturation")を書くことができます。

プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.saturation(#e1d7d2); // 20%
@debug color.saturation(#f2ece4); // 30%
@debug color.saturation(#dadbdf); // 7.2463768116%
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.saturation(#e1d7d2)  // 20%
@debug color.saturation(#f2ece4)  // 30%
@debug color.saturation(#dadbdf)  // 7.2463768116%

transparentize($color, $amount)
fade-out($color, $amount) //=> color

$colorをより透明にします。

$colorは従来のカラースペースでなければなりません。

$amountは0から1（を含む）の数値でなければなりません。$colorのアルファチャネルをその量だけ減少させます。

⚠️ 注意！

transparentize()関数はアルファチャネルを固定量だけ減少させるため、多くの場合、望ましい効果ではありません。色を以前よりも特定の割合だけ透明にするには、代わりにcolor.scale()を使用します。

transparentize() は通常、色をより透明にするための最良の方法ではないため、新しいモジュールシステムには直接含まれていません。ただし、既存の動作を維持する必要がある場合は、transparentize($color, $amount) を color.adjust($color, $alpha: -$amount, $space: hsl) と記述できます。

プレイグラウンド

SCSS構文

@use 'sass:color';

// rgba(#036, 0.3) has alpha 0.3, so when transparentize() subtracts 0.3 it
// returns a fully transparent color.
@debug transparentize(rgba(#036, 0.3), 0.3); // rgba(0, 51, 102, 0)

// scale() instead makes it 30% more transparent than it was originally.
@debug color.scale(rgba(#036, 0.3), $alpha: -30%); // rgba(0, 51, 102, 0.21)
プレイグラウンド

Sass構文

@use 'sass:color'

// rgba(#036, 0.3) has alpha 0.3, so when transparentize() subtracts 0.3 it
// returns a fully transparent color.
@debug transparentize(rgba(#036, 0.3), 0.3)  // rgba(0, 51, 102, 0)

// scale() instead makes it 30% more transparent than it was originally.
@debug color.scale(rgba(#036, 0.3), $alpha: -30%)  // rgba(0, 51, 102, 0.21)
プレイグラウンド

SCSS構文

@debug transparentize(rgba(#6b717f, 0.5), 0.2);  // rgba(107, 113, 127, 0.3)
@debug fade-out(rgba(#e1d7d2, 0.5), 0.4);  // rgba(225, 215, 210, 0.1)
@debug transparentize(rgba(#036, 0.3), 0.3);  // rgba(0, 51, 102, 0)
プレイグラウンド

Sass構文

@debug transparentize(rgba(#6b717f, 0.5), 0.2)  // rgba(107, 113, 127, 0.3)
@debug fade-out(rgba(#e1d7d2, 0.5), 0.4)  // rgba(225, 215, 210, 0.1)
@debug transparentize(rgba(#036, 0.3), 0.3)  // rgba(0, 51, 102, 0)

color.whiteness($color) //=> number
互換性
Dart Sass
1.28.0以降
LibSass
✗
Ruby Sass
✗

$color のHWB ホワイトネスを 0% から 100% の間の数値として返します。

$colorは従来のカラースペースでなければなりません。

⚠️ 注意！

color.whiteness() は color.channel() と冗長であるため、推奨されなくなりました。color.whiteness($color) の代わりに、color.channel($color, "whiteness") を記述できます。

プレイグラウンド

SCSS構文

@use 'sass:color';

@debug color.whiteness(#e1d7d2); // 82.3529411765%
@debug color.whiteness(white); // 100%
@debug color.whiteness(black); // 0%
プレイグラウンド

Sass構文

@use 'sass:color'

@debug color.whiteness(#e1d7d2)  // 82.3529411765%
@debug color.whiteness(white)  // 100%
@debug color.whiteness(black)  // 0%