sass:color

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 на фиксированные значения.

Добавляет переданное значение для каждого ключевого аргумента к соответствующему каналу цвета и возвращает скорректированный цвет. По умолчанию, это может изменять только каналы в цветовом пространстве $color, но другое цветовое пространство может быть передано в качестве $space, чтобы вместо этого изменять каналы там. Это всегда возвращает цвет в том же пространстве, что и $color.

Все аргументы каналов должны быть числами и иметь единицы, которые можно было бы передать для этих каналов в конструкторе цветового пространства. Если текущее значение канала плюс значение корректировки находятся за пределами исходного диапазона канала, оно приводится к:

• красным, зелёным и синим каналам для цветового пространства rgb;
• каналу светлоты для цветовых пространств lab, lch, oklab и oklch;
• нижней границы каналов насыщенности и хроматичности для цветовых пространств hsl, lch и oklch;
• и каналу альфа для всех пространств.

См. также:

• color.scale() для плавного масштабирования свойств цвета.
• color.change() для установки свойств цвета.

@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

✗

Устанавливает один или несколько каналов цвета на новые значения.

Использует значение, переданное для каждого ключевого аргумента, вместо соответствующего канала цвета, и возвращает изменённый цвет. По умолчанию, это может изменять только каналы в цветовом пространстве $color, но другое цветовое пространство может быть передано в качестве $space, чтобы вместо этого изменять каналы там. Это всегда возвращает цвет в том же пространстве, что и $color.

Все аргументы каналов должны быть числами и иметь единицы, которые можно было бы передать для этих каналов в конструкторе цветового пространства. Каналы никогда не приводятся к предельному значению для color.change().

См. также:

• color.scale() для плавного масштабирования свойств цвета.
• color.adjust() для корректировки свойств цвета на фиксированные значения.

@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.2 0.1)
@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.2 0.1)
@debug color.change(#998099, $lightness: 30%, $space: oklch)
// rgb(58.0719961509, 37.2631531594, 58.4201613409)

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.

Каждый ключевой аргумент должен быть числом от -100% до 100% (включительно). Это указывает, насколько соответствующее свойство должно быть смещено от своего исходного положения в сторону максимального значения (если аргумент положительный) или минимального (если аргумент отрицательный). Это означает, что, например, $lightness: 50% приблизит все цвета 50% к максимальной светлоте, не делая их полностью белыми. По умолчанию, это может масштабировать только цвета в пространстве $color, но можно указать другое цветовое пространство в качестве $space, чтобы вместо этого масштабировать каналы в этом пространстве. Результат всегда будет цветом в том же пространстве, что и $color.

См. также:

• color.adjust() для изменения свойств цвета на фиксированные значения.
• color.change() для установки свойств цвета.

@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 в виде необрамлённой строки.

@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, устанавливая их в минимальные или максимальные значения гаммы, если они находятся за её пределами.

@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, которое должно быть необрамлённой строкой.

Если гамма исходного пространства $color шире гаммы $space, это может вернуть цвет, который находится за пределами гаммы $space. Вы можете преобразовать его в похожий цвет в пределах гаммы с помощью color.to-gamut().

Это может привести к цветам с отсутствующими каналами, либо если у $color есть аналогичный канал, который отсутствует, либо если канал неактивен в целевом пространстве. Чтобы убедиться, что преобразование в устаревшие цветовые пространства всегда приводит к цвету, совместимому со старыми браузерами, если $space устаревшее, это никогда не вернёт новый отсутствующий канал.

@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

Увеличивает или уменьшает оттенок HSL $color.

$hue должно быть числом от -360deg до 360deg (включительно) для добавления к оттенку $color. Оно может быть безразмерным или иметь любой угловой единицу. $color должно быть в устаревшем цветовом пространстве.

См. также color.adjust(), который может изменять любое свойство цвета.

// 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.blackness($color)
blackness($color) //=> number

Совместимость:

Dart Sass

с 1.28.0

LibSass

✗

Ruby Sass

✗

Возвращает черноту цвета HWB $color как число от 0% до 100%.

$color должно быть в устаревшем цветовом пространстве.

@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%

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

Делает $color более непрозрачным.

$color должно быть в лексическом цветовом пространстве.

$amount должно быть числом от 0 до 1 (включительно). Увеличивает альфа-канал $color на это значение.

@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)

@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

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

Делает $color более прозрачным.

$color должно быть в пространстве цветов устаревшего типа.

$amount должно быть числом от 0 до 1 (включительно). Уменьшает альфа-канал цвета $color на эту величину.

@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)

@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)