{"id":18496474,"url":"https://github.com/oddbird/blend","last_synced_at":"2025-07-20T01:06:22.336Z","repository":{"id":42897322,"uuid":"253158233","full_name":"oddbird/blend","owner":"oddbird","description":"More color options for sass…","archived":false,"fork":false,"pushed_at":"2024-04-16T18:17:18.000Z","size":1327,"stargazers_count":26,"open_issues_count":17,"forks_count":1,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-07-09T06:01:44.954Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oddbird.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":"oddbird","open_collective":"oddbird-open-source"}},"created_at":"2020-04-05T04:53:05.000Z","updated_at":"2023-03-15T17:14:21.000Z","dependencies_parsed_at":"2024-04-21T21:04:34.387Z","dependency_job_id":"e19f063a-05eb-4c58-9293-9df2e1765256","html_url":"https://github.com/oddbird/blend","commit_stats":{"total_commits":42,"total_committers":5,"mean_commits":8.4,"dds":0.3571428571428571,"last_synced_commit":"c0fa7713dfecf35d9f24715bc086787ca6f30ce5"},"previous_names":["mirisuzanne/blend"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/oddbird/blend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fblend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fblend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fblend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fblend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oddbird","download_url":"https://codeload.github.com/oddbird/blend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fblend/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264630440,"owners_count":23640927,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T13:29:38.088Z","updated_at":"2025-07-20T01:06:22.306Z","avatar_url":"https://github.com/oddbird.png","language":"SCSS","funding_links":["https://github.com/sponsors/oddbird","https://opencollective.com/oddbird-open-source"],"categories":[],"sub_categories":[],"readme":"# Blend\n\n_CSS color spaces for [Dart Sass][]…_\n\n[Dart Sass]: https://sass-lang.com/dart-sass\n\nCSS Color Module [Level 4][] \u0026 [Level 5][]\ninclude several new CSS color formats,\nnew color-adjustment syntax,\nand a contrast function.\n**Blend** provides early access to many of these features,\nwhile working with Sass colors.\n\n[Level 4]: https://www.w3.org/TR/css-color-4/\n[Level 5]: https://www.w3.org/TR/css-color-5/\n\nNote that conversion between color-spaces\nrequires gamut-adjustments and rounding.\nWhile we use the same conversion math recommended for browsers,\npre-processing can result in slight variations in each step.\nConverting a color from one format to another\nand back again, may result in slight differences.\n\n**Our Top Priority** right now\nis full support for `color(display-p3 r g b / a)`\nwhich can already be used for wide-gamut colors\nin Safari.\nThe conversion math is already supported,\nwe just need to finalize the user-facing API.\nHelp is welcome.\n\n## Color Picker\n\nTo get started with new CSS color formats\n(and LCH in particular),\ncheck out the wonderful\n[LCH Color Picker](https://css.land/lch/)\nby [Lea Verou](https://lea.verou.me/).\n\nWe use the same conversion math,\noriginally written in JS by\n[Chris Lilley](https://svgees.us/)\nand [Tab Atkins](https://www.xanthir.com/).\n\n## Usage\n\nDownload the files from GitHub, or install the npm package:\n\n```\nnpm install @oddbird/blend [--save-dev]\n```\n\nImport with Dart Sass\n\n```scss\n@use '\u003cpath-to\u003e/blend';\n```\n\n### Lab \u0026 LCH Formats\n\n(CIE) LCH \u0026 Lab color-conversion into (sRGB) sass colors:\n\n```scss\n$cie-to-sass: (\n  blend.lch(30% 50 300),\n  blend.lab(60% -60 60),\n\n  blend.lch(60% 75 120, 50%), // as %\n  blend.lab(60% -60 60, 0.5), // or as fraction\n);\n```\n\n### Color Contrast\n\nBased on the proposed Level 5 color-contrast() function:\n\n```scss\n$contrast: (\n  // default black or white for best contrast\n  blend.contrast($color),\n  // highest contrast\n  blend.contrast($color, maroon, rebeccapurple, cyan),\n  // first color with contrast \u003e= 4.5\n  blend.contrast($color, maroon, rebeccapurple, 4.5),\n);\n```\n\n### Inspecting Colors\n\nInspect LCH \u0026 Lab values of Sass colors:\n\n```scss\n$inspect: (\n  blend.lightness($color),\n  blend.a($color),\n  blend.b($color),\n  blend.chroma($color),\n  blend.hue($color),\n);\n```\n\n### Relative Colors\n\nRelative Sass color adjustments using LCH \u0026 Lab channels\n\n```scss\n$adjust: (\n  // set chroma to 10\n  blend.set($color, $chroma: 10),\n  // adjust hue by -10\n  blend.adjust($color, $hue: -10),\n  // scale lightness 10% lighter\n  blend.scale($color, $lightness: 10%),\n);\n```\n\nA relative-color shorthand,\nbased on rough interpretation\nof the Level 5 relative color syntax:\n\n```scss\n$from: (\n  // set chroma to 20\n  blend.from($color, l, 20, h),\n  // linear adjustments to a channel\n  blend.from($color, l, c, h -60),\n  // relative scale, e.g. \"half-way to white\"\n  blend.from($color, l 50%, c, h),\n  // multiply the channel value\n  blend.from($color, 2l, c, h),\n);\n```\n\n## Todo\n\nThe initial version is mostly focused on CIE colors,\nbut Level 4 includes an array of new formats.\nWe're working on it.\n\nSee the full list of [planned enhancements][todo].\n\n[todo]: https://github.com/oddbird/blend/issues?q=is%3Aissue+is%3Aopen+label%3Aenhancement\n\n```scss\n@use 'blend';\n\n$new-formats: (\n  blend.hwb(120deg 15% 15%),\n  blend.color(display-p3 0.728 0.2824 0.4581),\n  blend.color(rec-2020 0.6431 0.2955 0.4324),\n  ...,\n);\n\n$from-sass: (\n  blend.get($color, 'lch'),\n  blend.get($color, 'lab'),\n  blend.get($color, 'display-p3'),\n  ...,\n);\n\n$output: (\n  blend.string($color, 'lch'),\n  blend.string($color, 'lab'),\n  blend.string($color, 'display-p3'),\n  ...,\n);\n```\n\n---\n\n### Sponsor OddBird's OSS Work\n\nAt OddBird, we love contributing to the languages \u0026 tools developers rely on.\nWe're currently working on polyfills for new Popover \u0026 Anchor Positioning\nfunctionality, as well as CSS specifications for functions, mixins, and\nresponsive typography. Help us keep this work sustainable and centered on your\nneeds as a developer! We display sponsor logos and avatars on our\n[website](https://www.oddbird.net/blend/#open-source-sponsors).\n\n[Sponsor OddBird's OSS Work](https://opencollective.com/oddbird-open-source)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foddbird%2Fblend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foddbird%2Fblend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foddbird%2Fblend/lists"}