{"id":13397397,"url":"https://github.com/voxpelli/sass-color-helpers","last_synced_at":"2025-04-13T11:09:24.870Z","repository":{"id":17414596,"uuid":"20187497","full_name":"voxpelli/sass-color-helpers","owner":"voxpelli","description":"A collection of Sass color helpers that enables easier, more fool-proof design implementations (+ some math helpers)","archived":false,"fork":false,"pushed_at":"2023-05-23T17:45:07.000Z","size":31,"stargazers_count":92,"open_issues_count":7,"forks_count":9,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-27T02:13:06.242Z","etag":null,"topics":["contrast","hsv","sass"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/voxpelli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":["voxpelli"]}},"created_at":"2014-05-26T13:49:37.000Z","updated_at":"2024-03-13T12:47:31.000Z","dependencies_parsed_at":"2022-08-28T05:40:32.995Z","dependency_job_id":"ec3901f2-fa94-4593-be27-b5fdb101192f","html_url":"https://github.com/voxpelli/sass-color-helpers","commit_stats":{"total_commits":33,"total_committers":2,"mean_commits":16.5,"dds":"0.48484848484848486","last_synced_commit":"138471971f213158346dee3e12eda92d72aff201"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voxpelli%2Fsass-color-helpers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voxpelli%2Fsass-color-helpers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voxpelli%2Fsass-color-helpers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voxpelli%2Fsass-color-helpers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/voxpelli","download_url":"https://codeload.github.com/voxpelli/sass-color-helpers/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248703199,"owners_count":21148118,"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":["contrast","hsv","sass"],"created_at":"2024-07-30T18:01:21.578Z","updated_at":"2025-04-13T11:09:24.845Z","avatar_url":"https://github.com/voxpelli.png","language":"SCSS","funding_links":["https://github.com/sponsors/voxpelli"],"categories":["CSS"],"sub_categories":[],"readme":"# Sass Color Helpers\n\n***2021 update:** The CSS Color Module Level 5 specifies a native [`color-contrast()`](https://drafts.csswg.org/css-color-5/#colorcontrast) similar to `ch-color-contrast()`.* \n\nPure Sass, no Ruby. Should therefore be [libsass](http://libsass.org/) compatible. Also available as a Compass extension for those who still want that.\n\nA collection of color helpers (and some related math helpers). Handles HSL to HSV/HSB conversion, calculation of contrast (and warnings for worst case scenarios) and estimation of semi-transparent colors – everything to make it easier and more fool-proof to implement a target design and in the end get as good of a design as possible.\n\nLastly also some candy for the geeks: nth root and decimal exponent powers function. Because graphics can be tough.\n\n## Installation\n\n**NPM**:\n\n```bash\nnpm install sass-color-helpers --save\n```\n\nThen use something like [sass-module-importer](https://www.npmjs.com/package/sass-module-importer) to import it.\n\n**Bower**:\n\n```bash\nbower install sass-color-helpers --save\n```\n\nThen either manually include the individual helpers from the `stylesheets/` folder or set the load path of something like [grunt-contrib-sass](https://npmjs.org/package/grunt-contrib-sass) to look for files in the bower folder – or use something like [grunt-bower-install](https://www.npmjs.org/package/grunt-bower-install) to automate it all.\n\n**Compass**:\n\nInstall as a Compass extension through ruby gems: `gem install sass-color-helpers`\n\n**Manual**:\n\nJust copy the content of `stylesheets/` into a relevant part of your project, or just pick some of the files. If you include the individual files yourself – then remember that `_contrast.scss` and `_hsv-hsl.scss` both relies on `_math.scss` and you should therefore include that one first.\n\n## Requirements\n\n* Should work with all Sass 3.2 compatible preprocessors\n\n### Tested with:\n\n* Sass Gem, v 3.3.2 – **works**\n* node-sass (libsass), v 0.9.8 – **works**, excepts for the test\n* sassc (libsass), v 1.0.1 – **doesn't work**\n\n## Helpers\n\n### Alpha Picker / Estimation\n\n```scss\n$alpha: ch-calculate-alpha(#FFF, #526D4E, #DFE4DF);\n$actionColor: ch-calculate-top-color($alpha, #BEDBA1, #89D338);\n```\n\nOriginaly published at: https://gist.github.com/voxpelli/8452877\n\n#### Methods:\n\n* `ch-calculate-alpha($topColor, $bottomColor, $targetColor)` – to calculate an alpha from a defined color and colors picked from a reference image\n* `ch-calculate-top-color($alpha, $bottomColor, $targetColor)` – to calculate a color from a defined alpha and colors picked from a reference image\n\n### Contrast\n\n```scss\n$contrast: ch-color-contrast($backgroundColor, $textColor);\n\n@if ($contrast \u003c 3) {\n  @warn \"Contrast ratio of #{$textColor} on #{$backgroundColor} is pretty bad, just #{$contrast}\";\n}\n```\n\nOriginally published at: https://gist.github.com/voxpelli/6304812\n\nBased on code from: https://github.com/LeaVerou/contrast-ratio\n\n#### Methods:\n\n* `ch-color-contrast($color1, $color2)` – when given a background color and a front color it returns the [contrast ratio](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef) between those two\n* `ch-best-color-contrast($base, $colors: (#fff, #000), $tolerance: 0)` – when given a background color and a list of front colors it will return the first front color with the best contrast ratio. If tolerance is set to something higher than 0 than a front color later in the list will only beat a previous color if it improves the contrast ratio  by at least that much – useful if one has a preferably color that one wants to use in all but the most extreme cases.\n\n### HSV/HSB to HSL\n\n```scss\n$hsv: ch-color-to-hsv($color);\n\n$v: nth($hsv, 3);\n$s: nth($hsv, 2);\n$h: nth($hsv, 1);\n\n$v: max(0%, min(100%, $v + $tweak));\n\n$color: ch-hsv-to-color($h, $s, $v);\n```\n\nOriginally published at: https://gist.github.com/voxpelli/1069204\n\nBased on code from: http://ariya.blogspot.com/2008/07/converting-between-hsl-and-hsv.html\n\n#### Methods:\n\n* `ch-hsv-to-hsl($h, $s: 0, $v: 0)` – transforms a hsv value given by either individual parameters, or by a list as the first parameter, to a list of hsl values\n* `ch-hsl-to-hsv($h, $ss: 0, $ll: 0)` – transforms a hsl value given by either individual parameters, a list values as the first parameter or as a color as the first parameter, to a list of hsv values\n* `ch-color-to-hsv($color)` – alias for `ch-hsl-to-hsv($color)`\n* `ch-hsv-to-color($h, $s: 0, $v: 0)` – shorthand for a `ch-hsv-to-hsl($h, $s, $v)` followed by a `hsl()` transforming the hsl values to a color\n* `ch-brightness($h, $s: 0, $v: 0, $adjustment: 0)` – shorthand for changing the brightness of a color. If first argument is either a list of hsv values or a color then the second argument is the adjustment to apply. Otherwise the first threee arguments are the individal hsv values and the adjustment the fourth argument.\n\n### Math\n\nOriginally published at: https://gist.github.com/voxpelli/6304812\n\nBased on code from: http://rosettacode.org/wiki/Greatest_common_divisor#JavaScript and http://rosettacode.org/wiki/Nth_root#JavaScript\n\n#### Methods:\n\n* `ch-pow($base, $exponent, $prec: 12)` – calculates $base raised to the power of $exponent where $exponent can be a decimal number – and if so, $prec defines the precision of the calculation\n* `ch-nth-root($num, $n: 2, $prec: 12)` – calculates the nth root of a number with the defined precision. Used by `ch-pow()`.\n* `ch-gcd($a, $b)` – finds the greatest common divisor between the two values\n* `ch-max($v1, $v2)` – returns the biggest of the two values\n* `ch-min($v1, $v2)` – returns the smaller of the two values\n\n## License\n\nMIT, [http://voxpelli.mit-license.org](http://voxpelli.mit-license.org)\n\n## Changelog\n\n### 2.0.0\n\n* Repackaged as a Compass extension so that the code can be installed through either Compass or Bower (or manually)\n\n### 1.0.0\n\n* First packaged version of the scripts. They were previously published as gists on GitHub over a period of time.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoxpelli%2Fsass-color-helpers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvoxpelli%2Fsass-color-helpers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoxpelli%2Fsass-color-helpers/lists"}