First draft, color space announcement #1170

mirisuzanne · 2024-09-09T18:22:03Z

This includes some background on color spaces. I don't know if that's necessary or not. We could consider providing a link to skip that section.
There are a few places I reused bits of text or examples from the request for comments, or the proposal. Hopefully that's ok.
There are a few examples where I didn't have any easy way to get the result. Those should be marked with result: ???. Sometimes I used the ColorJs library to get a result, which might not be right (e.g. might have different levels of precision).
I don't think I covered every minor change (like changes to color.invert()) but I tried to cover the essentials.
I still need to add a few images …

Bumps [rollup](https://github.com/rollup/rollup) from 4.18.0 to 4.19.0. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](rollup/rollup@v4.18.0...v4.19.0) --- updated-dependencies: - dependency-name: rollup dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [@types/lodash](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/lodash) from 4.17.5 to 4.17.7. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/lodash) --- updated-dependencies: - dependency-name: "@types/lodash" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) from 7.16.0 to 7.17.0. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v7.17.0/packages/eslint-plugin) --- updated-dependencies: - dependency-name: "@typescript-eslint/eslint-plugin" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) from 7.24.7 to 7.24.9. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.24.9/packages/babel-core) --- updated-dependencies: - dependency-name: "@babel/core" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env) from 7.24.7 to 7.24.8. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.24.8/packages/babel-preset-env) --- updated-dependencies: - dependency-name: "@babel/preset-env" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) from 7.17.0 to 7.18.0. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v7.18.0/packages/eslint-plugin) --- updated-dependencies: - dependency-name: "@typescript-eslint/eslint-plugin" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [@types/markdown-it](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/markdown-it) from 14.1.1 to 14.1.2. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/markdown-it) --- updated-dependencies: - dependency-name: "@types/markdown-it" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [typescript](https://github.com/Microsoft/TypeScript) from 5.4.5 to 5.5.4. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Changelog](https://github.com/microsoft/TypeScript/blob/main/azure-pipelines.release.yml) - [Commits](microsoft/TypeScript@v5.4.5...v5.5.4) --- updated-dependencies: - dependency-name: typescript dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env) from 7.24.8 to 7.25.0. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.25.0/packages/babel-preset-env) --- updated-dependencies: - dependency-name: "@babel/preset-env" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [semver](https://github.com/npm/node-semver) from 7.6.2 to 7.6.3. - [Release notes](https://github.com/npm/node-semver/releases) - [Changelog](https://github.com/npm/node-semver/blob/main/CHANGELOG.md) - [Commits](npm/node-semver@v7.6.2...v7.6.3) --- updated-dependencies: - dependency-name: semver dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

…s#1128)

Bumps [prettier](https://github.com/prettier/prettier) from 3.3.2 to 3.3.3. - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md) - [Commits](prettier/prettier@3.3.2...3.3.3) --- updated-dependencies: - dependency-name: prettier dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [rollup](https://github.com/rollup/rollup) from 4.19.0 to 4.20.0. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](rollup/rollup@v4.19.0...v4.20.0) --- updated-dependencies: - dependency-name: rollup dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env) from 7.25.0 to 7.25.3. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.25.3/packages/babel-preset-env) --- updated-dependencies: - dependency-name: "@babel/preset-env" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [jquery-ui](https://github.com/jquery/jquery-ui) from 1.13.3 to 1.14.0. - [Release notes](https://github.com/jquery/jquery-ui/releases) - [Commits](jquery/jquery-ui@1.13.3...1.14.0) --- updated-dependencies: - dependency-name: jquery-ui dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) from 7.18.0 to 8.0.1. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v8.0.1/packages/eslint-plugin) --- updated-dependencies: - dependency-name: "@typescript-eslint/eslint-plugin" dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [@11ty/eleventy-plugin-rss](https://github.com/11ty/eleventy-plugin-rss) from 2.0.1 to 2.0.2. - [Release notes](https://github.com/11ty/eleventy-plugin-rss/releases) - [Commits](11ty/eleventy-plugin-rss@v2.0.1...v2.0.2) --- updated-dependencies: - dependency-name: "@11ty/eleventy-plugin-rss" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier) from 5.1.3 to 5.2.1. - [Release notes](https://github.com/prettier/eslint-plugin-prettier/releases) - [Changelog](https://github.com/prettier/eslint-plugin-prettier/blob/master/CHANGELOG.md) - [Commits](prettier/eslint-plugin-prettier@v5.1.3...v5.2.1) --- updated-dependencies: - dependency-name: eslint-plugin-prettier dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) from 8.0.1 to 8.1.0. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v8.1.0/packages/eslint-plugin) --- updated-dependencies: - dependency-name: "@typescript-eslint/eslint-plugin" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [immutable](https://github.com/immutable-js/immutable-js) from 4.3.6 to 4.3.7. - [Release notes](https://github.com/immutable-js/immutable-js/releases) - [Changelog](https://github.com/immutable-js/immutable-js/blob/main/CHANGELOG.md) - [Commits](immutable-js/immutable-js@v4.3.6...v4.3.7) --- updated-dependencies: - dependency-name: immutable dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [truncate-html](https://github.com/oe/truncate-html) from 1.1.1 to 1.1.2. - [Release notes](https://github.com/oe/truncate-html/releases) - [Commits](oe/truncate-html@v1.1.1...v1.1.2) --- updated-dependencies: - dependency-name: truncate-html dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [rollup](https://github.com/rollup/rollup) from 4.20.0 to 4.21.0. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](rollup/rollup@v4.20.0...v4.21.0) --- updated-dependencies: - dependency-name: rollup dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) from 8.1.0 to 8.2.0. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v8.2.0/packages/eslint-plugin) --- updated-dependencies: - dependency-name: "@typescript-eslint/eslint-plugin" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [liquidjs](https://github.com/harttle/liquidjs) from 10.14.0 to 10.16.3. - [Release notes](https://github.com/harttle/liquidjs/releases) - [Changelog](https://github.com/harttle/liquidjs/blob/master/CHANGELOG.md) - [Commits](harttle/liquidjs@v10.14.0...v10.16.3) --- updated-dependencies: - dependency-name: liquidjs dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) from 8.2.0 to 8.4.0. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v8.4.0/packages/eslint-plugin) --- updated-dependencies: - dependency-name: "@typescript-eslint/eslint-plugin" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Co-authored-by: Christophe Coevoet <stof@notk.org>

Co-authored-by: Jonny Gerig Meyer <jonny@oddbird.net>

Co-authored-by: Carlos (Goodwine) <2022649+Goodwine@users.noreply.github.com>

netlify · 2024-09-09T18:22:18Z

✅ Deploy Preview for sass-lang ready!

Name	Link
🔨 Latest commit	`0e38157`
🔍 Latest deploy log	https://app.netlify.com/sites/sass-lang/deploys/66df56c3600fad0008e8cd78
😎 Deploy Preview	https://deploy-preview-1170--sass-lang.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

nex3

This includes some background on color spaces. I don't know if that's necessary or not. We could consider providing a link to skip that section.

I like the idea of providing a link like "Already know all about color spaces? Skip ahead to the new Sass features!"

There are a few places I reused bits of text or examples from the request for comments, or the proposal. Hopefully that's ok.

Totally okay.

There are a few examples where I didn't have any easy way to get the result. Those should be marked with result: ???. Sometimes I used the ColorJs library to get a result, which might not be right (e.g. might have different levels of precision).

Ran these and added results.

I don't think I covered every minor change (like changes to color.invert()) but I tried to cover the essentials.

Yeah, we've got comprehensive docs and changelogs for that.

source/blog/042-wide-gamut-colors-in-sass.md

nex3 · 2024-09-12T00:10:39Z

source/blog/042-wide-gamut-colors-in-sass.md

+
+On the one hand, clean boundaries allow us to easily stay inside the range of available colors. Without those boundaries, it would be easy to *accidentally* request colors that aren't even physically possible. On the other hand, we expect these colors to be *perceived* by *other humans* -- and we need to make things *look* consistent, with enough contrast to be readable.
+
+The [CSS Color Module Level 4](https://www.w3.org/TR/css-color-4/) defines a number of new CSS color formats. Some of them maintain geometric access to specific color spaces. The `hwb()` function has been around for several years now, and defines `sRGB` colors using `hue`, `whiteness`, and `blackness` channels.  It's an interesting format, and [I've written about it before](https://www.miriamsuzanne.com/2022/06/29/hwb-clamping/).


The transition to talking about hwb() here feels a bit abrupt. Maybe a bridge sentence like "You're probably already familiar with the rgb() and hsl() functions." would help?

source/blog/042-wide-gamut-colors-in-sass.md

nex3 · 2024-09-12T00:37:41Z

source/blog/042-wide-gamut-colors-in-sass.md

+// result: ???
+$lab: color.mix(red, blue, 40%, lab);
+
+// result: ???


rgb(-129.55249236, 149.0291922672, 77.9649510422)

source/blog/042-wide-gamut-colors-in-sass.md

nex3 · 2024-09-12T00:48:35Z

source/blog/042-wide-gamut-colors-in-sass.md

+$clip-to-srgb: color.to-gamut($extra-pink, srgb, local-minde);
+```
+
+All legacy and RGB-style spaces represent bounded gamuts of color. Since mapping colors into gamut is a lossy process, it should generally be left to browsers or done with caution. For that reason, out-of-gamut channel values are maintained by Sass whenever possible, even when converting into gamut-bounded color spaces. The only exception is that `hsl` and `hwb` color spaces are not able to express out-of-gamut color, so converting colors into those spaces will gamut-map the colors as well.


The last sentence here is no longer true. We now preserve out-of-gamut colors everywhere.

nex3 · 2024-09-12T00:53:39Z

Retargeting this to merge with my color 4 updates PR

* color-4: Document new color spaces (sass#1055)

Co-authored-by: Natalie Weizenbaum <nweiz@google.com>

mirisuzanne · 2024-09-12T20:02:53Z

source/blog/042-wide-gamut-colors-in-sass.md

+
+The Sass color functions use the same syntax as the CSS functions, which means that a given color can be represented in a variety of different spaces. For example, these are all the same color:
+
+{% codeExample 'color-fns', false %}


@nex3 Should I move all the code demos to this format?

mirisuzanne · 2024-09-12T20:18:35Z

Merged in sass:color-4
Accepted all the review suggestions
Addressed all the specific comments
Included a skip-to-features link
Still a few unknown function results in the final code sample
Do we want all code samples in dual formats using the codeExample helper?

nex3 · 2024-09-12T20:36:38Z

source/blog/042-wide-gamut-colors-in-sass.md

+$extra-pink: color(display-p3 0.951 0.457 0.7569);
+
+// result: ???
+$clip-to-srgb: color.to-gamut($extra-pink, srgb, clip);


color(display-p3 0.930165971 0.4548604319 0.7563239804)

nex3 · 2024-09-12T20:37:02Z

source/blog/042-wide-gamut-colors-in-sass.md

+$clip-to-srgb: color.to-gamut($extra-pink, srgb, clip);
+
+// result: ???
+$map-to-srgb: color.to-gamut($extra-pink, srgb, local-minde);


color(display-p3 0.930165971 0.4548604319 0.7563239804), same as above :/

source/blog/042-wide-gamut-colors-in-sass.md

Co-authored-by: Natalie Weizenbaum <nweiz@google.com>

dependabot bot and others added 30 commits July 22, 2024 14:28

Add a blog post indicating that Node Sass is end-of-life (sass#1120)

d3aabb9

Link to the CSSWG thread on mixed decls (sass#1113)

d68caec

Document Embedded Dart Sass (sass#1121)

df2317a

Add mixed-decls.md breaking change to the breaking changes index (sas…

d5af2c5

…s#1128)

Fix link reference (sass#1129)

2d6ac2e

Fix grammatical error in syntax/index.md (sass#1142)

da0841c

Fix brace error in forward documentation (sass#1149)

ec99237

dependabot bot and others added 7 commits September 3, 2024 13:20

Cut a release for a new Dart Sass version

85bddda

Document the meta.feature-exists deprecation (sass#1148)

795bb50

Co-authored-by: Christophe Coevoet <stof@notk.org>

[Playground] Default code contents, Indented formatting (sass#1164)

7b13797

Co-authored-by: Jonny Gerig Meyer <jonny@oddbird.net>

Use the same TypeScript style as other Sass packages (sass#1165)

4fad520

Co-authored-by: Carlos (Goodwine) <2022649+Goodwine@users.noreply.github.com>

Re-enable eslint for source/assets/js (sass#1168)

a49d459

First draft, color space announcement

753dee8

mirisuzanne requested review from nex3 and jathak September 9, 2024 18:22

mirisuzanne assigned nex3 Sep 9, 2024

mirisuzanne added 2 commits September 9, 2024 13:03

Include srgb images

acabf7f

Finalize images

0e38157

nex3 requested changes Sep 12, 2024

View reviewed changes

nex3 changed the base branch from main to color-4 September 12, 2024 00:53

mirisuzanne and others added 2 commits September 12, 2024 12:36

Merge branch 'color-4' into color-space-post

3d6f27e

* color-4: Document new color spaces (sass#1055)

Apply suggestions from code review

45e3a84

Co-authored-by: Natalie Weizenbaum <nweiz@google.com>

mirisuzanne commented Sep 12, 2024

View reviewed changes

mirisuzanne added 2 commits September 12, 2024 14:13

Address specific review comments

87188ec

Include skip-to-features link

74caadc

nex3 reviewed Sep 12, 2024

View reviewed changes

mirisuzanne added 2 commits September 12, 2024 15:22

All examples in example syntax

946e742

Sneaky semi-colons trying to mess up my post

01c8036

mirisuzanne requested a review from nex3 September 12, 2024 21:26

Use 0% saturation, and consistent gray spelling

ba39578

nex3 approved these changes Sep 12, 2024

View reviewed changes

source/blog/042-wide-gamut-colors-in-sass.md Outdated Show resolved Hide resolved

Update source/blog/042-wide-gamut-colors-in-sass.md

e48db0e

Co-authored-by: Natalie Weizenbaum <nweiz@google.com>

nex3 merged commit 06124b3 into sass:color-4 Sep 12, 2024
4 of 5 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

First draft, color space announcement #1170

First draft, color space announcement #1170

mirisuzanne commented Sep 9, 2024 •

edited

Loading

netlify bot commented Sep 9, 2024 •

edited

Loading

nex3 left a comment

nex3 Sep 12, 2024

nex3 Sep 12, 2024

nex3 Sep 12, 2024

nex3 commented Sep 12, 2024

mirisuzanne Sep 12, 2024

nex3 Sep 12, 2024

mirisuzanne commented Sep 12, 2024 •

edited

Loading

nex3 Sep 12, 2024

nex3 Sep 12, 2024


		On the one hand, clean boundaries allow us to easily stay inside the range of available colors. Without those boundaries, it would be easy to accidentally request colors that aren't even physically possible. On the other hand, we expect these colors to be perceived by other humans -- and we need to make things look consistent, with enough contrast to be readable.

		The [CSS Color Module Level 4](https://www.w3.org/TR/css-color-4/) defines a number of new CSS color formats. Some of them maintain geometric access to specific color spaces. The `hwb()` function has been around for several years now, and defines `sRGB` colors using `hue`, `whiteness`, and `blackness` channels. It's an interesting format, and [I've written about it before](https://www.miriamsuzanne.com/2022/06/29/hwb-clamping/).


		The Sass color functions use the same syntax as the CSS functions, which means that a given color can be represented in a variety of different spaces. For example, these are all the same color:

		{% codeExample 'color-fns', false %}

First draft, color space announcement #1170

First draft, color space announcement #1170

Conversation

mirisuzanne commented Sep 9, 2024 • edited Loading

netlify bot commented Sep 9, 2024 • edited Loading

✅ Deploy Preview for sass-lang ready!

nex3 left a comment

Choose a reason for hiding this comment

nex3 Sep 12, 2024

Choose a reason for hiding this comment

nex3 Sep 12, 2024

Choose a reason for hiding this comment

nex3 Sep 12, 2024

Choose a reason for hiding this comment

nex3 commented Sep 12, 2024

mirisuzanne Sep 12, 2024

Choose a reason for hiding this comment

nex3 Sep 12, 2024

Choose a reason for hiding this comment

mirisuzanne commented Sep 12, 2024 • edited Loading

nex3 Sep 12, 2024

Choose a reason for hiding this comment

nex3 Sep 12, 2024

Choose a reason for hiding this comment

mirisuzanne commented Sep 9, 2024 •

edited

Loading

netlify bot commented Sep 9, 2024 •

edited

Loading

mirisuzanne commented Sep 12, 2024 •

edited

Loading